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

Sofia Emelianova
Sofia Emelianova

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

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.

Błąd wczytania mapy źródłowej w konsoli.

Na karcie 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 kliknij Menu z 3 kropkami. > Więcej narzędzi > Zasoby 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).

Kolumny Stan i Błąd.

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.

Odfiltrowywanie map źródłowych niezawierających kodu „js” w adresach URL.

Rozwiązywanie problemów

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 strona w pierwszej kolejności prosiła o mapy źródłowe, w prawym górnym rogu zasobów dla deweloperów zaznacz Pole wyboru. Włącz wczytywanie przez element docelowy.

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ą.

    Wybierz z menu „Dodaj mapy źródłowe”.

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

    Podaję adres URL mapy źródłowej.

  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.

    Ręcznie wczytana mapa źródła powoduje, że pierwotny plik pojawia się w drzewie plików.

  7. Przejdź do debugowania oryginalnego pliku.