Zadbaj o to, aby kod po stronie klienta był czytelny i możliwy do debugowania nawet po połączeniu, zminifikowaniu lub skompilowaniu. Za pomocą map źródłowych możesz zmapować kod źródłowy na kod skompilowany w panelu Źródła.
Pierwsze kroki z procesorami wstępnymi
Mapy źródeł z preprocesorów powodują, że Narzędzia deweloperskie wczytują oryginalne pliki (oprócz zminifikowanych).
Chrome w rzeczywistości uruchomi zminifikowany kod, ale w panelu Źródła będzie widoczny kod, którego jesteś autorem. Możesz ustawiać punkty przerwania i przeanalizować kod w plikach źródłowych. Wszystkie błędy, logi i punkty przerwania zostaną automatycznie zmapowane.
Dzięki temu debugujesz kod w takiej postaci, w jakiej został napisany, a nie ten, który jest udostępniany przez serwer programistyczny i wykonywany 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 udostępniać mapy źródeł.
Użyj obsługiwanego procesora wstępnego
Procesory najczęściej używane w połączeniu z mapami źródeł to między innymi:
- Transpilatory: Babel
- Kompilatory: TypeScript i Dart
- Minifikatory: terser
- Pakiety i serwery programistyczne: Webpack, Vite, esbuild i Parcel.
Szczegółową listę znajdziesz w artykule Mapy źródłowe: języki, narzędzia i inne informacje.
Włącz mapy źródeł w Ustawieniach
W sekcji 
Ustawienia > Preferencje > Źródła zaznacz 
Włącz mapy źródeł JavaScript.
Sprawdź, czy mapy źródłowe zostały wczytane
Zobacz Zasoby dla programistów: Ręczne wyświetlanie i wczytywanie map źródeł.
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 utworzonym przez siebie kodzie, pogrupuj utworzone i wdrożone pliki w drzewie plików. Następnie rozwiń sekcję
Utworzone i otwórz pierwotny 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.
Zwróć uwagę, że Edytor umieszcza link do wdrożonego pliku na pasku stanu u dołu. To samo dzieje się w przypadku wdrożonych plików CSS.
Otwórz panel Konsola. W tym przykładzie obok komunikatu punktu logowania konsola wyświetla link do oryginalnego pliku, a nie do wdrożonego pliku.
Zmień typ punktu przerwania na zwykły i uruchom kod ponownie. Wykonanie zostanie tym razem wstrzymane.
Zwróć uwagę, że w panelu Stos wywołań wyświetla się nazwa oryginalnego pliku, a nie wdrożonego pliku.
Na pasku stanu u dołu edytora kliknij link do wdrożonego pliku. W panelu Źródła znajdziesz odpowiedni plik.
Gdy otworzysz dowolny wdrożony plik, Narzędzia deweloperskie powiadomią Cię, czy znalazł komentarz //# sourceMappingURL i powiązany z nim oryginalny plik.
Zwróć uwagę, że Edytor automatycznie wydrukował wdrożony plik. W rzeczywistości cały kod znajduje się w jednym wierszu, z wyjątkiem komentarza //# sourceMappingURL.
Nazwij połączenia w aplikacji eval(), używając: #sourceURL
#sourceURL upraszcza debugowanie w przypadku wywołań eval(). Ta aplikacja pomocnicza jest bardzo podobna do właściwości //# sourceMappingURL. Więcej informacji znajdziesz w specyfikacji mapy źródłowej V3.
Komentarz //# sourceURL=/path/to/source.file informuje przeglądarkę, że ma szukać pliku źródłowego, gdy używasz eval(). Pomoże Ci to nazywać oceny oraz wbudowane skrypty i style.
Przetestuj to na tej stronie demonstracyjnej:
- Otwórz Narzędzia deweloperskie i przejdź do panelu Źródła.
- W polu Nazwij kod na stronie wpisz dowolną nazwę pliku.
- Kliknij przycisk Kompilacja. Pojawi się alert z ocenioną sumą ze źródła CoffeeScript.
- W drzewie plików w panelu Strona otwórz nowy plik o podanej przez Ciebie niestandardowej nazwie. Zawiera skompilowany kod JavaScript z komentarzem
// #sourceURLz oryginalną nazwą pliku źródłowego. - Aby otworzyć plik źródłowy, kliknij link na pasku stanu w Edytorze.
