主要ブラウザのツールで eval した JavaScript をデバッグできるか確認してみた

こんにちは。なかじまんです。Twitter での言いだしっぺということもあり、少し泥臭いことしました。

主要ブラウザのツールで eval した JavaScript をデバッグできるか確認してみました。もとネタとした JavaScript は、次のとおりです。

<script type="text/javascript">
eval(
' function d1() { \n' +
' var foo = 1; \n' +
' var bar = 2; \n' +
' foo += bar; \n' +
' console.log(foo, bar); \n' +
' }; '
);
</script>
<input type="button" value="d1" onclick="d1();" />

IE8

次のとおり、標準の開発者ツールを使って、デバッグできました。



IE7 以前

デバッグできませんでした。アドインが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Firefox 3

次のとおり、Firebug を使って、デバッグできました。ただ、タイミングなどによって、うまく動作しないことがあります。何かコツがあるのかもしれません。



Firefox 2 以前

Firebug を使っても、デバッグできませんでした。JavaScript 中から debugger; を使って、デバッガを起動できるのですが、eval した JavaScript を行単位でデバッグできませんでした。また、他のアドオンが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Chrome

次のとおり、標準の JavaScript Debugger を使って、デバッグできませんでした。関数単位でブレークポイントは指定できましたが、行単位はできませんでした。具体的なファイル名が分かれば、行単位でデバッグできるのですが、無名リソースは、関数が最小単位のようです。無名リソースで、行単位にデバッグする方法をご存知でしたら教えてください。



Safari 4

次のとおり、標準の Web Inspector を使って、デバッグできました。



Safari 3 以前

デバッグできませんでした。アドオンが存在するかもしれませんが、調べていません。ご存知でしたら教えてください。

Opera 9.5, 9.6

次のとおり、標準の Dragonfly を使って、デバッグできました。



Opera 9.2 以前

調べていません。ご存知でしたら教えてください。

以上です。最新か次世代のブラウザであれば、おおむねデバッグできるようですね。