Chrome Development Tool: [VM] file from javascript
DebuggingGoogle Chrome-DevtoolsDebugging Problem Overview
I added a breakpoint in my javascript file (jaydata.js) and was pressing "Step over to the next function call." When it got to a line that was:
},
another file titled "[VM] (8312)" popped up. I kept clicking "Step over to the next function call" and now my screen is:
What are these strange and mysterious scripts titled "[VM](XXXX " and where do they come from?
Debugging Solutions
Solution 1 - Debugging
[VM] (scriptId) has no special meaning. It's a dummy name to help us to distinguish code which are not directly tied to a file name, such as code created using eval and friends.
In the past, all of these scripts were just labelled (program).
If you're interested, just look up "[VM]"in the source code of Chromium, you will discover that these numbers have no significant meaning outside the developer tools.
update 2015-06-25
[VM] (scriptId) was renamed to VMscriptId a while ago, and here is the direct link to search result in case the value changes again.
Solution 2 - Debugging
When using eval, the javascript gets thrown into the Chrome Debugger VMs. In order to view js created with eval under Chrome Debugger Sources, set this attribute at the end (thanks Splaktar) of the js:
//@ sourceURL=dynamicScript.js
Solution 3 - Debugging
Whenever you load HTML content through AJAX, and that content contains <script> tags, the script will be evaluated using eval() and recognized by Chrome's Sources view as a new file beginning with 'VM'. You can always go to the Network tab, find the AJAX request, and view the HTML response in its entirety, including your script.
Solution 4 - Debugging
If you want to debug programmatically injected JS files in chrome you can use the debugger; statement, this is faster than finding where your script is and also faster than generating a file with sourceurl.
It works like a breakpoint and automaticaly pinpoints your code in the chrome source tab wherever you use the debugger; statement.
Note that the source of the script is a VMXXX file.
Solution 5 - Debugging
I found VM gets generated from some Chrome extensions - they insert CSS/JS into the page and Chrome uses the VM files to run it.
Solution 6 - Debugging
When you're debugging a child window (iframe) source which is subsequently unloaded your source file will also get the VM prefix and the yellow background.
Solution 7 - Debugging
I ran into the same problem. The issue is that my app's code was considered blackboxes by accident. When I tried to step into the code, it kept opening these VMXXXX tabs.
After removing the blackbox setting for my app's js file, I could successfully step through my code.
Solution 8 - Debugging
I had the same issue when I was debugging my angular application. Seeing too many VM scripts which could not be blackboxed were really taking long to debug. I rather chose mozilla/IE explorer to debug.
Solution 9 - Debugging
for prevent this
(function ()
{
var originalEval = eval;
eval =
function (script)
{
return originalEval(script + "\n//# sourceURL=blackbox-this.js");
}
}());
And then blackbox ^.*blackbox-this.js$
Same for setInterval/setTimeout when it gets a string (but that is a bad practice anyway, right? ;))
Does that work for you?