ブラウザ上でevalしたJavaScriptのデバッグ(Chrome限定)

前提

ブラウザ上のAltJS(CoffeeScript等でJavaScriptにコンパイル)やJavaScriptをevalで実行するような環境においては、eval対象のJavaScriptをDeveloperToolsにてデバッグ(主にステップ実行など)することができないと思っていました。

でも、たまにeval対象のJavaScriptでエラーが発生した時などに、DeveloperToolsにevalしたJavaScriptのソースが表示され、エラーが発生した行にフォーカスがあたっていることがあり、エラーを起こさないとデバッグできないのかと諦めていました。

解決方法

evalするスクリプト内で、console.logでログ出力することにより、Chrome内でevalされたスクリプトにアクセスできるようになります。

// サンプルコード(Chrome上のDeveloperToolsのコンソールで実行できます)
// (1)関数を返却するスクリプト
var script = '(function(){\n' +
         'console.log("vmstart");\n' + 
         'return function() { \n' + 
         '  for(i = 0;i < 10;i++){\n' +
         '    console.log(i);\n' +
         '  }\n' +
         '}})()';

var f = eval(script); // (2)evalし、関数を取得

f();  // (3)関数を実行

(１)evalするJavaScriptの先頭に、どんな文字列でも良いので、console.logで文字列を出力します。
上記のコードで(2)を実行すると、DeveloperTools上には、このような表示になります。

コンソールに出力されたvmstart の右側に表示されているVM7139:2をクリックすると、evalしたスクリプトのソースが表示され、ブレークポイントも設定できるようになります。

(3)を実行した時に、ブレークポイントで止まっている様子

注意

evalするごとに、最初に表示されるログ(vmstart)の右側の値(VM????)の値が変更されるので、ブレークポイントはリセットされてしまうようです。