Tarayıcının hata ayıklayıcısının kendisinde dinamik olarak yüklenmiş JavaScript'te (jQuery ile) nasıl hata ayıklanır?

92

Tarayıcının hata ayıklayıcısının komut dosyaları bölümünde dinamik olarak eklenen bir komut dosyası görünmüyor.

Açıklama:

Kullanmam gerek ve kullandım

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

böylece myScript.js bazı koşulları karşıladığında dinamik olarak yüklenebilir ... Ve myFunction yalnızca tüm komut dosyası yüklendikten sonra çağrılabilir ...

Ancak tarayıcılar, hata ayıklayıcılarının komut dosyası bölümünde dinamik olarak yüklenmiş myScript.js'yi göstermiyor.

Tarayıcının kendisinde dinamik olarak yüklenmiş bir komut dosyasının hatalarını ayıklayabilmesini sağlayacak tüm hedeflere ulaşılmasının başka bir yolu var mı?

— TwiToiT
kaynak

Olası yinelenen WebKit, FireBug veya IE8 Geliştirici Aracı gibi bazı hata ayıklayıcı tarafından ayıklama dinamik yükleme JavaScript mümkün mü?

— GorvGoyl

2

debugger;dinamik olarak yüklenen komut dosyasında otomatik durdurmak için kullanın , bkz. javascript.info/debugging-chrome

— yu yang Jian

208

Dinamik olarak yüklenen komut dosyanıza, Chrome / Firefox JavaScript hata ayıklayıcıda gösterilmesi için bir ad verebilirsiniz. Bunu yapmak için betiğin sonuna bir yorum koyarsınız:

//# sourceURL=filename.js

Bu dosya daha sonra "Kaynaklar" sekmesinde olarak gösterilecektir filename.js. Tecrübelerime göre \ 's adında kullanabilirsiniz, ancak /' s kullanırsanız garip davranışlar alıyorum.

Daha fazla bilgi için bkz: // @ sourceurl'nin Dinamik JavaScript'te kullanımdan kaldırılması için kesme noktaları

— işaret
kaynak

19

// @ hala Chrome'da çalışsa da // # olarak değiştirildiğini unutmayın. .Html dosyalarındaki komut dosyaları da aynı şekilde adlandırılabilir. Dikkatli ol! '=' İşaretinden önce ve sonra boşluk bırakmayın.

— Mert Mertce

11

Benim için js dosyası "(etki alanı yok)" adlı bir grup içindeki kaynaklar listesinde görüntüleniyordu. İlk başta kaçırdığım için bahsetmeye değer olabilir!

— JMac

7

Sadece bir ipucu. Chrome hata ayıklayıcı, bu sözde javascript dosyalarını, en azından localhost'ta hata ayıklarken Kaynaklar sekmesindeki "(alan yok)" düğüm öğesine atar. Onları bulduğum yer orası.

— Robert Oschler

1

Dikkatli olunması gereken bir diğer husus da yorum stili. Verdiğiniz "/ / @ sourceURL'nin kullanımdan kaldırılması" bağlantısından hem "// # sourceURL =" hem de "/ * # sourceURL =" bahseder. Bunun nedeni, tek satırlık "//" yorumlar geçerli olmadığından, blok açıklamalarını kullanmanız gereken CSS için de kullanılabilir. Beni şaşırtan şey, javascript'te "/ * sourceURL =" kullanamamanızdı. Sadece görmezden geliniyor.

— Jools

2

Afaik, çoğu JavaScript küçültme yazılımı bu satırları üretim aşamalarından kaldırarak üretim hatası teşhisi için işe yaramaz hale getirir.

— Lluís Suñol

16

Komut dosyanızın veya komut dosyası etiketinizin sonunda //# sourceURL=ve kullanabilirsiniz //# sourceMappingURL=.

NOT: //@ sourceURL ve //@ sourceMappingURLkullanımdan kaldırılmıştır.

— xRavisher
kaynak

Daha fazla kullanımdan

— kaldırma

Elbette, ancak afaik çoğu minifier bu hatları üretim aşamalarında kaldıracaktır.

— Lluís Suñol

13

OP tarafından geçici çözüm olarak önerilen "// # sourceURL = filename.js" yi kullanmayı denedim, ancak daha önceki bir zaman diliminde sekmelerimde zaten mevcut olmadığı sürece Kaynaklar panelinde bana hala görünmüyordu. bir istisna yarattı.

Bir "hata ayıklayıcı" kodlama; hattı onu o konumda kırmaya zorladı. Daha sonra Kaynaklar panelindeki sekmelerime girdikten sonra, normal gibi kesme noktaları ayarlayabilir ve "hata ayıklayıcıyı" kaldırabilirdim; hat.

— Kevinpo
kaynak

6

Kaynaklar sekmesi altındaki (alan yok) listesinde de görünebilir.

— Splaktar

1

Ayrıca kullanmam gerekiyordu debugger;ve komut dosyası yüklenirken DevTools'un açık olması gerekiyordu.

— Barmar

2

biraz ekstra bilgi: browsertools: // 'daki gibi protokol olarak kullanın //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js

— dolbysurnd

6

Kaynaklar sekmesinde bu şekilde görünen kaynak dosyanın (etki alanı yok) grubunda görüneceğine ve bu dosyada hata ayıklamak istemeniz durumunda debugger;, kodunuza bir satır eklemeniz ve bu satırı çalıştırmanız gerekeceğine dikkat edin (genellikle kaynak dosyanızın çalıştırılmasının başlangıcı) ve ardından kesme noktalarınızı istediğiniz yere ekleyin.

debugger;Kodunuzda muhtemelen hiç satır bulunmayan üretim aşamalarında hata ayıklama yapıyorsanız, CharlesProxy ile "hata ayıklayıcı satırı eklenmiş kaynak dosyanın yeni kopyasına" yerel bir eşleme yaparak bunu gerçekleştirebilirsiniz.

— Lluís Suñol
kaynak

2

Bu beni kurtardı! Ne yaparsam yapayım, bir hata ayıklayıcı komutu girene kadar dosya görünmedi. Bundan sonra, hata ayıklayıcı komutunu kaldırdıktan sonra bile sayfa yeniden yüklemelerinde ve hata ayıklama oturumlarında devam etti.

— Mike Devenney

0

IE'de bu tür şeyleri izlemeye çalışırken, dev araçlarını (F12) açıyorum ve ardından konsolda aşağıdaki satırı kullanarak kesme noktasını nereye yerleştireceğimi buluyorum:

debugger;myFunction();

Bu, girebileceğiniz myFunction()ve kesme noktasını ayarlayabileceğiniz hata ayıklayıcı sekmesine geçer .

— Alan Samet
kaynak