Zasoby dla programistów: wyświetlanie i ręczne wczytywanie map źródeł

Sofia Emelianova

W panelu Zasoby dla deweloperów sprawdź, czy Narzędzia deweloperskie poprawnie ładują mapy źródłowe. W razie potrzeby możesz wczytać je ręcznie.

Ważne: aby dowiedzieć się, jak mapy źródeł mogą ułatwić debugowanie, przeczytaj artykuł Debuguj oryginalny kod zamiast wdrażania za pomocą map źródłowych.

Omówienie

Gdy otworzysz Narzędzia deweloperskie, spróbuje wczytać mapy źródłowe, jeśli takie istnieją. W przypadku niepowodzenia Konsola rejestruje błąd podobny do tego poniżej.

W panelu Zasoby dla programistów możesz wyświetlić stan wczytywania mapy źródłowej, a nawet ręcznie wczytać takie mapy.

Otwórz Zasoby dla deweloperów i sprawdź stan

Aby sprawdzić stan wczytywania map źródłowych:

1. Otwórz Narzędzia deweloperskie, włącz mapy źródłowe i przejdź do more_vert> Więcej narzędzi > Materiały dla deweloperów.

2. Sprawdź wartości w tych kolumnach w tabeli:

   • Stan, aby sprawdzić, czy wczytanie mapy źródłowej zakończyło się sukcesem czy niepowodzeniem.
   • Error (Błąd), aby odczytać komunikat o błędzie (jeśli występuje).

Filtruj zasoby według adresu URL lub błędu

Aby wyświetlić mapy źródeł, które Cię interesują, wpisz tekst w polu tekstowym u góry, aby odfiltrować mapy źródeł, które nie zawierają tego tekstu w adresach URL lub komunikatach o błędach.

Rozwiązywanie problemów z wczytywaniem map źródłowych

Domyślnie Narzędzia deweloperskie żądają map źródeł, a nie witryny. Takie żądania mogą być traktowane jako żądania z innych domen i mogą nie zostać zrealizowane.

Aby najpierw ustawić mapy źródeł żądania witryny, w prawym górnym rogu zasobów dla deweloperów zaznacz Wczytywanie przez witrynę.

Jeśli nadal masz problemy z wczytywaniem map źródłowych, spróbuj wczytać je ręcznie w sposób opisany poniżej.

Ręczne wczytywanie mapy źródłowej

Jeśli napotkasz błędy wczytywania lub na przykład chcesz zdebugować oryginalny kod w witrynie w wersji produkcyjnej, która nie ma map źródłowych, możesz wczytać je ręcznie:

1. Generuj mapy źródeł za pomocą narzędzi, które je obsługują.
2. Przechowuj mapy źródłowe lokalnie.
3. Otwórz Narzędzia deweloperskie na swojej stronie i włącz mapy źródeł.

4. Otwórz wdrożony (przetworzony) plik w sekcji Źródła, kliknij go prawym przyciskiem myszy w Edytorze i wybierz z menu Dodaj mapę źródłową.

   

5. W polu tekstowym podaj adres URL mapy źródłowej i kliknij Dodaj.

   

6. Sprawdź, czy mapa źródłowa pojawiła się w zasobach dla programistów, a pierwotny plik (zmapowany z wdrożonego) w drzewie plików.

   

7. Przejdź do debugowania oryginalnego pliku.