Jak mogę debugować mój kod JavaScript? [Zamknięte]

Kiedy stwierdzę, że mam problematyczny fragment kodu, jak mam go debugować?

Firebug to jedno z najpopularniejszych narzędzi do tego celu.

Wszystkie nowoczesne przeglądarki są dostarczane z jakąś formą wbudowanej aplikacji do debugowania JavaScript. Szczegóły w tym zakresie zostaną omówione na odpowiednich stronach internetowych poświęconych technologiom. Moje osobiste preferencje dotyczące debugowania JavaScript to Firebug w przeglądarce Firefox. Nie mówię, że Firebug jest lepszy niż jakikolwiek inny; zależy to od twoich osobistych preferencji i prawdopodobnie i tak powinieneś przetestować swoją witrynę we wszystkich przeglądarkach (moim osobistym pierwszym wyborem jest zawsze Firebug).

Poniżej omówię niektóre z wysokopoziomowych rozwiązań, na przykładzie Firebuga :

Firefox

Firefox ma własne wbudowane narzędzie do debugowania JavaScript, ale polecam zainstalowanie dodatku Firebug . Zapewnia to kilka dodatkowych funkcji opartych na wersji podstawowej, które są przydatne. Opowiem tutaj tylko o Firebug.

Po zainstalowaniu Firebuga możesz uzyskać do niego dostęp jak poniżej:

Po pierwsze, jeśli klikniesz prawym przyciskiem myszy dowolny element, możesz sprawdzić element za pomocą Firebuga :

Kliknięcie tego otworzy okienko Firebug u dołu przeglądarki:

Firebug zapewnia kilka funkcji, ale interesuje nas zakładka skryptów. Kliknięcie karty skryptu powoduje otwarcie tego okna:

Oczywiście, aby debugować, musisz kliknąć przeładuj :

Możesz teraz dodawać punkty przerwania , klikając linię po lewej stronie fragmentu kodu JavaScript, do którego chcesz dodać punkt przerwania:

Kiedy twój punkt przerwania zostanie trafiony, będzie wyglądał jak poniżej:

Możesz także dodać zmienne obserwacyjne i ogólnie robić wszystko, czego można oczekiwać od nowoczesnego narzędzia do debugowania.

Aby uzyskać więcej informacji na temat różnych opcji oferowanych w Firebug, sprawdź FAQ Firebuga .

Chrom

Chrome ma również wbudowaną opcję debugowania JavaScript, która działa w bardzo podobny sposób, kliknij prawym przyciskiem myszy, sprawdź element itp . Zajrzyj do Chrome Developer Tools . Generalnie uważam, że ślady stosu w Chrome są lepsze niż Firebug.

Internet Explorer

Jeśli programujesz w .NET i używasz Visual Studio przy użyciu środowiska programistycznego, możesz debugować kod JavaScript bezpośrednio, umieszczając punkty przerwania itp. Twój kod JavaScript wygląda dokładnie tak samo, jak w przypadku debugowania kodu C # lub VB.NET .

Jeśli tego nie masz, Internet Explorer udostępnia również wszystkie narzędzia pokazane powyżej. Irytujące jest to, że zamiast prawego przycisku myszy sprawdzać funkcje elementów Chrome lub Firefox, uzyskujesz dostęp do narzędzi programistycznych, naciskając klawisz F12 . To pytanie obejmuje większość punktów.

• Internet Explorer 8 (narzędzia programistyczne - F12). Wszystko inne jest drugorzędne w krainie Internet Explorera
• Firefox i Firebug . Hit, F12aby wyświetlić.
• Safari (Pokaż pasek menu, Preferencje -> Zaawansowane -> Pokaż pasek menu Develop )
• Konsola Google Chrome JavaScript ( F12lub ( Ctrl+ Shift+ J)). Przeważnie ta sama przeglądarka co Safari, ale Safari jest lepsze IMHO.
• Opera ( Narzędzia -> Zaawansowane -> Narzędzia programistyczne )

W JavaScript znajduje się słowo kluczowe debugera służące do debugowania kodu JavaScript. Umieść debugger; fragment kodu JavaScript. W tym momencie automatycznie rozpocznie debugowanie kodu JavaScript.

Na przykład:

Załóżmy, że to Twój plik test.js.

function func(){
    //Some stuff
    debugger;  //Debugging is automatically started from here
    //Some stuff
}
func();

• Gdy przeglądarka uruchamia stronę internetową w opcji programisty z włączonym debugerem, to automatycznie rozpoczyna debugowanie z debuggera; punkt.
• Należy otworzyć okno dewelopera przeglądarki.

Stosuję stare dobre printfpodejście (starożytną technikę, która sprawdzi się w każdej chwili).

Spójrz na magię %o:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

%ozrzuca ładnie wydrukowaną zawartość obiektu JS, którą można kliknąć i przeglądać głęboko . %szostał pokazany tylko dla rekordu.

I to:

console.log("%s", new Error().stack);

daje ci ślad stosu podobny do Java do punktu new Error()wywołania (w tym ścieżkę do pliku i numer linii !!).

Zarówno %oi new Error().stackdostępne w Chrome i Firefox.

Dzięki tak potężnym narzędziom zakładasz, co dzieje się nie tak w twoim JS, umieszczasz dane wyjściowe debugowania (nie zapomnij zawinąć ifinstrukcji, aby zmniejszyć ilość danych) i weryfikujesz swoje założenie. Napraw problem lub podejmij nowe założenie lub dodaj więcej wyników debugowania do problemu bitowego.

Również do śladów stosu użyj:

console.trace();

jak powiedziano Console

Miłego hakowania!

Zacznij od Firebug i IE Debugger.

Uważaj jednak na debuggery w JavaScript. Od czasu do czasu wpływają one na środowisko na tyle, aby powodować niektóre błędy, które próbujesz debugować.

Przykłady:

W przypadku przeglądarki Internet Explorer jest to generalnie stopniowe spowolnienie i jest to rodzaj umowy z wyciekiem pamięci. Po około pół godzinie muszę ponownie uruchomić. Wydaje się, że jest dość regularny.

W przypadku Firebuga minął prawdopodobnie ponad rok, więc mogła to być starsza wersja. W rezultacie nie pamiętam szczegółów, ale w zasadzie kod nie działał poprawnie i po dłuższej próbie debugowania wyłączyłem Firebuga i kod działał dobrze.

Chociaż alert(msg);działa w tych scenariuszach „Po prostu chcę się dowiedzieć, co się dzieje”… co programista napotkał taki przypadek, w którym kończysz w (bardzo dużej lub niekończącej się) pętli, z której nie możesz się wyrwać.

Zalecałbym, aby podczas programowania, jeśli chcesz mieć bardzo bezpośrednią opcję debugowania, użyj opcji debugowania, która pozwoli ci się wyrwać. (PS Opera, Safari? I Chrome? Wszystkie mają to dostępne w swoich natywnych oknach dialogowych)

//global flag
_debug = true;
function debug(msg){
  if(_debug){
    if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
      _debug = false;
    }
  }
}

Dzięki powyższym możesz dostać się do dużej pętli debugowania wyskakujących okienek, gdzie naciśnięcie Enter/ Okpozwala przeskoczyć przez każdą wiadomość, ale naciśnięcie Escape/ Cancelpozwala ładnie się wyrwać.

Używam menu / konsoli programisty WebKit (Safari 4). Jest prawie identyczny z Firebug.

console.log()jest nowy czarny - znacznie lepszy niż alert().

Moim pierwszym krokiem jest zawsze walidacja HTML i sprawdzenie składni za pomocą JSLint . Jeśli masz czyste znaczniki i prawidłowy kod JavaScript, to czas na Firebug lub inny debugger.

Visual Studio 2008 ma bardzo dobre narzędzia do debugowania JavaScript. Możesz upuścić punkt przerwania w kodzie JavaScript po stronie klienta i przejść przez niego, używając dokładnie tych samych narzędzi, co w kodzie po stronie serwera. Nie ma potrzeby podłączania się do procesu ani wykonywania jakichkolwiek skomplikowanych czynności, aby go włączyć.

Używam kilku narzędzi: Fiddler , Firebug i Visual Studio. Słyszałem, że Internet Explorer 8 ma dobry wbudowany debugger.

Ja używałem Firebug , aż do Internet Explorer 8 wyszedł. Nie jestem wielkim fanem Internet Explorera, ale po spędzeniu czasu z wbudowanymi narzędziami programistycznymi, które zawierają naprawdę fajny debugger, wydaje się bezcelowe używanie czegokolwiek innego. Muszę powiedzieć Microsoftowi, że wykonali fantastyczną robotę na tym narzędziu.

Możesz również sprawdzić YUI Logger . Wszystko, co musisz zrobić, aby go użyć, to umieścić kilka tagów w swoim kodzie HTML. Jest pomocnym dodatkiem do Firebuga, który jest mniej więcej koniecznością.

Odkryłem, że nowa wersja Internet Explorera 8 (naciśnij F12) jest bardzo dobra do debugowania kodu JavaScript.

Oczywiście Firebug jest dobry, jeśli używasz Firefoksa.

Oprócz używania debuggera JavaScript Visual Studio, napisałem własny prosty panel, który dołączam do strony. To po prostu jak bezpośrednie okno programu Visual Studio. Mogę zmieniać wartości moich zmiennych, wywoływać moje funkcje i wyświetlać wartości zmiennych. Po prostu ocenia kod zapisany w polu tekstowym.

Używam Venkman , debuggera JavaScript dla aplikacji XUL .

Oprócz Firebug i natywnych dla przeglądarki rozszerzeń programistycznych JetBrains WebStorm IDE jest wyposażony w obsługę zdalnego debugowania dla przeglądarek Firefox i Chrome (wymagane rozszerzenie).

Obsługuje również:

• coffescript: jak debugować coffeescript w node.js z mapami źródłowymi Webstorm 6
• node.js

Możliwości przetestowania tego za darmo to 30 lat próbnych lub użycie wersji z wczesnego dostępu .

Jeśli używasz programu Visual Studio , po prostu umieść debugger;nad kodem, który chcesz debugować. Podczas wykonywania sterowanie zatrzyma się w tym miejscu i od tego momentu można debugować krok po kroku.

Jak w przypadku większości odpowiedzi, to naprawdę zależy: co próbujesz osiągnąć za pomocą debugowania? Podstawowy programowanie, naprawianie problemów z wydajnością? W przypadku podstawowego rozwoju wszystkie poprzednie odpowiedzi są więcej niż wystarczające.

Szczególnie do testowania wydajności polecam Firebug. Możliwość określenia, które metody są najdroższe pod względem czasu, była nieoceniona w przypadku wielu projektów, nad którymi pracowałem. Ponieważ biblioteki po stronie klienta stają się coraz bardziej niezawodne, a generalnie po stronie klienta spoczywa większa odpowiedzialność, ten typ debugowania i profilowania stanie się tylko bardziej przydatny.

Interfejs API konsoli Firebug: http://getfirebug.com/console.html

Naciskając,F12 twórcy stron internetowych mogą szybko debugować kod JavaScript bez opuszczania przeglądarki. Jest wbudowany w każdą instalację systemu Windows.

W programie Internet Explorer 11 , narzędzia F12 zapewnia debugowania narzędzi, takich jak pułapki, oglądać i lokalnego przeglądania zmiennej i konsoli do wiadomości i natychmiastowe wykonanie kodu.