Google Chromeの拡張機能で表示したサイドパネル内のJavaScriptで出力したログを確認する場合の手順について備忘録的に投稿しておきます。
Google Chrome サイドパネル
Chromeに実装されているサイドパネルを拡張機能から開くことができます。
拡張機能からサイドパネルを操作する詳しい手順は別記事をご覧ください。
サイドパネルの［検証］
Chromeで利用できる拡張機能を制作する際に、デバッグ時に下記のようなログ出力がしたい場合があります。
console.log("Hello World!");出力されたログは［開発者ツール］の［コンソール］タブで表示可能ですが、Service Workerとして動作している［background.js］は［拡張機能］画面から表示する必要があります。
それと、同様にサイドパネルに表示しているコンテンツ内のJavaScriptから出力したログは、［開発者ツール］の［コンソール］タブには表示されません。
ログを確認するにはサイドパネルに表示されたコンテンツ用の［コンソール］タブを開きます。
具体的には次の手順で表示できます。
1. サイドパネルに表示したコンテンツを右クリックして表示された［検証］メニューを選択します。
2. 表示された［DevTools］画面の［コンソール］を選択します。
以上の手順で、サイドパネル内のJavaScriptで出力が確認できます。
まとめ
今回は、Google Chromeの拡張機能で表示したサイドパネル内のJavaScriptで出力したログを確認する場合の手順について書きました。
サイドパネル内のJavaScriptからの出力は右クリックして表示された［検証］メニューから確認できます。
Google Chromeの拡張機能でサイドパネルで出力したログを確認したい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただきありがとうございます。