google-chrome-extension
Chrome拡張機能のデバッグ

デベロッパーツールを使用して拡張機能をデバッグする

クロムエクステンションは最大4つのパーツに分かれています：

• 背景ページ
• ポップアップページ
• 1つまたは複数のコンテンツスクリプト
• オプションページ

それぞれの部分は本質的に別個であるため、個々のデバッグが必要です。

これらのページは別々のものであり、変数がそれらの間で直接共有されて おらず、これらのページの console.log() は他のパーツのログには表示されないことを 意味します 。

chrome devtoolsを使う：

Chrome拡張機能は、他のウェブアプリケーションやウェブページと同様にデバッグされます。デバッグは、ほとんどの場合、WindowsとMacのキーボードショートカットを使用してクロムのdevtoolsインスペクタを開くことで行われます： ctrl + shift + iとcmd + shift + iまたはページを右クリックしてinspectを選択します。

インスペクタから、開発者はhtml要素とcssがそれらにどのように影響するかをチェックしたり、コンソールを使用してjavascript変数の値を調べたり、開発者が設定したconsole.log()の出力を読み取ることができconsole.log() 。

インスペクタの使用方法の詳細については、 Chrome Devtoolsを参照してください 。

ポップアップ、オプションページ、およびchrome：//...yourExtensionId.../を使用してアクセス可能なその他のページを調べる：

ポップアップページとオプションページは、開いているときにそれらを調べるだけでアクセスできます。

拡張の一部であるがポップアップでもオプションページでもない追加のhtmlページも同様にデバッグされます。

背景ページの検査：

背景ページにアクセスするには、まずクロム拡張ページ（ chrome：// extensions /）に移動する必要があります。 「デベロッパーモード」のチェックマークが有効になっていることを確認してください。

次に、 「Inspect views」の横にある背景スクリプトをクリックして、背景ページを調べます。

コンテンツスクリプトの検査：

コンテンツスクリプトは、挿入されたWebサイトを横切って実行されます。最初にコンテンツスクリプトが挿入されているWebサイトを調べることで、コンテンツスクリプトを調べることができます。コンソールでは、拡張機能によって出力されたconsole.log()を表示できますが、コンテンツスクリプトの変数を変更または検査することはできません。

これを修正するには、通常'top'設定されているドロップダウンをクリックし、内線番号のリストから内線番号を選択する必要があります。

そこからあなたの内線内の変数にアクセスできます。