Zadbaj o czytelność i możliwość debugowania 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.:
- Transpilatory: Babel
- Kompilatory: TypeScript i Dart
- Minifilary: terser
- Pakiety i serwery programistyczne: Webpack, Vite, esbuild i Parcel
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 
Ustawienia > Preferencje > Źródła zaznacz 
Włącz 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:
- Otwórz źródła witryny w panelu Źródła.
Aby skupić się tylko na samodzielnie utworzonym kodzie, pogrupuj utworzone i wdrożone pliki w drzewie plików. Następnie rozwiń sekcję
Autor i otwórz oryginalny plik źródłowy w Edytorze.
Ustaw punkt przerwania w zwykły sposób. Może to być na przykład punkt logowania. Następnie uruchom kod.
Zauważ, że Edytor umieszcza link do wdrożonego pliku na pasku stanu u dołu. To samo dotyczy wdrożonych plików CSS.
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.
Zmień typ punktu przerwania na zwykły i ponownie uruchom kod. Tym razem wykonanie zostanie wstrzymane.
Zauważ, że w panelu Stos wywołań wyświetlana jest nazwa oryginalnego pliku, a nie wdrożonego.
Na pasku stanu u dołu Edytora kliknij link do wdrożonego pliku. W panelu Źródła przejdziesz do odpowiedniego pliku.
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
Interfejs #sourceURL ułatwia debugowanie podczas obsługi wywołań funkcji 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:
- Otwórz Narzędzia deweloperskie i przejdź do panelu Źródła.
- Na stronie wpisz dowolną nazwę pliku w polu Name your code: (Nazwij kod).
- Kliknij przycisk Kompiluj. Pojawi się alert z ocenioną sumą ze źródła CoffeeScript.
- 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
// #sourceURLz pierwotną nazwą pliku źródłowego. - Aby otworzyć plik źródłowy, kliknij link na pasku stanu w Edytorze.
