デバッグ方法

このチュートリアルでは、Google Chrome に組み込まれている “デベロッパー ツール” を使って拡張機能のデバッグを行う方法を、ご紹介します。

拡張機能に関する情報を表示する

このチュートリアルは、まずは はじめてみよう で最初の拡張機能を作ってあることが前提となっています。この拡張機能を読み込み、その情報を取得してみましょう。

  1. 最初の拡張機能が実行されていない場合、読み込みを行う。拡張機能が実行され、アドレスバーの横に が表示されている状態にする。
    拡張機能の作成や読み込み手順について、必要であれば はじめてみよう を参照のこと。
  2. 拡張機能管理画面(chrome://extensions)を開き、デベロッパーモードになっていることを確認する。
  3. 最初の拡張機能に関する情報を、確認する。拡張機能の名前、説明、IDなどを見ることが出来る。
  4. 拡張機能管理画面上をよく見たまま、アイコン をクリックする。すると、拡張機能のブロック “アクティブな閲覧数を確認:” の下に “popupo.html” というリンクが現れる。

通常、ここで現れたリンクをクリックすることで、ポップアップページを調査することが出来ます。しかしながら、リンクをクリックしてもポップアップが閉じられるだけで何も起きない場合もあります。(これは、ポップアップページからキーボードのフォーカスが外れたため) 次のセクションでは、ポップアップページを調査する方法を見ていきましょう。

ポップアップページの調査

拡張機能内にあるファイルは全て chrome-extension というプロトコルを使うことで表示させることが出きます。この機能は、特にポップアップをデバッグする際に便利です。

  1. 拡張機能管理ページからIDを取得する。例えば、“opnnhifacfpohionnikhlecfgheooenk” のような文字の羅列がIDである。
  2. 新しいタブをブラウザ上に開き、アドレスボックスに “chrome-extension://extensionId/popup.html” のように入力する。extensionIdは、先程取得したID。
    きちんと指定出来れば、下図のようにポップアップ画面がタブ内に単体で表示される。
  3. 拡張機能管理画面に戻り F5 を押し、ブラウザをリロードさせて拡張機能の情報を更新する。
  4. popup.html のリンクをクリックする。すると下図のような “デベロッパーツール” ウインドウが開き popup.html のコードが表示されるはずである。
  5. もし Scripts ボタンが押されていない状態であれば、クリックする。
  6. コンソール表示ボタン （デベロッパーツールの下部、左から2番目）をクリックして、コードとコンソールが表示されている状態にする。

デバッガを利用する

このセクションでは、ポップアップページに画像が追加されていく様子を確認してみます。

  1. 画像追加のループがまわるあたりで img.src を検索し、該当コードの行番号(37行目あたり)をクリックしてブレークポイントを設定する。
  2. ブラウザ側で popup.html のタブを見ていることを確認する。20ほどの画像が表示されているはずである。
  3. デベロッパーツールのコンソールで “location.reload()” と入力し、Enterを叩いてポップアップページを再読み込みさせる。
    するとポップアップページは真っ白になり、先程ブレークポイントを設定した箇所で止まるはずである。
  4. デベロッパーツールの右上にを見ると、“Scope Variables” は “Local” を指している。ここでは、スコープにある全ての変数の現在の値を確認することが出来る。例えば、次のスクリーンショットを見ると i の値は 0 である。そして photos は幾つかの要素を含むノードリストになっている。（実際のところ、ここには 0 から 19 までの 20 の要素を含んでいるはずだ）
  5. 再生/停止ボタン （デベロッパーツールの右上あたり）をクリックして、ループを一度進める。このボタンをクリックする度に i の値は増えていき、ページ上には画像が徐々に表示されてくる。例えば i の値が 10 の時点では、ポップアップページは次のようになっているだろう。
  6. この再生/停止ボタンの隣はステップ実行用のもので、順に Step Over (関数をまたぐ)、 Step Into (関数に入る)、 Step Out (関数から出る)になる。ページのロードを終わらせるため、ブレークポイントの行番号をクリックして解除し、再生/停止ボタン をクリックしよう。

まとめ

このチュートリアルでは、拡張機能のデバッグに使える幾つかの機能を試してみることができました。