Debugowanie dynamicznie dodawane pliki javascript

Question

Mam aplikację internetową, która dynamicznie dodaje pliki javascript na podstawie tego, co użytkownik wybiera jako opcje przy użyciu ajax w czasie rzeczywistym, aby uniknąć odświeżania ekranu.

Próbuję teraz debugować te dynamicznie dodane pliki javascript i wypróbowałem zarówno narzędzia programistyczne przeglądarki Google Chrome, jak i wtyczkę Firebug dla przeglądarki Firefox, i zauważyłem, że nie są wyświetlane dynamicznie dodawane "pliki" javascript, więc nie mogę wybrać je dodać punkty przerwania itp.

Czy istnieje na to rozwiązanie, tj. debugowanie dynamicznie dodanych plików javascript?

Answer 1

Możesz dodać instrukcję debugger; do skryptów dynamicznych, w której chcesz ustawić punkt przerwania. Spowoduje to, że chrome zatrzyma się na nim jak normalny punkt przerwania, jeśli wątek wykonania osiągnie instrukcję, gdy otworzy się interfejs narzędzi programistycznych.

Możesz również uruchomić skrypt, aby Twój skrypt pojawił się w debugerze, a następnie możesz ręcznie ustawić punkt przerwania tam, gdzie chcesz.

Answer 2

Zapoznaj się z sourceURL, który jest sposobem wskazania narzędzia DevTools, które powinny traktować ciągi eval'd jako prawdziwe pliki. Robi dokładnie to, czego szukasz.

Na końcu łańcucha być evaled, zostaw komentarz tej formy:

//# sourceURL=app/js/myapp.js 

Stamtąd Chrome DevTools (i Firebug) potraktuje to jako „prawdziwego pliku”.

Much more explanation here i HTML5 Rocks ma an article i sourceURL demo.