chrome.tabs.executeScript でインジェクトしたコードのデバッグ

[Nori]

浜本と申します。
初めてこのグループに投稿します。
現在Chrome拡張の開発をしているのですが、chrome.tabs.executeScriptでインジェクトしたコードのデバッグ方法で困って
います。

chrome.tabs.executeScriptでインジェクトしたコードがChromeのデベロッパツールのScriptタグのスクリプト一覧に
デフォルトの状態で表示されない様です。
しかし、インジェクトするコードを呼んでいるcontent.jsの行にブレイクポイントを貼って、そこからステップインして行くと、ソースコードが現
れます。

ただし、この方法ですとインジェクトしたソース同士の呼び出しが深くなると、一つ一つステップインして行かなければならず、しかもjQueryのメソッ
ドチェーンの中で呼び出しが有ると、チェーンのメソッド一つ一つステップイン/スッテップアウトして辿りつかなければならないという、かなり不毛な作業
を強いられます。(チェーンの途中にブレイクポイントを貼れないため。)

インジェクトするコードに直接ブレイクポイントが貼れれば一発で問題に辿り着けるのですが、何か良い案は有りませんでしょうか？
みなさん、どうしているかお聞かせいただけたらと思います。

よろしくお願いします。
Nori@FireDictionary
twitter: @norisuke3

[Ohta Shogo]

こんにちは、太田です。

> インジェクトするコードに直接ブレイクポイントが貼れれば一発で問題に辿り着けるのですが、何か良い案は有りませんでしょうか？
まさに直接ブレイクポイントを設定する方法があります。
インジェクトするコードのブレイクしたいところに、
debugger;
という1行を加えるだけで、その行でブレイクさせることができます。
ワンクリックでブレイクポイントをオンオフできるのに比べると少々手間ではありますが、コメントアウトもできるので、充分使えるかと思います。
# Firebugなどでも使えるテクニックです

ちなみに、Chrome5(5.0.342.2 devで確認)では、sourceURLというメタデータでソース元のファイルを指定することもできま
す。
executeScriptするコードに、次のような行を加えて置き、

# script.js開始
//@ sourceURL=script.js
console.log(chrome);
# /script.jsここまで

background pageなどで次のようにexecuteScriptを実行します。

# background.js
var source = get_js();
function get_js(callback){
var url = 'script.js';
var xhr = new XMLHttpRequest();
xhr.open('GET',url,false);
xhr.send(null);
return xhr.responseText;
}
chrome.tabs.onUpdated.addListener(function(tabid,info,tab){
if (info.status === 'complete') {
chrome.tabs.executeScript(tabid,{
code:source,
allFrames:true
});
}
});
# /background.js

こうすると、debuggerの指定がなくても、scriptの一覧にscript.jsが表示されます。
ファイル名が付いて、わかりやすくなるのでお薦めです。
ただ、この方法ではブレイクポイントの指定が効かないみたいでした。

以上、参考になれば幸いです。

[HAMAMOTO Nori]

太田さん

お返事ありがとうございます。

gihyo.jp でchrome 拡張の記事書いていた太田さんですね。

あの記事は、HTML5の解説も絡めていて大変勉強になりました！！

debugger; でブレイクポイントが挿入できると言う件、まさに知りたかった事です。

試してみましたが、これで効率よく開発/デバッグができそうです。

後、@ sourceURL でスクリプトリストにスクリプトが表示できるというのも試してみました。

ブレイクポイントがクリックで貼れないのが残念ですが、多分将来的にはサポートされるようになるんでしょうね。

今後ともよろしくです。

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

Nori@FireDictionary

twitter: @norisuke3

2010年3月7日0:20 Ohta Shogo <os0...@gmail.com>:

--
このメールは Google グループのグループ「Chromium-Extensions-Japan」の登録者に送られています。
このグループに投稿するには、chromium-ext...@googlegroups.com にメールを送信してください。
このグループから退会するには、chromium-extension...@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/chromium-extensions-japan?hl=ja からこのグループにアクセスしてください。