Debugowanie i testowanie kodu JavaScript

Pisanie kodu to jedno, ale jego debugowanie i testowanie to zupełnie inna historia. Aby tworzyć niezawodne aplikacje webowe, niezbędne jest zrozumienie narzędzi, które oferuje nam JavaScript debugger. W tym artykule omówimy narzędzia do debugowania i testowania kodu JavaScript, takie jak DevTools w przeglądarkach, Mocha i Jest. Dowiesz się również, jak korzystać z “piaskownic” (JavaScript playground, JavaScript sandbox) do testowania kodu oraz jak debugować złożone aplikacje webowe. # javascript tester, javascript playground, javascript sandbox

JavaScript – co to jest i jak zacząć naukę?

Dlaczego debugowanie jest ważne?

Nawet najbardziej doświadczeni programiści napotykają błędy w swoim kodzie. Umiejętność efektywnego debugowania kodu JavaScript pozwala na szybkie zlokalizowanie i naprawienie problemów, co przekłada się na wyższą jakość aplikacji i lepsze doświadczenie użytkownika.

Narzędzia do debugowania w przeglądarkach

Większość nowoczesnych przeglądarek oferuje wbudowane narzędzia deweloperskie (Developer Tools), które są niezwykle pomocne w procesie debugowania.

Chrome DevTools

Chrome Developer Tools to potężne narzędzie dostępne w przeglądarce Google Chrome.

• Debugowanie z użyciem breakpointów: Możesz ustawiać punkty przerwania (breakpoints) w kodzie, aby zatrzymać jego wykonywanie i analizować wartości zmiennych.

  function dodaj(a, b) {
    let suma = a + b;
    return suma;
  }
  dodaj(2, 3);

  W panelu Sources możesz kliknąć numer linii, aby ustawić breakpoint.

• Konsola: Używaj console.log() do wyświetlania wartości w konsoli.

  console.log("Wartość zmiennej:", zmienna);

• Debugowanie z użyciem instrukcji debugger:

  function sprawdzWiek(wiek) {
    debugger;
    if (wiek >= 18) {
      return "Dorosły";
    } else {
      return "Niepełnoletni";
    }
  }

  Instrukcja debugger zatrzymuje wykonywanie kodu i otwiera okno debuggera w przeglądarce.

Firefox Developer Tools

Przeglądarka Firefox oferuje Firefox Developer Tools, które również umożliwiają debugowanie kodu z użyciem breakpointów, inspektora DOM i konsoli.

Safari Developer Tools

Dla użytkowników macOS, Safari Developer Tools oferują podobne funkcje, w tym debugowanie z użyciem konsoli, inspektora i narzędzi do analizy wydajności.

Edge Developer Tools

Przeglądarka Microsoft Edge zawiera Edge Developer Tools, które są zbliżone funkcjonalnością do narzędzi dostępnych w Chrome.

Debugowanie z użyciem konsoli

Konsola jest jednym z najprostszych narzędzi do debugowania.

• console.log(): Wyświetla informacje w konsoli.

  console.log("To jest test.");

• console.table(): Wyświetla dane w formie tabeli.

  const dane = [
    { imie: "Jan", wiek: 30 },
    { imie: "Anna", wiek: 25 },
  ];
  console.table(dane);

• console.dir(): Wyświetla interaktywną listę właściwości obiektu.

  const obiekt = { a: 1, b: { c: 2 } };
  console.dir(obiekt);

• console.time() i console.timeEnd(): Pozwalają mierzyć czas wykonania kodu.

  console.time("CzasPetli");
  for (let i = 0; i < 1000; i++) {
    // jakiś kod
  }
  console.timeEnd("CzasPetli");

• console.group() i console.groupEnd(): Grupują wyjście konsoli.

  console.group("Grupa1");
  console.log("Wiadomość w grupie");
  console.groupEnd();

Debugowanie z użyciem breakpointów

Breakpoints pozwalają zatrzymać wykonywanie skryptu w określonym miejscu, co umożliwia analizę stanu aplikacji.

Ustawianie breakpointów

• W przeglądarce: Otwórz Developer Tools, przejdź do panelu Sources, znajdź plik z kodem i kliknij numer linii, aby ustawić breakpoint.

Typy breakpointów

• Conditional Breakpoints: Breakpointy warunkowe zatrzymują kod tylko wtedy, gdy spełniony jest określony warunek.

  Przykład: Zatrzymaj wykonanie, gdy zmienna i jest większa niż 10.

• XHR Breakpoints: Zatrzymują kod, gdy wykonywane jest żądanie XHR (Ajax).

Debugowanie z użyciem instrukcji debugger

Instrukcja debugger wstawiona w kodzie działa jak breakpoint.

Przykład:

function policz() {
  debugger;
  // Kod do debugowania
}

Po uruchomieniu kodu przeglądarka zatrzyma się w tym miejscu, otwierając okno debuggera.

Narzędzia do testowania kodu JavaScript

Mocha i Jest

• Mocha: Elastyczne środowisko testowe dla JavaScript umożliwiające asynchroniczne testowanie. Pozwala na używanie różnych bibliotek asercji, takich jak Chai.

  const assert = require('assert');
  describe('Test funkcji dodaj', function() {
    it('powinno zwrócić sumę dwóch liczb', function() {
      assert.equal(dodaj(2, 3), 5);
    });
  });

• Jest: Kompleksowe rozwiązanie do testowania kodu JavaScript, szczególnie popularne w środowisku React.

  test('dodaj 1 + 2 to równe 3', () => {
    expect(dodaj(1, 2)).toBe(3);
  });

JavaScript Playground i Sandbox

JavaScript playground i JavaScript sandbox to narzędzia online pozwalające na testowanie i eksperymentowanie z kodem w przeglądarce.

Popularne platformy:

• CodePen: Umożliwia tworzenie i udostępnianie fragmentów kodu HTML, CSS i JavaScript.

• JSFiddle: Pozwala na testowanie kodu z możliwością dodawania zewnętrznych bibliotek.

• Repl.it: Oferuje środowisko do kodowania w wielu językach, w tym JavaScript.

Debugowanie złożonych aplikacji webowych

W przypadku złożonych aplikacji konieczne jest korzystanie z zaawansowanych narzędzi.

Debugowanie z użyciem map źródłowych (source maps)

Jeśli kod jest transpilowany (np. z TypeScript lub Babel), mapy źródłowe pozwalają na debugowanie oryginalnego kodu.

Debugowanie w Visual Studio Code

Visual Studio Code oferuje wbudowane narzędzia do debugowania JavaScript i TypeScript.

• Konfiguracja debugowania: Możesz skonfigurować plik launch.json, aby uruchamiać i debugować aplikacje.

• Debugowanie z użyciem breakpointów: Ustawiaj breakpointy bezpośrednio w edytorze.

Debugowanie w różnych przeglądarkach

Każda przeglądarka ma swoje specyficzne narzędzia:

• Opera Developer Tools: Podobne do Chrome DevTools, ponieważ Opera opiera się na silniku Chromium.

• Debugowanie w przeglądarce Edge: Nowa wersja Edge oparta na Chromium korzysta z tych samych narzędzi co Chrome.

Dodatkowe wskazówki i triki

1. Debugowanie z użyciem wartości

• Monitoruj wartości zmiennych w czasie rzeczywistym.

2. Debugowanie funkcji

• Śledź wywołania funkcji i ich stos (call stack).

3. Debugowanie procesu

• Analizuj przepływ programu, aby zrozumieć, gdzie może wystąpić błąd.

Podsumowanie

Efektywne debugowanie kodu JavaScript jest kluczowe dla każdego programisty. Wykorzystanie narzędzi takich jak JavaScript debugger w przeglądarkach, frameworków testowych jak Mocha i Jest oraz platform typu JavaScript playground pozwala na szybsze wykrywanie i naprawianie błędów. Pamiętaj, że praktyka czyni mistrza, więc nie bój się eksperymentować i korzystać z dostępnych narzędzi.

Zapraszamy do dalszego zgłębiania wiedzy i doskonalenia umiejętności programistycznych. Pamiętaj, że opanowanie sztuki debugowania to jeden z kroków do stania się lepszym deweloperem. # javascript tester, javascript playground, javascript sandbox

Mateusz Wojdalski

Specjalista SEO i content marketingu w Devstock. Zajmuję się strategią treści, automatyzacją procesów marketingowych i wdrożeniami AI w codziennej pracy. Badam nowe narzędzia, adaptuję je do realnych zadań i piszę o tym, co faktycznie działa.