はじめに
2D コンテキストと WebGL コンテキストのどちらを使用しているかにかかわらず、<canvas> 要素を扱ったことがある人なら誰でも、デバッグが非常に難しいことを知っています。キャンバスを操作するには、通常、長く複雑な呼び出しリストが必要になります。
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
キャンバス コンテキストに送信された命令をキャプチャして、1 つずつステップ実行したい場合があります。幸いなことに、Chrome の DevTools には、まさにそれを可能にする新しい Canvas 検査機能があります。
この記事では、この機能を使用して Canvas のデバッグを開始する方法について説明します。インスペクタは 2D と WebGL の両方のコンテキストをサポートしているため、どちらを使用していても、有用なデバッグ情報をすぐに取得できます。
スタートガイド
開始するには、Chrome で about:flags に移動し、[デベロッパー ツール試験運用版機能を有効にする] をオンにします。
次に、DevTools に移動し、右下の歯車アイコン 
をクリックします。そこから [Experiments] に移動し、[Canvas inspection] を有効にします。
変更を有効にするには、DevTools を閉じて再度開く必要があります（便利な代替手段として Alt+R または Option+R を使用できます）。
DevTools が再度開いたら、[Profiles] セクションに移動します。新しい [Canvas Profiler] オプションが表示されます。
まず、Canvas Profiler が無効になっていることがわかります。デバッグするキャンバスを含むページが表示されたら、[Enable] を押します。ページが再読み込みされ、<canvas> 呼び出しをキャプチャできるようになります。
単一のフレームをキャプチャするか、連続したフレームをキャプチャするかを決定する必要があります。フレームは、DevTools タイムラインに表示されるものとまったく同じです。
[Single frame] は、現在のフレームの終了まで呼び出しをキャプチャしてから停止します。一方、連続フレームでは、停止を指示するまで、すべての <canvas> 要素のすべてのフレームがキャプチャされます。どちらのモードを選択するかは、<canvas> 要素の使用方法によって異なります。進行中のアニメーションでは、1 つのフレームをキャプチャしたい場合があります。ユーザー イベントに応じて発生する短いアニメーションの場合は、連続したフレームをキャプチャする必要があるかもしれません。
これで、すべての設定が完了し、キャプチャを開始する準備が整いました。
フレームのキャプチャ
キャプチャするには、[Start] を押してから、通常どおりにアプリケーションを操作します。しばらくしたら DevTools に戻り、連続してキャプチャしている場合は [Stop] を押します。
これで、左側のリストに新しいプロファイルが表示され、すべての <canvas> 要素でキャプチャされたコンテキスト呼び出しの数が表示されます。プロファイルをクリックすると、次のような画面が表示されます。
下部のペインには、キャプチャされたすべてのフレームのリストが表示されます。各フレームをクリックすると、上部のスクリーンショットに、そのフレームの終了時の <canvas> 要素の状態が表示されます。<canvas> 要素が複数ある場合は、スクリーンショットのすぐ下にあるメニューを使用して、表示する要素を選択できます。
フレーム内には、描画呼び出しグループが表示されます。各描画呼び出しグループには、1 つの描画呼び出しが含まれます。これは、グループ内の最後の呼び出しになります。では、描画呼び出しとは何でしょうか。2D コンテキストの場合、clearRect()、drawImage()、fill()、stroke()、putImageData()、またはテキスト レンダリング関数などです。WebGL の場合、clear()、drawArrays()、drawElements() などです。基本的には、現在の描画バッファの内容を変更するすべてが該当します。（グラフィックに詳しくない場合は、バッファを、操作するピクセルを含むビットマップと考えてください）。
あとは、リストを順番に確認するだけです。これは、フレーム、描画呼び出しグループ、または呼び出しレベルで行うことができます。リストをステップ実行する方法（スクリーンショットのすぐ下にあるボタンを使用すると、すばやく移動できます）に関係なく、その時点のコンテキストが表示されるため、バグが発生したときにすばやく見つけて修正できます。
違いをチェック
もう 1 つの便利な機能は、2 つの呼び出しの間で変更されたプロパティと変数を表示できることです。
サイドバー ボタン（
）をクリックすると、新しいビューが表示されます。描画呼び出しをステップ実行すると、更新されたプロパティが表示されます。バッファや配列にカーソルを合わせると、その内容が表示されます。
声を届けましょう。
これで、Chrome の DevTools でキャンバスの作業をデバッグする方法がわかりました。Canvas Profiler ツールについてフィードバックがある場合は、バグを報告するか、Chrome DevTools グループに投稿してください。バグを見つけた場合や、<canvas> の検証時に確認したいことが他にある場合は、お知らせください。Chrome のツールは、デベロッパーの皆様の使用とフィードバックを通じてのみ改善されます。