主要ブラウザのツールで eval した JavaScript をデバッグできるか に続いて document.write した JavaScript をデバッグできるか確認してみました。もとネタとした JavaScript は、次のとおりです。
<script type="text/javascript">
document.write(
' <script> ',
' function d2() { \n',
' var foo = 1; \n',
' var bar = 2; \n',
' foo += bar; \n',
' console.log(foo, bar); \n',
' }; ',
' <\/script> '
);
</script>
<input type="button" value="d2" onclick="d2();" />
IE8
標準の開発ツールでデバッグできませんでした。何か方法をご存知でしたら教えてください。
IE7 以前
調べていません。ご存知でしたら教えてください。
Firefox 3
Firebug を使ってデバッグできますが、実用レベルではありませんでした。JavaScript 中から debugger; を使ってデバッガを起動し、ステップ実行できるのですが、ソースコードと実行中の行がチグハグで、どの箇所をデバッグしているか判断できません。何か方法をご存知でしたら教えてください。
Firefox 2 以前
Firefox 3 と同じです。
Chrome
次のとおり、標準の JavaScript Debugger を使って、デバッグできませんでした。関数単位でブレークポイントは指定できましたが、行単位はできませんでした。具体的なファイル名が分かれば、行単位でデバッグできるのですが、document.write で生成した無名リソースは、関数が最小単位のようです。何か方法をご存知でしたら教えてください。
Safari 4
標準の Web Inspector を使ってデバッグできませんでした。何か方法をご存知でしたら教えてください。
Safari 3 以前
Safari 4 と同じです。
Opera 9.5, 9.6
次のとおり、標準の Dragonfly を使ってデバッグできました。
Opera 9.2 以前
調べていません。ご存知でしたら教えてください。
以上です。document.write した JavaScript をデバッグするときは Opera 9.5, 9.6 を使うとよさそうです。本当に困り果てたときは Firebug でガンバルという選択もありそうです。
1 件のコメント:
IE 8 の開発者ツールでのデバッグは可能
ブレークポイントの設定位置を
input type="button" value="d2" onclick="d2();"
にすればウオッチで変数の中身を見ることができる。
はっきりいってFirbugより機能は上だと思うが...
コメントを投稿