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

Sofia Emelianova
Sofia Emelianova

Aby sprawdzić, czy Narzędzia deweloperskie wczytują mapy źródeł, użyj panelu Zasoby dla programistów. W razie potrzeby możesz je załadować ręcznie.

Omówienie

Gdy otworzysz narzędzia deweloperskie, spróbują one załadować mapy źródeł, jeśli istnieją. W przypadku błędu Konsola rejestruje błąd podobny do tego.

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

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

Otwieranie Materiałów dla deweloperów i sprawdzanie stanu

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

  1. Otwórz Narzędzia dewelopera, włącz mapy źródeł i kliknij > Więcej narzędzi > Zasoby dla deweloperów.
  2. W tabeli sprawdź wartości w tych kolumnach:

    • Stan, aby sprawdzić, czy udało się załadować mapę źródłową.
    • Błąd – aby odczytać komunikat o błędzie (jeśli występuje).

kolumny „Stan” i „Błąd”.

Filtrowanie zasobów według adresu URL lub błędu

Aby skupić się na interesujących Cię mapach źródłowych, wpisz tekst w polu tekstowym u góry, aby odfiltrować mapy źródłowe, które nie zawierają tego tekstu w adresach URL ani w komunikatach o błędach.

Filtrowanie map źródeł, które nie zawierają w adresie URL ciągu „js”.

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

Domyślnie Narzędzia deweloperskie wysyła żądania do map źródeł, a nie do witryny. Takie żądania mogą być traktowane jako żądania z innego źródła i mogą nie zostać przetworzone.

Aby witryna wysyłała najpierw mapy źródłowe, w prawym górnym rogu Zasobów dla deweloperów zaznacz pole Pole wyboru. Wczytaj przez witrynę.

Pole wyboru „Wczytaj przez stronę”

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

Ręczne wczytywanie mapy źródłowej

Jeśli wystąpią błędy wczytywania lub chcesz na przykład przeprowadzić debugowanie oryginalnego kodu w witrynie w wersji produkcyjnej, która nie zawiera map źródłowych, możesz je wczytać ręcznie:

  1. Generuj mapy źródeł za pomocą narzędzi, które je obsługują.
  2. Mapy źródłowe hostuj lokalnie.
  3. Otwórz Narzędzia deweloperskie na stronie i włącz mapy źródeł.
  4. Otwórz w sekcji Źródła wdrożony (przetworzony) plik, kliknij go prawym przyciskiem w sekcji Edytor i w menu wybierz Dodaj mapę źródła.

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

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

    Określanie adresu URL mapy źródeł.

  6. Sprawdź, czy mapa źródeł pojawiła się w Zasobach dla deweloperów, a plik źródłowy (zmapowany z wdrożonego) – w drzewie plików.

    Ręcznie wczytana mapa źródeł powoduje, że oryginalny plik pojawia się w drzewie plików.

  7. Przejdź do debugowania oryginalnego pliku.