Chrome Development Tool: [VM] -Datei aus Javascript

139

Ich habe meiner Javascript-Datei (jaydata.js) einen Haltepunkt hinzugefügt und auf "Schritt zum nächsten Funktionsaufruf" geklickt. Als es zu einer Zeile kam, die war:

},

Eine weitere Datei mit dem Titel "[VM] (8312)" wurde angezeigt. Ich habe immer wieder auf "Zum nächsten Funktionsaufruf wechseln" geklickt und jetzt ist mein Bildschirm:

Geben Sie hier die Bildbeschreibung ein

Was sind diese seltsamen und mysteriösen Skripte mit dem Titel "[VM] (XXXX" und woher kommen sie?

debugging google-chrome-devtools AllieCat
quelle
1
Diese VM-Dateien werden auch angezeigt, wenn Sie Dateien bearbeiten, die gleichzeitig debuggen. Chrome verliert die Synchronisation und wenn ein Haltepunkt in die Datei eingefügt wird, stoppt es den Code an einer anderen Stelle in der Datei im Speicher. Beispiel: test.html erlaubt einen Haltepunkt, aber wenn Chrome stoppt, geschieht dies bei VM99: test.html an einer anderen Position. Die Lösung besteht darin, Chrome zu schließen, die Dateien umzubenennen, z. B. test2.html, und erneut zu starten. (Das Löschen des Verlaufs, des Caches usw. funktioniert nicht und Chrome lädt weiterhin die Datei VM99: test.html, wenn Sie dies versuchen.
QuentinUK

Antworten:

112

[VM] (scriptId)hat keine besondere Bedeutung. Es ist ein Dummy-Name, der uns hilft, Code zu unterscheiden, der nicht direkt mit einem Dateinamen verknüpft ist, z. B. mit evalund Freunden erstellter Code .

In der Vergangenheit wurden alle diese Skripte nur beschriftet (program).

Wenn Sie interessiert sind, schauen"[VM]" Sie einfach im Quellcode von Chromium nach . Sie werden feststellen, dass diese Zahlen außerhalb der Entwicklertools keine signifikante Bedeutung haben.

Update 25.06.2015

[VM] (scriptId)wurde vor einiger VMscriptId Zeit umbenannt und hier ist der direkte Link zum Suchergebnis, falls sich der Wert erneut ändert.

Rob W.
quelle
1
Würde Chrome die [VM] -Datei anstelle der Live-JS-Datei treffen? Wenn ja warum?
Matt
@Matt Was meinst du mit "Hit die [VM] -Datei anstelle der Live-JS-Datei"?
Rob W
@ RobW ignorieren; Mein Browser hat die JS-Datei zwischengespeichert (obwohl ich meinen Cache-Buster aktualisiert habe).
Matt
1
[VM] (scriptId)wurde vor einiger VMscriptId Zeit umbenannt , aber ich habe die Antwort in ihrem aktuellen Zustand beibehalten, um die Frage nicht ungültig zu machen. Die neueste Codesearch Link lautet: cs.chromium.org/%22VM%5C%22%20+%22 (direkter Link Ergebnis , falls die Suche der Wert ändert sich wieder: chromium.googlesource.com/chromium/blink/+/... )
Rob W
Ich bin kürzlich auf dieses Problem ohne Bewertung gestoßen - es scheint mit der Verwendung von iFrames in Zusammenhang zu stehen. Mein Beweis dafür ist, dass beim Festlegen eines Haltepunkts für Code in einem iFrame das Problem [VM] auftritt. Wenn ich den iFrame jedoch in einem eigenen Fenster öffne, wird der Haltepunkt einwandfrei erreicht. Stellen Sie sicher, dass dies einer der "Freunde" von eval ist, wie in der Antwort beschrieben.
Gefahr
42

Wenn Sie HTML-Inhalte über AJAX laden und diese Inhalte <script>Tags enthalten, wird das Skript mit eval () ausgewertet und in der Quellenansicht von Chrome als neue Datei erkannt, die mit "VM" beginnt. Sie können jederzeit zur Registerkarte Netzwerk wechseln, die AJAX-Anforderung suchen und die HTML-Antwort in ihrer Gesamtheit einschließlich Ihres Skripts anzeigen.

Sam Kauffman
quelle
3
Dies ist jedoch zum Debuggen geeignet. Wenn ich ein Skript-Tag mit verwende und src=/test.jsdann einen Fehler verursache, der auf test.js zurückgeht, enthält der Traceback den richtigen Dateinamen, danach enthalten Stacktraces die VM-Magie. Dies macht es unmöglich, den Quellcode [vom selben Ursprung] für die Dateien im Stacktrace mehr als einmal abzurufen, und Sie können sie nicht zwischenspeichern, da Sie nicht wissen, welche Datei in zukünftigen Stacktraces welche ist. Dies ist in Dev Tools behoben, jedoch nicht in Webanwendungen.
Carl Smith
Dies ist wahrscheinlich der häufigste Grund für moderne Webanwendungen und ein weiteres gutes Beispiel dafür, warum wir Code von Inhalten trennen sollten.
Alexw
37

Bei Verwendung von eval wird das Javascript in die Chrome Debugger-VMs geworfen. Um js anzuzeigen, die mit eval unter Chrome Debugger Sources erstellt wurden, setzen Sie dieses Attribut am Ende (danke Splaktar) des js:

//@ sourceURL=dynamicScript.js

Ist es möglich, dynamisches Laden von JavaScript mit einem Debugger wie WebKit, FireBug oder IE8 Developer Tool zu debuggen?

Besudeln
quelle
9
Die Syntax hat sich geändert, jetzt ist es: // # sourceURL = dynamicScript.js
ThiagoPonte
1
Es sollte sich auch am Ende des JavaScript befinden, nicht am Anfang.
Splaktar
Ich habe nach so etwas gesucht. Danke
David Kierans
Danke dir! Es ist so nützlich!
Eva Juan
4
Auf Firefox Debug-Tools heißt esUsing //@ to indicate sourceURL pragmas is deprecated. Use //# instead
Nighto
6

Wenn Sie programmgesteuert injizierte JS-Dateien in Chrome debuggen möchten, können Sie die debugger;Anweisung verwenden. Dies ist schneller als das Auffinden, wo sich Ihr Skript befindet, und auch schneller als das Generieren einer Datei mit sourceurl .

Es funktioniert wie ein Haltepunkt und lokalisiert Ihren Code automatisch auf der Registerkarte "Chrome-Quelle", wo immer Sie die debugger;Anweisung verwenden.

Debugger;

Beachten Sie, dass die Quelle des Skripts eine VMXXX-Datei ist.

Rodrirokr
quelle
Dies scheint die Frage nicht zu beantworten.
Grant Miller
Mein schlechtes, ich lasse mich von den anderen Antworten auf diese Frage gehen.
Rodrirokr
1
Super! Genau das habe ich gesucht. Sie müssen nicht herausfinden, in welche VM Ihr Code von der JS-Engine eingefügt wurde.
Oleg Bolden
Was ist der Zusammenhang zwischen dieser Antwort und der Frage?
Ravindra Thorat
Mit der debugger;Aussage kann er entmystifizieren, woher die mysteriösen 'seltsamen und mysteriösen Skripte mit dem Titel "[VM] (XXXX"' kommen, wenn er dies wünscht.
Rodrirokr
4

Ich habe festgestellt, dass VM von einigen Chrome-Erweiterungen generiert wird - sie fügen CSS / JS in die Seite ein und Chrome verwendet die VM-Dateien, um sie auszuführen.

Pfeiler
quelle
0

Wenn Sie eine untergeordnete Fensterquelle (iframe) debuggen, die anschließend entladen wird, erhält Ihre Quelldatei auch das VM-Präfix und den gelben Hintergrund.

JosdeHa
quelle
0

Ich bin auf das gleiche Problem gestoßen. Das Problem ist, dass der Code meiner App versehentlich als Blackbox angesehen wurde. Als ich versuchte, in den Code einzusteigen, wurden diese VMXXXXRegisterkarten immer wieder geöffnet .

Nachdem ich die Blackbox-Einstellung für die js-Datei meiner App entfernt hatte, konnte ich meinen Code erfolgreich durchgehen.

Justin Noel
quelle
0

um dies zu verhindern 

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

Und dann Blackbox ^.*blackbox-this.js$

Gleiches gilt für setInterval / setTimeout, wenn es einen String bekommt (aber das ist sowieso eine schlechte Praxis, oder ?;))

Funktioniert das für dich?

RahmanRezaee
quelle
-1

Ich hatte das gleiche Problem beim Debuggen meiner Winkelanwendung. Es dauerte wirklich lange, bis zu viele VM-Skripte angezeigt wurden, die nicht in einer Blackbox gespeichert werden konnten. Ich habe mich lieber für Mozilla / IE Explorer entschieden, um zu debuggen.

Sameeksha Kumari
quelle