Chrome拡張機能のbackground.jsからコンソールメッセージを読み取るには?


194

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!")

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



いいえVERBOSEのように強調表示バーは、他のタブ上にある場合、メッセージや情報を選択してください選択したタブの問題
siluveruキラン・クマール

回答:


375

あなたは間違った場所を見ています。ログに記録されたコンソールメッセージは、Webページではなく、(非表示の)バックグラウンドページに表示されます。これらのメッセージをコンソールに表示するには、次の手順に従います。

にアクセスしてくださいchrome://extensions/
拡張機能のアイコンを右クリックして、[拡張機能の管理]をクリックすることもできます。

  1. 開発者モードを有効にする
  2. バックグラウンドページのリンク([ビューの検査]をクリック)をクリックします。
  3. このページの開発者コンソールが開きます

新しいUI:

ここに画像の説明を入力してください ここに画像の説明を入力してください

古いUI:

画像


@RobW、拡張機能を展開するための三角形のボタンがなく、アクティブなビューが表示されません。この回答は最新のChromeビルドのソリューションではなくなったのですか、それとも何か不足していますか?
gwg 2014年

1
@ggundersen写真を更新しました。三角形が削除され、開発者モードがアクティブになると、そのステップが自動的に実行されるようになりました。
Rob W

次に、コンテンツスクリプトをどのようにデバッグしますか?
SuperUberDuper 2017

1
@SuperUberDuperコンテンツスクリプトが実行されているタブのdevtoolsを介して。
Rob W

13

同じ問題がありました。私の場合、Chromeデベロッパーツールのコンソールタブでログが[すべて非表示]に設定されていました。これがオプションであることに気づかなかったし、オフにしたことを思い出せない

Chrome開発ツールのコンソールタブでの設定のスクリーンショット


7

Chrome拡張機能の「コンテンツスクリプト」のデバッグコンソールを表示したいフォロワーは、通常の「開発者コンソールを表示」を実行して、ドロップダウン矢印を使用して「JavaScript環境」を選択すると、アクセスできます。メソッドなどへ

ここに画像の説明を入力してください


5

さらに

manifest.jsonでcontent_script jsファイルを確認する場合(「background」プロパティが設定されていない場合)

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

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

次に、拡張機能アイコンを右クリックし、[ ポップアップ検査 ]をクリックします。ポップアップが表示され、開発者ウィンドウにpopup.htmlが開きます。コンソールタブが表示されます。


9
1)これは質問に答えません、2)これは単に間違っています。コンテンツスクリプトは、挿入されたページのコンソール、つまり実際のブラウザタブにメッセージを記録します。あなたのコードでpopup.jsは、で再利用されたpopup.htmlと思います。そのため、そのコピーの出力は、あなたが言及した場所に行きます。しかし、それは完全に誤解を招くものです。
2014年

2
この回答は、ポップアップとして実行される
Chrome

1

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

ここに画像の説明を入力してください

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


1

ポップアップページからコンソールに出力されたメッセージを読みたい場合は、拡張アイコンをクリックしてポップアップページを開き、ポップアップページを右クリックします。ドロップダウンメニューが表示され、[検査]メニューをクリックするだけで開発者ツールを開きます。ポップアップページを開いたままにする必要があることに注意してください。(window.close()によって)閉じられると、開発者ツールも閉じられます。


0

私にもこの問題がありました。私のWebページが新しく保存されたスクリプトに更​​新されていないようです。これは、ChromeブラウザでCtrl+更新(またはCtrl+ F5)を押すことで解決しました。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.