web-dev-qa-db-ja.com

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

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

},

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

enter image description here

「[VM]（XXXX」というタイトルのこれらの奇妙で神秘的なスクリプトとは何ですか？

debugginggoogle-chrome-devtools
125
AllieCat

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

過去には、これらのスクリプトはすべて(program)というラベルが付けられていました。

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

更新2015-06-25

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

98
Rob W

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

//@ sourceURL=dynamicScript.js

WebKit、FireBug、IE8 Developer Toolなどのデバッガーで動的読み込みJavaScriptをデバッグできますか？

34
Sully

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

34
Sam Kauffman

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

4
Piers

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

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

Debugger;

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

3
Rodrirokr

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

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

0
Justin Noel

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

0
JosdeHa

@sourceURLを使用すると、evalで作業するときに開発をはるかに簡単にすることができます。

評価されるコードに次の特別なコメントを含めることにより、evalsおよびインラインスクリプトとスタイルに名前を付けて、DevToolsでより論理的な名前として表示することができます。

//# sourceURL=someName

詳細はこちら- https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps#sourceurl_and_displayname

0
yoAlex5