debugging - 拡張機能のbackground.jsのコンソールとdevtoolsにアクセスする

Question

Google Chrome拡張機能を使い始めたばかりですが、バックグラウンドのjsからコンソールにログインできないようです。エラーが発生した場合（たとえば、構文エラーが原因で）、エラーメッセージも見つかりません。

私のマニフェストファイル：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js：

alert("here");
console.log("Hello, world!")

拡張機能をロードすると、アラートが表示されますが、コンソールに何も記録されていません。私は何が間違っているのですか？

score 411 · Accepted Answer

あなたは間違った場所を見ています。これらのコンソールメッセージは Web ページには表示されませんが、非表示のバックグラウンドページ (ManifestV2) またはサービスワーカー (ManifestV3) に表示されます。

正しいコンソールを表示するには、バックグラウンドスクリプトのコンテキストの devtools を開きます。

拡張機能のアイコンにアクセスchrome://extensions/するか右クリックして、[拡張機能の管理] を選択します。
開発者モードを有効にする
background page(ManifestV2) または(ManifestV3)という名前のリンクをクリックしservice workerます。

ManifestV2 拡張機能のスクリーンショット:

ManifestV3 拡張機能のスクリーンショット:

score 16 · Accepted Answer

私は同じ問題を抱えていました。私の場合、Chrome 開発者ツールのコンソールタブでログが「すべて非表示」に設定されていました。これがオプションであることさえ知らなかったし、それをオフにしたことを覚えていない

score 8 · Accepted Answer

さらに

manifest.jsoncontent_scriptで js ファイル (「background」プロパティが設定されていない場合)を見たい場合

"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

次に、拡張機能のアイコンを右クリックしてInspect popupをクリックすると、開発者ウィンドウが popup.html を開いた状態で開き、そこにコンソールタブが表示されます。

score 3 · Accepted Answer

Michiel の回答と同様に、面白いコンソール構成もありました: 設定を覚えていないフィルター:

フィルターをクリアした後、メッセージを見ました。

score 0 · Accepted Answer

他の回答は background.js で機能しますが、ポップアップから console.logs を探している場合は、次を試すことができます。

var bkg = chrome.extension.getBackgroundPage();
bkg.console.log('foo');

私はcraを使用して開発していましたが、これでうまくいきました。

debugging - 拡張機能のbackground.jsのコンソールとdevtoolsにアクセスする

8 に答える 8

Related

Reference