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

Sofia Emelianowa
Sofia Emelianova

Na karcie Zasoby dla programistów możesz sprawdzić, czy Narzędzia deweloperskie prawidłowo wczytują mapy źródeł. W razie potrzeby możesz wczytać je ręcznie.

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

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

Na karcie panelu Zasoby dla programistów możesz wyświetlać stan wczytywania mapy źródeł, a nawet ręcznie wczytywać mapy źródeł.

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

Aby sprawdzić stan wczytywania map źródeł:

  1. Otwórz Narzędzia deweloperskie, włącz mapy źródłowe i kliknij Menu z 3 kropkami. > Więcej narzędzi > Zasoby dla programistów.
  2. W tabeli sprawdź wartości w tych kolumnach:

    • Stan, aby sprawdzić, czy udało się wczytać mapę źródłową.
    • 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 skupić się na mapach źródeł, które Cię interesują, wpisz tekst w polu tekstowym u góry, aby odfiltrować mapy źródłowe, które nie zawierają tego tekstu w adresach URL lub komunikatach o błędach.

Odfiltrowywanie map źródłowych, które nie zawierają tagu „js” w adresie URL.

Rozwiązywanie problemów

Domyślnie Narzędzia deweloperskie żądają map źródłowych, a nie stron internetowych. Takie żądania mogą być traktowane jako transmisje z innych domen i mogą nie zostać dostarczone.

Aby najpierw mapy źródeł żądań witryny były tworzone, w prawym górnym rogu w sekcji Zasoby dla deweloperów zaznacz pole Pole wyboru. Włącz ładowanie przez element docelowy.

Jeśli nadal masz problemy z wczytywaniem map źródeł, spróbuj wczytać je ręcznie zgodnie z opisem poniżej.

Ręczne wczytywanie mapy źródeł

Jeśli napotkasz błędy wczytywania lub chcesz np. zdebugować pierwotny kod w witrynie w wersji produkcyjnej, w której nie ma map źródłowych, możesz wczytać je ręcznie:

  1. Generowanie map źródeł przy użyciu narzędzi, które je obsługują.
  2. Hostuj mapy źródeł lokalnie.
  3. Na stronie Otwórz Narzędzia deweloperskie i włącz mapy źródłowe.
  4. Otwórz wdrożony (przetworzony) plik w sekcji Źródła, kliknij go prawym przyciskiem myszy w Edytorze i w menu wybierz Dodaj mapę źródłową.

    Z menu wybierz „Dodaj mapy źródłowe”.

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

    Określam adres URL mapy źródłowej.

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

    W przypadku wczytanej ręcznie mapy źródłowej w drzewie plików pojawi się oryginalny plik.

  7. Przejdź do debugowania pierwotnego pliku.