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.
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:
- Otwórz Narzędzia dewelopera, włącz mapy źródeł i kliknij > Więcej narzędzi > Zasoby dla deweloperów.
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).
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.
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 Wczytaj przez witrynę.
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:
- Generuj mapy źródeł za pomocą narzędzi, które je obsługują.
- Mapy źródłowe hostuj lokalnie.
- Otwórz Narzędzia deweloperskie na stronie i włącz mapy źródeł.
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.
W polu tekstowym podaj adres URL mapy źródłowej i kliknij Dodaj.
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.
Przejdź do debugowania oryginalnego pliku.