2012-02-01 7 views
51

Dynamicznie dodawany skrypt nie pojawia się w sekcji skryptów przeglądarki debuggera.Jak debugować dynamicznie załadowany JavaScript (z jQuery) w samym debugerze przeglądarki?

Objaśnienie:

muszę używać i wykorzystali

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

tak, że myScript.js może być dynamicznie ładowane od spełnienia pewnego warunku ... I myFunction można nazwać tylko po otrzymaniu cały skrypt załadowany ...

Jednak przeglądarki nie wyświetlają dynamicznie załadowanego pliku myScript.js w sekcji skryptu debuggera.

Czy jest na odwrót, aby osiągnąć wszystkie cele, które pozwolą na debugowanie dynamicznie ładowanego skryptu w samej przeglądarce?

+0

Możliwy duplikat [Czy możliwe jest debugowanie dynamicznego ładowania JavaScript przez niektóre debuggery takie jak WebKit, FireBug lub IE8 Developer Tool?] (Http://stackoverflow.com/questions/1705952/is-possible-to-debug-dynamic- loading-javascript-by-some-debugger-like-webkit-fi) – JerryGoyal

Odpowiedz

139

Możesz nadać dynamicznie załadowanemu skryptowi nazwę, która będzie wyświetlana w debugerze JavaScript Chrome/Firefox. W tym celu należy umieścić komentarz na końcu skryptu:

//# sourceURL=filename.js 

Ten plik pokaże się w „Źródła” kartę jako filename.js. Z mojego doświadczenia wynika, że ​​możesz używać \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

Aby uzyskać więcej informacji, patrz: Breakpoints in Dynamic JavaScript deprecation of //@sourceurl

+3

Ponieważ nie jest to zaznaczone jako poprawne, komentuję, aby potwierdzić, że to działa jak czar. –

+1

Nie jestem pewien, dlaczego ta opcja nie została oznaczona jako poprawna. AFIK, to najlepsze dostępne rozwiązanie. – kiprainey

+0

Szczerze przepraszam, że tak późno przeczytałem tę odpowiedź! – TwiToiT

7

Próbowałem przy użyciu „// # sourceURL = filename.js”, który został zaproponowany jako obejście przez PO, ale to nadal nie pokazywał się na ja w panelu Źródła, o ile nie istniał już na moich kartach od czasu, w którym wygenerował wyjątek.

Kodowanie "debuggera;" linia zmusiła go do zerwania w tym miejscu. Wtedy, gdy znajdowałem się w moich zakładkach w panelu Źródła, mogłem ustawić punkty przerwania jak normalne i usunąć "debugger;" linia.

+4

Może również pojawić się na liście (brak domeny) na karcie Źródła. – Splaktar

+0

Musiałem również użyć 'debuggera;', a DevTools musiał być otwarty podczas ładowania skryptu. – Barmar

0

Zauważ, że plik źródłowy pojawiające się w zakładce Źródła w ten sposób pojawi się w (bez domeny) grupowej, aw przypadku, gdy chcesz go debugowania, trzeba będzie dodać debugger; linię w kodzie, należy linia ta zostanie wykonana (zwykle na początku wykonywania pliku źródłowego), a następnie dodaj punkty przerwania, gdziekolwiek chcesz.

W przypadku debugowania etapów produkcji, w których prawdopodobnie nie będzie żadnych linii debugger; w kodzie, można to zrobić, wykonując lokalną mapę z CharlesProxy do "nowej kopii pliku źródłowego z włożoną linią debbugera ".

+0

To mnie uratowało! Bez względu na to, co zrobiłem, plik nie pojawił się, dopóki nie wprowadzę polecenia debuggera. Następnie utrzymywał się on podczas przeładowywania stron i debugowania sesji nawet po usunięciu polecenia debuggera. –

9

Możesz użyć //# sourceURL= i //# sourceMappingURL= na końcu pliku skryptu lub znacznika skryptu.

UWAGA://@ sourceURL i //@ sourceMappingURL są przestarzałe.

+0

Więcej informacji o odradzaniu: https://developers.google.com/web/updates/2013/06/sourceMappingURL-and-sourceURL-syntax-changed – Pysis

Powiązane problemy