Chrome DevTools を使用したキャンバスの検査

はじめに

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 に新しいキャンバス検査機能があり、それを行うことができます。

この記事では、この機能を使用してキャンバス処理のデバッグを開始する方法を説明します。インスペクタは 2D コンテキストと WebGL コンテキストの両方をサポートしているため、どちらを使用しても、有用なデバッグ情報をすぐに確認できます。

はじめに

使用を開始するには、Chrome で about:flags にアクセスし、[デベロッパー ツールの試験運用版を有効にする] をオンにします

about:flags でデベロッパー ツールのテストを有効にします。
図 1 - about:flags でデベロッパー ツールのテストを有効にする

次に、DevTools に移動して、右下にある歯車 歯車アイコン をクリックします。そこから [テスト] に移動し、[キャンバス検査] を有効にできます。

DevTools のテストで Canvas 検査を有効にする
図 2 - DevTools のテストでキャンバス検査を有効にする

変更を有効にするには、DevTools を閉じて再度開く必要があります（Alt+R または Option+R を使用すると便利です）。

DevTools を再度開くと、[Profiles] セクションに移動すると新しい [Canvas Profiler] オプションが表示されます。

まず、Canvas Profiler が無効になっています。デバッグするキャンバスを含むページを表示したら、[有効にする] を押すだけです。ページが再読み込みされ、<canvas> 呼び出しをキャプチャできるようになります。

Canvas Profiler をオンにする
図 3 - Canvas Profiler の切り替え

DevTools のタイムラインに表示されるフレームとまったく同じフレームの場合、1 つのフレームをキャプチャするか、連続するフレームをキャプチャするかを決定する必要があります。

単一フレーム: 現在のフレームが終了して停止するまで呼び出しをキャプチャします。一方、連続フレームは、停止を指示するまですべての <canvas> 要素のすべてのフレームをキャプチャします。どちらのモードを選択するかは、<canvas> 要素の使用方法によって異なります。進行中のアニメーションでは、1 つのフレームをキャプチャできます。ユーザー イベントに反応して発生する短いアニメーションの場合、連続するフレームをキャプチャする必要があります。

キャプチャするフレーム数の選択
図 4 - キャプチャするフレーム数の選択

これで準備が完了し、撮影を開始できるようになりました。

フレームのキャプチャ

キャプチャするには、[Start] を押してから、通常どおりにアプリを操作するだけです。しばらくして DevTools に戻り、連続してキャプチャする場合は [Stop] を押します。

左側のリストに新しいプロファイルができ、すべての <canvas> 要素でキャプチャされたコンテキスト呼び出しの数が表示されます。プロフィールをクリックすると、次のような画面が表示されます。

DevTools のキャンバス プロファイル。
図 5 - DevTools のキャンバス プロファイル

下部のペインには、キャプチャしたすべてのフレームのリストが表示され、各フレームをクリックすると、そのフレームの最後における <canvas> 要素の状態が上部のスクリーンショットに表示されます。複数の <canvas> 要素がある場合は、スクリーンショットのすぐ下にあるメニューを使用して、表示する要素を選択できます。

キャンバスのコンテキストを選択する
図 6 - キャンバス コンテキストの選択

フレーム内に描画呼び出しグループが表示されます。各描画呼び出しグループには、グループ内で最後の呼び出しとなる 1 つの描画呼び出しが含まれます。ドローコールとは何でしょうか。2D コンテキストの場合は clearRect()、drawImage()、fill()、stroke()、putImageData() などのテキスト レンダリング関数、WebGL の場合は clear()、drawArrays()、drawElements() です。基本的には、現在の描画バッファの内容を変更するあらゆるものです。（グラフィックに詳しくない方は、バッファとは、ピクセルを含んだビットマップと考えることができます）。

あとはリストを順に回るだけです。これは、フレームレベル、描画コールグループレベル、または呼び出しレベルで行うことができます。どの方法でリスト内を進む場合でも（スクリーンショットのすぐ下に、すばやく移動するためのボタンがあります）、その時点のコンテキストが表示されるため、見つかったバグをすばやく見つけて修正できます。

リストの切り替えに便利なナビゲーション ボタン。
図 7 - リストを簡単に確認するためのナビゲーション ボタン

違いを見つける

もう 1 つの便利な機能は、2 回の呼び出し間でどのプロパティと変数が変化したかを確認できる機能です。

これを確認するには、サイドバー ボタン（サイドバー アイコン。）をクリックするだけで、新しいビューがポップアップ表示されます。描画呼び出しを順に実行すると、更新されたプロパティが表示されます。バッファまたは配列にカーソルを合わせると、その内容が表示されます。

違いを見つける

ユーザーの声に耳を傾けましょう。

以上で、Chrome の DevTools でキャンバス作業をデバッグする方法がわかりました。Canvas Profiler ツールに関するフィードバックがある場合は、バグを報告するか、Chrome DevTools グループに投稿してください。<canvas> を確認する際にバグを見つけた場合や、確認したい情報がありましたらお知らせください。Chrome のツールの改善は、デベロッパーの利用とフィードバックを通じてのみ可能になります。