Chrome 拡張デバッグ時の罠！console.log の出力は３か所ある！

最近 Chrome 拡張(v3)づくりをはじめました。
デバッグを普通の javascript のノリでやったら console.log の出力が見れなくて困ったのでメモ。
「web ページ上で F12 押す → DevTools の console 欄を見る」
だけでは見れないパターンもあるらしい。

環境

2023/11/29 現在
manifest version: 3
Chrome バージョン: 119.0.6045.160（Official Build） （64 ビット）
OS: Windows 10

なんで通常の DevTools で見られないのか？

console が３つ別々にあるからです。
いや、調べてないだけで４つ以上あるのかもだけど、私が確認した範囲では３つ。
原理とか仕組みはわからないけど、とりあえず、「別の場所を見ないといけない」ということだけ抑えておけばデバッグを進められます。

その１：コンテントスクリプト（主に現在アクティブなタブに対して働きかける）

manifest.jsonファイルの"content_scripts":のところで定義した js ファイルのことです。 これの console.log は通常の javascript と同じ所に出力されます。
やり方は、アクティブタブのページ内にクリック等でフォーカスしてから F12。ブラウザの通常の DevTools ウィンドウの Console タブ。

その２：ポップアップ（拡張機能のアイコンを押すと表示される小さいページ）用 スクリプト

manifest.jsonファイルの

"action":
{
    "default_popup":
},

のところで定義した html ファイルから呼び出す js ファイルにあたる。
拡張機能のアイコンを右クリック、「ポップアップを検証」をクリックすればよい。

その３：バックグラウンドで動作するサービスワーカー（右クリックメニューの追加などに使う）

manifest.jsonファイルの

"background": {
        "service_worker":
    },

で定義した js ファイルのこと。これが一番見つけにくい印象。
まず、拡張機能のアイコンを右クリック、「拡張機能を管理」で拡張機能のページへとぶ。

次に、中ほどにある
「ビューを検証 ・Service Worker」
を見つけてクリックすればよい。