Alat Pengembangan Chrome: File [VM] dari javascript

148

Saya menambahkan breakpoint di file javascript saya (jaydata.js) dan menekan "Melangkah ke pemanggilan fungsi berikutnya." Ketika sampai pada baris itu adalah:

},

file lain berjudul "[VM] (8312)" muncul. Saya terus mengklik "Melangkah ke panggilan fungsi berikutnya" dan sekarang layar saya adalah:

masukkan deskripsi gambar di sini

Apa skrip aneh dan misterius berjudul "[VM] (XXXX" dan dari mana asalnya?

debugging google-chrome-devtools AllieCat
sumber
2
File VM ini juga muncul saat Anda mengedit file yang sedang di-debug pada saat yang sama. Chrome kehilangan sinkronisasi dan ketika sebuah breakpoint diletakkan pada file itu akan menghentikan kode di beberapa posisi lain dalam file dalam memori di suatu tempat. misalnya test.html akan mengizinkan breakpoint tetapi ketika Chrome menghentikannya di VM99: test.html di beberapa posisi lain. Solusinya adalah dengan menutup Chrome, ganti nama file, misalnya test2.html, dan mulai lagi. (Menghapus riwayat, cache, dll. Tidak berfungsi dan Chrome akan terus memuat VM99: test.html jika Anda mencobanya.
QuentinUK

Jawaban:

115

[VM] (scriptId)tidak memiliki arti khusus. Ini adalah nama tiruan untuk membantu kita membedakan kode yang tidak terkait langsung dengan nama file, seperti kode yang dibuat menggunakan evaldan teman.

Dulu, semua skrip ini hanya diberi label (program).

Jika Anda tertarik, cukup cari "[VM]"di kode sumber Chromium , Anda akan menemukan bahwa angka-angka ini tidak memiliki arti yang signifikan di luar alat pengembang.

perbarui 2015-06-25

[VM] (scriptId)telah diubah namanya menjadi VMscriptId beberapa waktu yang lalu , dan ini adalah tautan langsung ke hasil penelusuran jika nilainya berubah lagi.

Rob W.
sumber
1
Apakah Chrome akan membuka file [VM] dan bukan file js langsung? Jika ya, mengapa?
Matt
@Matt Apa yang Anda maksud dengan "Tekan file [VM] dan bukan file js langsung"?
Rob W
@Mengabaikan; browser saya sedang menyimpan file js (meskipun telah memperbarui buster cache saya).
Matt
1
[VM] (scriptId)telah diubah namanya menjadi VMscriptId beberapa waktu yang lalu , tetapi saya telah menyimpan jawaban dalam keadaan saat ini agar pertanyaan tidak batal. Tautan penelusuran kode terbaru adalah: cs.chromium.org/%22VM%5C%22%20+%22 (tautan langsung ke hasil penelusuran jika nilainya berubah lagi: chromium.googlesource.com/chromium/blink/+/… )
Rob W
1
Saya baru-baru ini mengalami masalah ini tanpa eval - tampaknya terkait dengan penggunaan iFrames. Bukti saya untuk ini adalah bahwa ketika saya menetapkan breakpoint pada kode di iFrame, saya mendapatkan masalah [VM], tetapi ketika saya membuka iFrame di jendelanya sendiri, saya mendapatkan breakpoint dengan baik. Pastikan apakah ini memenuhi syarat sebagai salah satu "teman" eval seperti yang dijelaskan dalam jawaban.
Bahaya
44

Setiap kali Anda memuat konten HTML melalui AJAX, dan konten tersebut berisi <script>tag, skrip akan dievaluasi menggunakan eval () dan dikenali oleh tampilan Sumber Chrome sebagai file baru yang diawali dengan 'VM'. Anda selalu dapat membuka tab Jaringan, menemukan permintaan AJAX, dan melihat tanggapan HTML secara keseluruhan, termasuk skrip Anda.

Sam Kauffman
sumber
4
Ini menyebalkan untuk debugging. Jika saya menggunakan tag skrip dengan src=/test.jskemudian menyebabkan kesalahan yang menelusuri kembali ke test.js, traceback berisi nama file yang benar, tetapi setelah itu, stacktraces berisi keajaiban VM. Hal ini membuat tidak mungkin untuk mendapatkan kode sumber [dari asal yang sama] untuk file di stacktrace lebih dari satu kali, dan Anda tidak dapat menyimpannya di cache, karena Anda tidak tahu file mana di stacktrace mendatang. Ini diperbaiki di Alat Dev, tetapi tidak di aplikasi web.
Carl Smith
Ini mungkin alasan paling umum hal ini terjadi di aplikasi web modern, dan contoh bagus lainnya tentang mengapa kita harus memisahkan kode dari konten.
alexw
41

Saat menggunakan eval, javascript dilemparkan ke VM Debugger Chrome. Untuk melihat js yang dibuat dengan eval di bawah Sumber Debugger Chrome, setel atribut ini di akhir (terima kasih Splaktar) dari js:

//@ sourceURL=dynamicScript.js

Apakah mungkin untuk men-debug JavaScript pemuatan dinamis oleh beberapa debugger seperti WebKit, FireBug atau Alat Pengembang IE8?

Menodai
sumber
9
Sintaksnya telah berubah, sekarang: // # sourceURL = dynamicScript.js
ThiagoPonte
1
Ini juga harus di akhir JavaScript, bukan di awal.
Splaktar
Sedang mencari sesuatu seperti ini. Terima kasih
David Kierans
Terima kasih! Ini sangat berguna!
Malam juan
4
Pada alat debug Firefox, dikatakanUsing //@ to indicate sourceURL pragmas is deprecated. Use //# instead
Nighto
7

Jika Anda ingin men-debug file JS yang dimasukkan secara terprogram di chrome, Anda dapat menggunakan debugger;pernyataan tersebut, ini lebih cepat daripada menemukan di mana skrip Anda berada dan juga lebih cepat daripada membuat file dengan sourceurl .

Ini berfungsi seperti breakpoint dan secara otomatis menunjukkan kode Anda di tab sumber chrome di mana pun Anda menggunakan debugger;pernyataan tersebut.

Debugger;

Perhatikan bahwa sumber skrip adalah file VMXXX.

Rodrirokr
sumber
Tampaknya ini tidak menjawab pertanyaan tersebut.
Grant Miller
Saya buruk, saya membiarkan diri saya mengikuti jawaban lain untuk pertanyaan ini.
Rodrirokr
1
Super! Inilah yang saya cari. Tidak perlu mencari tahu di mana VM kode Anda dimasukkan oleh mesin JS.
Oleg Bolden
apa hubungan antara jawaban ini dan pertanyaannya?
Ravindra Thorat
Dengan debugger;pernyataan tersebut dia dapat mengungkap dari mana
asal mula
4

Saya menemukan VM dihasilkan dari beberapa ekstensi Chrome - mereka memasukkan CSS / JS ke dalam halaman dan Chrome menggunakan file VM untuk menjalankannya.

Piers
sumber
0

Saat Anda men-debug sumber jendela anak (iframe) yang kemudian diturunkan, file sumber Anda juga akan mendapatkan awalan VM dan latar belakang kuning.

JosdeHa
sumber
0

Saya mengalami masalah yang sama. Masalahnya adalah kode aplikasi saya dianggap sebagai kotak hitam secara tidak sengaja. Ketika saya mencoba masuk ke kode, VMXXXXtab ini terus terbuka .

Setelah menghapus pengaturan kotak hitam untuk file js aplikasi saya, saya berhasil melangkah melalui kode saya.

Justin Noel
sumber
0

untuk mencegahnya 

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

Dan kemudian kotak hitam ^.*blackbox-this.js$

Sama untuk setInterval / setTimeout ketika mendapat string (tetapi itu adalah praktik yang buruk, kan?;))

Apakah itu berhasil untuk Anda?

RahmanRezaee
sumber
-1

Saya memiliki masalah yang sama ketika saya men-debug aplikasi sudut saya. Melihat terlalu banyak skrip VM yang tidak dapat dimasukkan ke kotak hitam membutuhkan waktu lama untuk di-debug. Saya lebih memilih mozilla / IE explorer untuk men-debug.

Sameeksha Kumari
sumber