Z tego przewodnika dowiesz się, jak przeglądać zasoby strony internetowej za pomocą Narzędzi deweloperskich w Chrome. Zasoby to pliki, których strona potrzebuje do prawidłowego wyświetlania. Mogą to być na przykład pliki CSS, JavaScript i HTML, a także obrazy.
W tym przewodniku zakładamy, że masz już podstawowe informacje o tworzeniu stron internetowych i Narzędziach deweloperskich w Chrome.
Otwórz zasoby
Jeśli znasz nazwę zasobu, który chcesz sprawdzić, możesz skorzystać z menu poleceń, aby szybko otworzyć ten zasób.
Naciśnij Control+P lub Command+P (Mac). Otworzy się okno Otwórz plik.
Rysunek 1. Okno Otwórz plik
Wybierz plik z menu lub zacznij wpisywać nazwę pliku i naciśnij Enter, gdy odpowiedni plik zostanie podświetlony w polu autouzupełniania.
Rysunek 2. Wpisanie nazwy pliku w oknie Otwórz plik.
Otwórz zasoby w panelu Sieć
Zobacz Sprawdzanie szczegółów zasobu.
Rysunek 3. sprawdzanie zasobu w panelu Sieć,
Pokaż zasoby w panelu Sieć w innych panelach
W sekcji Przeglądaj zasoby poniżej dowiesz się, jak przeglądać zasoby z różnych części interfejsu Narzędzi deweloperskich. Jeśli kiedykolwiek zechcesz sprawdzić zasób w panelu Sieć, kliknij go prawym przyciskiem myszy i wybierz Pokaż w panelu Sieć.
Rysunek 4. Opcja Pokaż w panelu Sieć
Przeglądaj zasoby
Przeglądanie zasobów w panelu Sieć
Zobacz Rejestrowanie aktywności w sieci.
Rysunek 5. Zasoby strony w dzienniku sieci
Przeglądaj według katalogu
Aby wyświetlić zasoby strony uporządkowane według katalogu:
- Kliknij kartę Źródła, aby otworzyć panel Źródła.
Kliknij kartę Strona, aby wyświetlić zasoby strony. Otworzy się panel Strona.
Rysunek 6. Okienko Strona
Oto zestawienie nieoczywistych elementów na Rys. 6:
- top to kontekst przeglądania głównego dokumentu.
- airhorner.com reprezentuje domenę. Wszystkie umieszczone w nim zasoby pochodzą z tej domeny.
Na przykład pełny adres URL pliku comlink.global.js to prawdopodobnie
https://airhorner.com/scripts/comlink.global.js. - Parametr scripts to katalog.
- (index) to główny dokument HTML.
- iu3 to kolejny kontekst przeglądania. Ten kontekst został prawdopodobnie utworzony przez element
<iframe>osadzony w głównym kodzie HTML dokumentu. - Plik sw.js to kontekst wykonywania skryptu service worker.
Kliknij zasób, aby wyświetlić go w Edytorze.
Rysunek 7. wyświetlenie pliku w Edytorze;
Przeglądaj według nazwy pliku
Panel Strona domyślnie grupuje zasoby według katalogu. Aby wyłączyć to grupowanie i wyświetlić zasoby poszczególnych domen w formie prostej listy:
- Otwórz panel Strona. Zobacz Przeglądaj według katalogu.
Kliknij Więcej opcji
i wyłącz Grupuj według folderu.
Rysunek 8. Opcja Grupuj według folderu
Zasoby są uporządkowane według typu pliku. W każdym typie pliku zasoby są uporządkowane alfabetycznie.
Rysunek 9. Okienko Strona po wyłączeniu opcji Grupuj według folderu.
Przeglądaj według typu pliku
Aby pogrupować zasoby według typu pliku:
Kliknij kartę Application (Aplikacja). Otworzy się panel Aplikacja. Domyślnie panel Plik manifestu otwiera się zwykle jako pierwszy.
Rysunek 10. w panelu Aplikacja.
Przewiń w dół do panelu Ramki.
Rysunek 11. Okienko Klatki
Rozwiń sekcje, które Cię interesują.
Kliknij zasób, aby go wyświetlić.
Rysunek 11. wyświetlanie zasobu w panelu Aplikacja.
Przeglądanie plików według typu w panelu Sieć
Zobacz Filtrowanie według typu zasobu.
Rysunek 12. Filtrowanie dziennika sieci pod kątem CSS