Google Chromeの拡張機能で［console.log］をデバッグに利用するためにログを表示する際に、表示されない場合の確認方法を備忘録的に投稿しておきます。
Chrome拡張機能のデバッグ用コンソール
Chrome ブラウザーで利用できる機能拡張の動作チェックのログで利用できる［コンソール］があります。
［background.js］などのJavaScriptでは次のようにコンソールに文字列などを表示できます。
console.log("hogehoge");通常は、Chromeの［開発者ツール］を表示して［Console］タブを選択すると表示されます。
拡張機能用のコンソール
拡張機能内で動作するJavaScriptには、ブラウザーのページ側に近いのコンテンツを制御する部分と拡張機能の本体側（言葉的にはページ側から遠い）部分で動作する部分があります。
構成によっては［background.js］内でも、ページに近い部分と遠い部分が混在してしまう場合があります。
Chromeの［開発者ツール］に表示される［Console］にはページ側に近い側のログが表示されます。
ページ側から遠いログは［機能拡張］から確認できます。
［機能拡張］画面で、ログを表示したい機能拡張の”ビューを検証［Service Worker］”部分をクリックします。
別画面で表示された［DevTools］画面の［Console］に表示されます。
まとめ
Google Chromeの拡張機能で［console.log］をデバッグに利用するためにログを表示する際に、表示されない場合の確認方法について書きました。
機能拡張の”background.js” などのスクリプトから “console.log” で出力されるログは、開発者ツールの［Console］画面以外にも機能拡張の”ビューを検証［Service Worker］”で表示されるコンソールに表示される場合があります。
Google Chromeの拡張機能で［Console］にログが表示されない人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただきありがとうございます。