Chrome Development Tool: [VM] file from javascript

chrome debugger blackbox vm files
chrome blackbox vm files
javascript vm instance chrome
chrome debug async/await
chrome debugger skip line
chrome developer tools blackbox script
call stack chrome dev tools
chrome step through javascript

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?

[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.

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  The File Navigator pane. Every file that the page requests is listed here. The Code Editor pane. After selecting a file in the File Navigator pane, the contents of that file are displayed here. The JavaScript Debugging pane. Various tools for inspecting the page's JavaScript.

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.

How to step through your code, Run a Javascript file which uses eval() 2. Add a breakpoint I would like to be able to blackbox VMXXX scripts either by entering "VM.*" in the chromium.org. Yes, just open the "Source" Tab in the dev-tools and navigate to the script you want to change . Make your adjustments directly in the dev tools window and then hit ctrl+s to save the script - know the new js will be used until you refresh the whole page.

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

Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?

526239 - How do I Blackbox VMXXX scripts in Chrome?, Open the Chrome Developer Tools by using shortcut keys (Windows: you exit out of the main .html file and into the debugger:///VM file (this is  Not all JavaScript files are visible in Chorme Developer tools any more. Google Chrome is up to date. Version 44.0.2403.130 m Debug version of the app. Scripts in the head.

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.

JavaScript Debugging Tips Part III – Adva, 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: },. Now that we have accessed the Console, we can begin working within it in JavaScript. Chrome. To open the JavaScript Console in Chrome, you can navigate to the menu at the top-right of your browser window signified by three vertical dots in a row. From there, you can select More Tools then Developer Tools.

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.

How to Debug JavaScript Using Your Browser's DevTools, Google Chrome is one of the most popular browsers with a built-in JavaScript on Mac, or If you just love your mouse go to Menu > More Tools > Developer Tools . This tab has sections for the code window, file tree, call stack & watch eval() in a container simply called a virtual machine(VM) within the browser process. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. Check out the video for live demonstrations of core DevTools workflows, including debugging CSS, prototyping CSS

Chrome Console: VM, " concatenated with the script ID as a title for these scripts. Some sites may fetch many pieces of JavaScript code via XHR and eval it. Google Chrome for developers was built for the open web. Test cutting-edge web platform APIs and developer tools that are updated weekly.

How to edit JavaScript code in your browser and see the changes in , 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]  Use breakpoints to pause your JavaScript code. This guide explains each type of breakpoint that's available in DevTools, as well as when to use and how to set each type. For a hands-on tutorial of the debugging process, see Get Started with Debugging JavaScript in Chrome DevTools. Overview of when to use each breakpoint type

Chrome Development Tool: [VM] file from javascript, When you blackbox a source file, the debugger will not jump into that file when stepping through code you're debugging. The screenshot above shows that app.​js  JavaScript Development Tools (JSDT): This provides plugins that support debugging JavaScript using Rhino and Crossfire. It can debug JS in all major browsers. Node Inspect: Similar to the Chrome Developer Tools, but for when your app runs on Node.js. Security Analyzers. Cybersecurity has become a top priority for both companies and countries.

Comments
  • These VM files also appear when you are editing files which are debugging at the same time. Chrome loses synch and when a breakpoint is put on the file it will stop the code at some other position in the file in memory somewhere. e.g. test.html will allow a breakpoint but when Chrome stops it does so at VM99:test.html at some other position. The solution is to close Chrome rename the files, e.g. test2.html, and start again. (Clearing history, cache etc doesn't work and Chrome will keep loading the VM99:test.html if you try that.
  • Would Chrome hit the [VM] file instead of the live js file? If so, why?
  • @Matt What do you mean by "Hit the [VM] file instead of the live js file"?
  • @RobW disregard; my browser was caching the js file (despite having updated my cache buster).
  • [VM] (scriptId) was renamed to VMscriptId a while ago, but I've kept the answer in its current state to not invalidate the question. The latest codesearch link is: cs.chromium.org/%22VM%5C%22%20+%22 (direct link to search result in case the value changes again: chromium.googlesource.com/chromium/blink/+/…)
  • I recently encountered this problem without any eval - it appears to be related to the use of iFrames. My evidence for this is that when I set a breakpoint on code in an iFrame, I get the [VM] problem, but when I open the iFrame in its own window, I get hit the breakpoint just fine. Just sure if this qualifies as one of eval's "friends" as described in the answer.
  • This sucks for debugging though. If I use a script tag with src=/test.js then cause an error that traces back to test.js, the traceback contains the correct filename, but thereafter, stacktraces contain the VM magic. This makes it impossible to get the source code [from same origin] for the files in the stacktrace more than once, and you can't cache them, as you don't know which file is which in future stacktraces. This is fixed in Dev Tools, but not in webapps.
  • The syntax has changed, now its: //# sourceURL=dynamicScript.js
  • It should also be at the end of the JavaScript, not the start.
  • Been looking for something like this. Thanks
  • Thank you! It's so useful!
  • On Firefox debug tools, it says Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead