Debuguj pierwotny kod zamiast wdrażać go za pomocą map źródłowych

Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova

Zadbaj o czytelność i debugowanie kodu po stronie klienta nawet po połączeniu, zminifikowaniu lub skompilowaniu. . Użyj map źródłowych, aby zmapować swój kod źródłowy na skompilowany kod w panelu Źródła.

Pierwsze kroki z preprocesorami

Mapy źródeł z preprocesorów powodują, że Narzędzia deweloperskie ładują nie tylko zminimalizowane pliki, ale też oryginalne pliki.

Chrome uruchomi zminifikowany kod, ale w panelu Źródła zobaczysz kod, który został przez Ciebie utworzony. Możesz ustawiać punkty przerwania i przeprowadzać kroki w kodzie w plikach źródłowych, a wszystkie błędy, logi i punkty przerwania zostaną zmapowane automatycznie.

Kod będzie wyglądać na debugowany w chwili, gdy zostanie napisany, w odróżnieniu od kodu udostępnianego przez serwer programistyczny i wykonanego przez przeglądarkę.

Aby używać map źródeł w panelu Źródła:

  • Korzystaj tylko z preprocesorów, które mogą tworzyć mapy źródeł.
  • Sprawdź, czy Twój serwer WWW może wyświetlać mapy źródłowe.

Użyj obsługiwanego wstępnego procesora

Typowe wstępne procesory używane w połączeniu z mapami źródeł obejmują m.in.:

Dłuższą listę znajdziesz w artykule Mapy źródeł: języki, narzędzia i inne informacje.

Włącz mapy źródeł w Ustawieniach

W aplikacji Ustawienia. Ustawienia > Ustawienia > Źródła – sprawdź Pole wyboru. mapy źródłowe JavaScript.

Sprawdź, czy mapy źródłowe zostały wczytane

Zobacz Materiały dla programistów: ręczne wyświetlanie i ładowanie map źródłowych.

Debugowanie z użyciem map źródeł

Gdy mapy źródeł są gotowe i włączone, możesz:

  1. Otwórz źródła witryny w panelu Źródła.
  2. Aby skupić się tylko na samodzielnie utworzonym kodzie, pogrupuj utworzone i wdrożone pliki w drzewie plików. Następnie rozwiń sekcję Utworzono. Autor i otwórz oryginalny plik źródłowy w Edytorze.

    Oryginalny plik został otwarty w sekcji Utworzone.

  3. Ustaw punkt przerwania w zwykły sposób. Może to być na przykład punkt logowania. Następnie uruchom kod.

    Punkt logowania ustawiony w utworzonym pliku.

  4. Zauważ, że Edytor umieszcza link do wdrożonego pliku na pasku stanu u dołu. To samo dotyczy wdrożonych plików CSS.

    Link do wdrożonych plików CSS na pasku stanu.

  5. Otwórz panel Konsola. W tym przykładzie obok komunikatu dotyczącego punktu logowania konsola wyświetla link do oryginalnego pliku, a nie wdrożonego.

    Komunikat w konsoli z linkiem do oryginalnego pliku.

  6. Zmień typ punktu przerwania na zwykły i ponownie uruchom kod. Tym razem wykonanie zostanie wstrzymane.

    Wstrzymano wykonywanie w zwykłym punkcie przerwania.

    Zauważ, że w panelu Stos wywołań wyświetlana jest nazwa oryginalnego pliku, a nie wdrożonego.

  7. Na pasku stanu u dołu Edytora kliknij link do wdrożonego pliku. W panelu Źródła przejdziesz do odpowiedniego pliku.

Wdrożony plik z komentarzem sourceMappingURL.

Gdy otworzysz dowolny wdrożony plik, Narzędzia deweloperskie powiadomią Cię, jeśli znajdzie komentarz //# sourceMappingURL i powiązany z nim oryginalny plik.

Zauważ, że Edytor automatycznie dodał do wdrożonego pliku styl ładny. W rzeczywistości zawiera on cały kod w jednym wierszu, z wyjątkiem komentarza //# sourceMappingURL.

Nazwij połączenia (eval()) z: #sourceURL

Narzędzie #sourceURL ułatwia debugowanie w przypadku rozmów z eval(). Ten element pomocniczy jest bardzo podobny do właściwości //# sourceMappingURL. Więcej informacji znajdziesz w specyfikacji mapy źródłowej w wersji 3.

Komentarz //# sourceURL=/path/to/source.file informuje przeglądarkę, że gdy użyjesz polecenia eval(), ma poszukać pliku źródłowego. Ułatwia to nadawanie nazw ocenom oraz wbudowanym skryptom i stylom.

Przetestuj ją na tej stronie demonstracyjnej:

  1. Otwórz Narzędzia deweloperskie i przejdź do panelu Źródła.
  2. Na stronie wpisz dowolną nazwę pliku w polu Name your code: (Nazwij kod).
  3. Kliknij przycisk Kompiluj. Pojawi się alert z ocenioną sumą ze źródła CoffeeScript.
  4. W drzewie plików w panelu Strona otwórz nowy plik z wpisaną przez Ciebie niestandardową nazwą. Zawiera skompilowany kod JavaScript, który zawiera komentarz // #sourceURL z pierwotną nazwą pliku źródłowego.
  5. Aby otworzyć plik źródłowy, kliknij link na pasku stanu w Edytorze.

Komentarz sourceURL i link do pliku źródłowego na pasku stanu.