Bagaimana cara men-debug JavaScript yang dimuat secara dinamis (dengan jQuery) di debugger browser itu sendiri?

92

Skrip yang ditambahkan secara dinamis tidak muncul di bagian skrip debugger browser.

Penjelasan:

Saya perlu menggunakan dan telah digunakan

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

sehingga myScript.js dapat dimuat secara dinamis saat memenuhi beberapa kondisi ... Dan myFunction hanya dapat dipanggil setelah seluruh skrip dimuat ...

Tetapi browser tidak menampilkan myScript.js yang dimuat secara dinamis di bagian skrip debugger mereka.

Apakah ada cara lain sehingga semua tujuan dapat tercapai yang akan membuat seseorang dapat men-debug skrip yang dimuat secara dinamis di browser itu sendiri?

javascript debugging dynamic loaded TwiToT
sumber
Kemungkinan duplikat dari Apakah mungkin untuk men-debug JavaScript pemuatan dinamis oleh beberapa debugger seperti WebKit, FireBug atau Alat Pengembang IE8?
GorvGoyl
2
gunakan debugger;untuk berhenti otomatis dalam skrip yang dimuat dinamis, lihat javascript.info/debugging-chrome
yu yang Jian

Jawaban:

208

Anda dapat menamai skrip yang dimuat secara dinamis agar ditampilkan di debugger JavaScript Chrome / Firefox. Untuk melakukan ini, Anda memberi komentar di akhir skrip:

//# sourceURL=filename.js

File ini kemudian akan ditampilkan di tab "Sumber" sebagai filename.js. Dalam pengalaman saya, Anda dapat menggunakan \ dalam nama tetapi saya mendapatkan perilaku aneh jika menggunakan /.

Untuk informasi selengkapnya, lihat: Titik henti dalam penghentian JavaScript Dinamis dari // @ sourceurl

Menandai
sumber
19
Perhatikan bahwa ini diubah menjadi // #, meskipun // @ masih berfungsi di Chrome. Skrip dalam file .html juga dapat diberi nama dengan cara yang sama. Hati-hati! Jangan biarkan kosong sebelum dan sesudah tanda '='.
Mert Mertce
11
Bagi saya, file js ditampilkan di daftar sumber dalam grup yang disebut "(tidak ada domain)". Mungkin layak untuk disebutkan karena saya melewatkannya pada awalnya!
JMac
7
Hanya tip. Debugger Chrome melempar file pseudo-javascript ini ke elemen node "(tidak ada domain)" di tab Sumber, setidaknya saat men-debug di localhost. Di situlah saya menemukan mereka.
Robert Oschler
1
Hal lain yang harus diperhatikan adalah gaya komentar. Tautan "deprecation of / / @ sourceURL" yang Anda berikan menyebutkan "// # sourceURL =" dan "/ * # sourceURL =". Itu karena ini juga dapat digunakan untuk CSS, di mana Anda harus menggunakan komentar blokir, karena komentar "//" baris tunggal tidak valid. Yang mengejutkan saya adalah Anda tidak dapat menggunakan "/ * sourceURL =" dalam javascript. Itu hanya akan diabaikan.
Jools
2
Afaik, sebagian besar penambang JavaScript menghapus baris-baris ini dari tahap produksi, sehingga tidak berguna untuk mendiagnosis bug produksi.
Lluís Suñol
16

Anda dapat menggunakan //# sourceURL=dan //# sourceMappingURL=di akhir file skrip atau tag skrip Anda.

CATATAN: //@ sourceURL dan //@ sourceMappingURLtidak digunakan lagi.

xRavisher
sumber
Informasi penghentian selengkapnya: developers.google.com/web/updates/2013/06/…
Pysis
Tentu, tapi afaik kebanyakan penambang akan menghapus jalur ini pada tahap produksi.
Lluís Suñol
13

Saya mencoba menggunakan "// # sourceURL = filename.js" yang disarankan sebagai solusi oleh OP, tetapi masih tidak muncul untuk saya di panel Sumber kecuali sudah ada di tab saya dari waktu sebelumnya ketika itu menghasilkan pengecualian.

Membuat kode "debugger;" garis memaksanya putus di lokasi itu. Kemudian setelah berada di tab saya di panel Sumber, saya dapat menyetel breakpoint seperti biasa dan menghapus "debugger;" garis.

kevinpo
sumber
6
Ini juga dapat muncul di daftar (tanpa domain) di bawah tab Sumber.
Splaktar
1
Saya juga perlu menggunakan debugger;, dan DevTools harus dibuka saat skrip dimuat.
Barmar
2
sedikit info tambahan: gunakan browsertools: // sebagai protokol seperti dalam //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
dolbysurnd
6

Perhatikan bahwa file sumber yang muncul di tab sumber dengan cara ini akan muncul di grup (tanpa domain) dan, jika Anda ingin men-debugnya, Anda perlu menambahkan debugger;baris dalam kode Anda, buat baris itu dijalankan (biasanya di awal eksekusi file sumber Anda) dan kemudian tambahkan breakpoint Anda di mana pun Anda inginkan.

Jika Anda melakukan debug pada tahap produksi, di mana Anda mungkin tidak memiliki debugger;baris dalam kode Anda, Anda dapat mewujudkannya dengan melakukan peta lokal dengan CharlesProxy ke "salinan baru file sumber dengan baris debbuger dimasukkan".

Lluís Suñol
sumber
2
Ini menyelamatkan saya! Tidak peduli apa yang saya lakukan, file tersebut tidak muncul sampai saya memasukkan perintah debugger. Setelah itu tetap ada di seluruh halaman memuat ulang dan sesi debugging bahkan setelah saya menghapus perintah debugger.
Mike Devenney
0

Ketika mencoba melacak hal semacam ini di IE, saya membuka alat dev (F12) dan kemudian menemukan di mana menempatkan breakpoint dengan menggunakan baris berikut di konsol:

debugger;myFunction();

Itu beralih ke tab debugger tempat Anda dapat masuk myFunction()dan mengatur breakpoint.

Alan Samet
sumber