Czy możliwe jest debugowanie dynamicznego ładowania JavaScript przez jakiś debugger, taki jak WebKit, FireBug lub IE8 Developer Tool?


90

Z mojego ostatniego pytania , stworzyłem już funkcję JavaScript do dynamicznego ładowania częściowego widoku. Nie mogę więc debugować żadnego dynamicznego ładowania JavaScript. Ponieważ cały załadowany JavaScript zostanie oceniony przez funkcję „eval”.

Jednak znalazłem sposób na utworzenie nowego JavaScript, używając następującego skryptu do dynamicznego tworzenia skryptu w nagłówku bieżącego dokumentu. Wszystkie załadowane skrypty zostaną wyświetlone w HTML DOM (możesz go znaleźć za pomocą dowolnego debuggera).

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

Nawiasem mówiąc, większość debugerów (IE8 Developer Toolbar, Firebug i Google Chrome) nie może ustawić punktu przerwania w żadnym skrypcie dynamicznym. Ponieważ skrypt możliwy do debugowania musi zostać załadowany po raz pierwszy po załadowaniu strony.

Czy masz pomysł na debugowanie w dynamicznej zawartości skryptu lub pliku?

Aktualizacja 1 - Dodaj kod źródłowy do testowania

Możesz użyć następującego pliku xhtml do próby debugowania wartości someVariable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

Z odpowiedzi, po prostu testuję to w FireBug. Wynik powinien być wyświetlany jak na poniższych obrazkach.

tekst alternatywny http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTqug.qug

Proszę spojrzeć na skrypt „dynamicLoadingScript”, który jest dodawany po załadowaniu strony.

tekst alternatywny http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yChqmyk41Wcugbug3p

Ale nie można go znaleźć na karcie skryptów w FireBug

Aktualizacja 2 - Utwórz punkt przerwania debugowania w skrypcie dynamicznego ładowania

tekst alternatywny http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAVETo4Qo4Qo

tekst alternatywny http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVUXCbH-bHGugger.png

Oba powyższe obrazy pokazują wstawianie „debuggera”; instrukcja w jakiejś linii skryptu może wywołać punkt przerwania w skrypcie dynamicznego ładowania. Jednak oba debugery nie wyświetlają żadnego kodu w punkcie przerwania. Dlatego jest to bezużyteczne.

Dzięki,


Czy znalazłeś rozwiązanie tego problemu? Jestem tutaj z tym samym problemem.
adamJLev

Spróbuj załadować oddzielny plik dynamicznie, np. Zobacz tutaj implementację queryj.com/2011/03/11/a-lightweight-script-loader - uważam, że debuggery radzą sobie z tym dużo łatwiej.
James Westgate

@infinity, sprawdź moje rozwiązanie
Molecular Man

3
2014, a twoje obrazy wciąż są martwe - czy możesz je odtworzyć?
TheGeekZn

Mam podobne pytanie, ale nie mogę powiedzieć, ponieważ obrazy są zepsute. Czy możesz je zaktualizować?
Eric

Odpowiedzi:


118

Byłoby również możliwe użycie chromu do tego samego. Chrome ma funkcję, w której możesz określić atrybut parsera i sprawić, by fragment dynamicznego JS pojawiał się jako plik, który można następnie przeglądać i ustawiać punkty przerwania.

atrybut, który należy ustawić, to

//# sourceURL=dynamicScript.js

gdzie dynamicScript.js to nazwa pliku, który powinien pojawić się w przeglądarce plików skryptów.

Więcej informacji tutaj

Paul Irish również omawia to pokrótce w swoim doskonałym wykładzie na temat narzędzi i stosu rozwoju aplikacji internetowych


5
W przypadku, gdy ktoś ma problemy z MVC3 / Razor, pamiętaj, aby uciec przed symbolem @, więc coś takiego jak // @@ sourceURL = dynamicscript.js I po prostu fyi, powyższe działa również w firebug.
parsh

1
Możesz użyć tej funkcji również dla dynamicznych wbudowanych skryptów JavaScript. Ale jeśli masz jakiś wyjątek w tym skrypcie, nie zobaczysz go na liście źródeł.
Roman Snitko,

4
Zauważ, że nowa składnia to „// # sourceURL = dynamicScript.js”, zmiana z @ na #
Cekk,

3
zaktualizowany link do sekcji narzędzi programistycznych Chrome na mapach źródeł to - developer.chrome.com/devtools/docs/ ...
chrismarx

3
U mnie plik js był wyświetlany na liście źródeł w grupie o nazwie „(brak domeny)”. Warto o tym wspomnieć, ponieważ na początku to przegapiłem!
JMac

21

Spróbuj dodać „debugger”; w javascript, który dodajesz dynamicznie. Powinno to spowodować zatrzymanie go w tym wierszu niezależnie od ustawień punktu przerwania.


Wszystko, co mogę znaleźć, to: code.google.com/p/fbug/issues/detail?id=1259 . Nawiasem mówiąc, używam tagu script dołączanego do głowy, aby dynamicznie ładować skrypty (ale używając atrybutu src), a dodany w ten sposób kod można debugować we wszystkich przeglądarkach, nawet jeśli nie jest ładowany razem ze stroną początkową.
Joeri Sebrechts

Jaki jest dokładny kod, którego używasz do dodania tagu skryptu? Mam ten sam problem co OP, który uniemożliwia debugowanie dynamicznie ładowanych plików JS w Chrome. Dzięki!
adamJLev

var loaderNode = document.createElement ("skrypt"); loaderNode.setAttribute ("typ", "tekst / javascript"); loaderNode.setAttribute ("src", url); document.getElementsByTagName ("head") [0] .appendChild (loaderNode);
Joeri Sebrechts,

18

Tak, (teraz) można debugować dynamicznie ładowany JavaScript przy użyciu przeglądarki Google Chrome!

Nie ma potrzeby dodawania dodatkowego debugger;lub innego atrybutu do dynamicznie ładowanego pliku JS. Po prostu wykonaj poniższe czynności, aby debugować:

Metoda 1:

Mój kierownik techniczny właśnie pokazał super łatwy sposób debugowania dynamicznie ładowanych metod Javascript.

  1. Otwórz konsolę chrome i wpisz nazwę metody i naciśnij enter.
    W moim przypadku jest tak, GetAdvancedSearchConditonRowNew
    jeśli metoda JS została załadowana, to pokaże definicję metody.

wprowadź opis obrazu tutaj


  1. Kliknij definicję metody, a cały plik JS zostanie otwarty do debugowania :)

wprowadź opis obrazu tutaj


Metoda 2:

Na przykład ładuję plik JS, gdy klikam przycisk za pomocą ajaxwywołania.

  1. Otwórz networkkartę w narzędziach programistycznych Google Chrome
  2. Kliknij kontrolkę (np. Przycisk), która ładuje jakiś plik javascript i wywołuje jakąś funkcję javascript.
  3. obserwuj zakładkę sieci i poszukaj tej funkcji JS (w moim przypadku jest RetrieveAllTags?_=1451974716935)
  4. Najedź na niego, initiatera znajdziesz dynamicznie ładowany plik JS (z prefiksem VM*).

debuguj dynamiczne ładowanie JavaScript w chrome -1


  1. Kliknij ten VM*plik, aby go otworzyć.
  2. Umieść debugger gdziekolwiek chcesz w tym pliku: D

debuguj dynamiczne ładowanie JavaScript w chrome -1



Wstyd na Google, że robi to tak tępo. 1 / Wstyd = Uznanie (odwrotność wstydu) dla ciebie za wyciągnięcie go :)
toddmo

16

W tym celu używam Google Chrome.

W chrome na karcie skryptów możesz włączyć „pauzę we wszystkich wyjątkach”

wprowadź opis obrazu tutaj

A następnie umieść gdzieś w linii kodu try{throw ''} catch(e){}. Chrome zatrzyma wykonywanie, gdy osiągnie tę linię.

EDYCJA: zmodyfikowany obraz, aby było jaśniejsze, o czym mówię.


W przypadku programowania w Google Chrome należy wstawić tekst wskazujący nazwę bieżącego skryptu dynamicznego, gdy jQuery lub jakikolwiek inny skrypt ładujący dołącza skrypt do DOM, tak jak zgłosiłem do zespołu jQuery. Ale nie mam czasu, żeby nad tym pracować. bugs.jquery.com/ticket/8292
Soul_Master

@Soul_Master, ale używając mojej metody nie musisz wstawiać tekstu. Wstawiasz do dynamicznej linii skryptu, try{throw ''} catch(e){}a następnie włączasz tryb „wstrzymaj przy wszystkich wyjątkach”, a chrome zatrzyma wykonywanie po rzuceniu wyjątku. Wielokrotnie to sprawdzałem. Załadowałem inny obraz. Jest tam wyraźniej, o czym mówię.
Molecular Man,

W chrome możesz użyć instrukcji „debugger;”, aby przerwać instrukcję, gdy panel debuggera jest otwarty. Chrome po prostu zignoruje to, jeśli panel debugera zostanie zamknięty.
dinesh ygv

@dineshygv, możesz ... teraz. Ale nie mogłeś 3 lata temu. debuggernie działałby wtedy w dynamicznie tworzonym skrypcie.
Molecular Man

10

Myślę, że być może trzeba będzie nadać kodowi eval'd tak „nazwę”:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

Jeśli tak, myślę, że debuggerpodejście z „aktualizacji 2” powinno wtedy działać.


Tak. Widzę to. Już od dłuższego czasu zgłaszałem ten błąd do zespołu jQuery. bugs.jquery.com/ticket/8292
Soul_Master

1
Ostrzeżenie! opisana technika powoduje błąd w IE7, więc nie zostawiaj //@ sourceURL=blahw produkcji.
Jethro Larson,

prawdopodobnie to debuggerczęść powoduje problemy, a nie komentarz źródła (który z pewnością jest ignorowany przez JS)
Kyle Simpson

Może to powodować problemy np. Przy kompilacji warunkowej. np .: javascriptkit.com/javatutors/conditionalcompile.shtml
Jethro Larson

5

UPDATE : zmieniono składnię sourceUrl (@ zastąpiono #), aby uniknąć błędów w nieobsługiwanych przeglądarkach (czytaj: IE). Detale


2

Korzystanie z przeglądarki Chrome (12.0.742.112) z podanym kodem i taką instrukcją debugera

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

pracuje dla mnie.

Muszę zmodyfikować niektóre JavaScript (ograniczając zakres wszystkich selektorów jQuery do bieżącego częściowego> widoku div) przed wykonaniem go.

Może to być bardziej namacalne, jeśli powiążesz zmianę selektora ze zdarzeniem w widoku częściowym, zamiast tworzyć elementy skryptu w treści HTML (nie wydaje się to właściwe).

Mógłbyś zrobić coś takiego

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

Ten kod zawsze dodawałby selektor ograniczający do wszystkich operacji wyboru jQuery wykonywanych, gdy mysz jest w określonym elemencie, biorąc pod uwagę, że HTML nie jest zepsuty.

(Wciąż wydaje się hackerski, może ktoś ma lepsze rozwiązanie)

Twoje zdrowie


1

W Firebug powinieneś być w stanie zobaczyć ten skrypt po załadowaniu strony i wstrzyknięciu skryptu. Gdy to zrobisz, możesz ustawić punkt przerwania w odpowiednim miejscu, który zostanie zachowany po odświeżeniu strony.


Masz rację. To nie działa. Wypróbowałem to z eval (), a Firebug pozwoli ci ustawić punkt przerwania, gdy tego użyjesz. Czy jest powód, dla którego nie możesz używać funkcji eval () i musisz ustawić tag skryptu? Jeszcze bardziej ogólnie, czy istnieje powód, dla którego nie możesz udostępniać tego dynamicznego kodu JavaScript jako oddzielnego pliku .js na swoim serwerze? Jaki problem próbujesz rozwiązać?
Moishe Lettvin

Muszę zmodyfikować niektóre JavaScript (ograniczając zakres wszystkich selektorów jQuery do bieżącego elementu div widoku częściowego) przed jego wykonaniem. Albo masz jakiś pomysł na rozwiązanie mojego ostatniego pytania. Aby uzyskać więcej informacji, spójrz na moje ostatnie pytanie.
Soul_Master

1

Dynamicznie załadowany Javascript nadal musi być analizowany przez przeglądarkę, tutaj znajduje się WebKit lub debugger FireBug, więc podlega debugerowi bez względu na wszystko, myślę, że to samo dotyczy narzędzi programistycznych w IE8,

Więc twój kod podlega debugerowi, więc problem nie będzie w tym pliku ani tekście, jeśli nie wystąpi błąd

Inna rzecz jest script.text = "alert('Test!');";nieprawidłowa, więc nie będzie działać we wszystkich przeglądarkach, tak jak chceszscript.innerHTML = "alert('Test!');";

mimo że jego internalHTML oznacza kod wewnątrz tagów HTML, a nie HTML wewnątrz, tylko większość ludzi używa go do tego, więc jest to źle wyjaśnione

EDYTOWANO DO AKTUALIZACJI DRUGIEJ

A przy drugiej aktualizacji za pomocą Chrome zrobiłem to

przejdź do about: blank Otwórz konsolę w górę i wróć

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

wtedy się zepsuje i otworzy zakładkę skryptu z wyświetlonym about: blank (nic nie widać)

Następnie po prawej stronie pokaż listę stosów połączeń, a następnie kliknij drugą (funkcja anonimowa), a ona ci pokaże.

Więc w swoim pliku będziesz mieć (anonimową funkcję), czyli kod, który uruchamiasz, i zobaczysz tam punkt przerwania. więc wiesz, że jesteś we właściwym.


0

Korzystając z Google Chrome (lub Safari ) Developers Tool, możesz uruchamiać JavaScript wiersz po wierszu. Skrypty

narzędzi deweloperskich Wybierz skrypt, który chcesz debugować, wstrzymaj znak po prawej stronie Lub ustaw punkty przerwania, klikając numer wiersza>>>


0

Jedna opcja, którą lubię używać, dodając instrukcję console.log ('') w moim kodzie. Gdy ta instrukcja pojawi się w konsoli, zostanie z nią skojarzony numer wiersza. Możesz kliknąć tę liczbę, aby przejść do lokalizacji w źródle i ustawić punkt przerwania. Wadą tego podejścia jest to, że punkty przerwania nie są zachowywane podczas ponownego ładowania strony i musisz przejść przez kod przed dodaniem debugera.


0

W przypadku aktualnej przeglądarki Google Chrome lub innych nowoczesnych przeglądarek można łatwo wyszukać dowolny sprawdzony kod za pomocą narzędzia programisty, takiego jak poniższe obrazy.

  1. Symuluj jakiś plik dynamicznego ładowania.

wprowadź opis obrazu tutaj

  1. Naciśnij Ctrl + Shift + F na karcie źródła i wyszukaj powyższą funkcję.

wprowadź opis obrazu tutaj

Utwórz punkt przerwania i wykonaj funkcję, aby go przetestować.

wprowadź opis obrazu tutaj

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.