9

多分この質問は少し初心者のスタイルですが、私はこの JavaScript のことを理解していません。私の質問: 次のクロム拡張の例の挿入されたコードをデバッグするにはどうすればよい ですか? ファイル popup.js は send_links.js を実行します (私がこれを正しく理解していれば、これは挿入されたファイルです)。send_links.js をデバッグしたいと思います。Chrome の Developer Tools に send_links.js が表示されないため、ブレークポイントを設定できません。コマンド「デバッガー」を試しました。send_links.js にありますが、機能しません。"console.log("何とか");" コマンドも無視されます。

ありがとうございました！

4

4 に答える 4

6

debuggerアクションボタンを押す前に現在のタブの開発者ツールを開くと、キーワードが機能します。

また、スクリプトをその名前で表示する場合は、次の行を の任意の場所に追加しますsend_links.js。

//@ sourceURL=send_links.js

次に、現在のタブの開発者ツールの「コンテンツ スクリプト」タブにスクリプトが表示されます。そこにブレークポイントなどを設定できます。ただし、これを機能させるには、ボタンを押す前に、常にタブの開発者ツールを開く必要があります。

于 2013-01-18T11:46:25.443 に答える
4

All Injected Filesor Content Scriptsare Exposed to Page Developer Tools、通常の Java Script ページで実行するブレークポイントとすべての通常の操作を設定できます。

画像
(出典: google.com )

すべてのコンソール ログは、挿入されたページに表示されます。

元：

http://www.google.co.in/に注入console.log(document.getElementsByTagName('body')[0].style);する場合、 http://www.google.co.in/ページの devtools を開いてそのコンソールを調べる必要があります。

ここに画像の説明を入力

表示される出力は、通常のデバッグ結果と同様です。

編集1

それらはchrome.tabs.executeScript()を通じて公開されますが、間接的に、debugger;コマンドを設定するとコードを検査できます。

デモンストレーション

一部のサンプルコードが挿入する場合

chrome.tabs.executeScript(35, {
    "code": "console.log('hi');debugger;//@ sourceURL=send_links.js"
});

ページのデバッガーは、挿入されているスクリプトを示しています。

ここに画像の説明を入力

于 2013-01-18T18:40:45.067 に答える
0

拡張機能ではなくタブでデバッガーツールを開いたことが原因だと思います。拡張機能のアイコンを右クリックし、[検査] ポップアップメニュー項目を選択します。このページで詳細情報を見つけることができますhttp://developer.chrome.com/extensions/tut_debugging.html

于 2013-01-17T21:12:51.157 に答える
-1

この場合、ポップアップを開くまでスクリプトは挿入されません。ポップアップウィンドウが読み込まれると、が挿入send_links.jsされ、リンクの取得が完了するとすぐにメッセージが送信されます。このメッセージを逆にして、マニフェストにファイルを挿入できます。

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

send_links.js応答を送信するためのサポート付きのメッセージハンドラーをに追加します

chrome.extension.onMessage.addListener(function(message,sender,sendResponse){
  [...]
  sendResponse(links);
});

onMessage次に、ハンドラーとexecuteScript ポップアップをsendMessageコールバックに置き換えます

chrome.windows.getCurrent(function (currentWindow) {
  chrome.tabs.query({active: true, windowId: currentWindow.id},function(tab) {
    chrome.tabs.sendMessage(tab[0].id, {method: "getlinks"},function(links){
      for (var index in links) {
        allLinks.push(links[index]);
      }
      allLinks.sort();
      visibleLinks = allLinks;
      showLinks();
    });
  });
});

この配置はsend_links.jsすべてのページに配置されるため、より簡単にデバッグできます。バグがなくなったら、プログラムによるインジェクションに戻すことができます。このような場合は、より効率的だからです。スクリプトは、[ソース]>[コンテンツスクリプト]>[そのうちの1つ]（plfdheimenpnchlahmhicnkejgmhjhomたとえば）にあります。

編集されたソースファイル

于 2013-01-18T18:48:43.810 に答える