Chrome開発ツール：JavaScriptの[VM]ファイル

JavaScriptファイル（jaydata.js）にブレークポイントを追加し、「次の関数呼び出しにステップオーバーする」を押していました。それが次のような行になったとき：

},

「[VM]（8312）」というタイトルの別のファイルがポップアップしました。「次の関数呼び出しにステップオーバー」をクリックし続けたところ、画面は次のようになりました。

「[VM]（XXXX）」というこれらの奇妙で神秘的なスクリプトは何ですか、またどこから来たのですか？

[VM] (scriptId)特別な意味はありません。を使用evalして作成されたコードなど、ファイル名に直接関連付けられていないコードを区別するのに役立つダミーの名前です。

以前は、これらのスクリプトはすべて単にラベル付けされていました(program)。

興味がある場合は、Chromiumのソースコードを調べる"[VM]"だけで、これらの数値が開発者ツール以外では重要な意味を持たないことがわかります。

2015年6月25日更新

[VM] (scriptId)はVMscriptId しばらく前に名前が変更されました。値が再び変更された場合の検索結果への直接リンクは次のとおりです。

AJAXを介してHTMLコンテンツをロードし、そのコンテンツに<script>タグが含まれている場合、スクリプトはeval（）を使用して評価され、Chromeのソースビューで「VM」で始まる新しいファイルとして認識されます。いつでも[ネットワーク]タブに移動し、AJAXリクエストを見つけて、スクリプトを含むHTML応答全体を表示できます。

evalを使用すると、JavaScriptがChromeデバッガVMにスローされます。Chromeデバッガーのソースの下でevalを使用して作成されたjsを表示するには、jsの最後（Splaktarに感謝）にこの属性を設定します。

//@ sourceURL=dynamicScript.js

WebKit、FireBug、IE8 Developer ToolなどのデバッガーでダイナミックロードJavaScriptをデバッグできますか？

プログラムで注入されたJS debugger;ファイルをChromeでデバッグする場合は、ステートメントを使用できます。これは、スクリプトの場所を見つけるよりも速く、sourceurlでファイルを生成するよりも高速です。

これはブレークポイントのように機能し、debugger;ステートメントを使用する場所であればどこでも、自動的にchromeソースタブのコードを特定します。

スクリプトのソースはVMXXXファイルであることに注意してください。

一部のChrome拡張機能からVMが生成されることがわかりました-それらはページにCSS / JSを挿入し、ChromeはVMファイルを使用してそれを実行します。

後でアンロードされる子ウィンドウ（iframe）ソースをデバッグする場合、ソースファイルにもVMプレフィックスと黄色の背景が表示されます。

私も同じ問題に遭遇しました。問題は、私のアプリのコードが誤ってブラックボックスと見なされたことです。コードにステップインしようとしたときに、これらのVMXXXXタブが開かれ続けました。

アプリのjsファイルのブラックボックス設定を削除した後、コードをステップ実行できました。

これを防ぐために

(function ()
 {
  var originalEval = eval;
  eval =
   function (script)
   {
    return originalEval(script + "\n//# sourceURL=blackbox-this.js");
   }
 }());

そしてブラックボックス ^.*blackbox-this.js$

文字列を取得するときのsetInterval / setTimeoutについても同じです（とにかくそれは悪い習慣ですよね;））

それはあなたのために働きますか？

Angularアプリケーションをデバッグしているときにも同じ問題が発生しました。ブラックボックス化できないVMスクリプトが多すぎると、デバッグに本当に時間がかかりました。私はむしろデバッグするためにmozilla / IEエクスプローラーを選びました。