Z tego przewodnika dowiesz się, jak wyświetlać zasoby strony internetowej za pomocą Narzędzi deweloperskich w Chrome. Zasoby to pliki, których strona potrzebuje do poprawnego wyświetlania. Mogą to być na przykład pliki CSS, JavaScript i HTML, a także obrazy.
W tym przewodniku zakładamy, że znasz podstawy tworzenia stron internetowych i Narzędzi deweloperskich w Chrome.
Otwórz zasoby
Jeśli znasz nazwę zasobu, który chcesz sprawdzić, możesz skorzystać z menu poleceń, aby szybko go otworzyć.
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ć jego nazwę i naciśnij Enter, gdy w polu autouzupełniania zostanie podświetlony odpowiedni plik.
Rysunek 2. Wpisz nazwę pliku w oknie Otwórz plik.
Otwórz zasoby w panelu Sieć
Zobacz Sprawdzanie szczegółów zasobu.
Rysunek 3. sprawdzanie zasobu w panelu Sieć,
Pokazuj zasoby w panelu Network (Sieć) z innych paneli
Sekcja Przeglądanie zasobów poniżej pokazuje, jak wyświetlać zasoby z różnych części interfejsu Narzędzi deweloperskich. Jeśli chcesz 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 logu 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. Panel Strona
Oto zestawienie nieoczywistych elementów na Rys. 6:
- Pole top to główny kontekst przeglądania dokumentu.
- airhorner.com oznacza domenę. Wszystkie zasoby zagnieżdżone w tej domenie pochodzą z tej domeny.
Na przykład pełny adres URL pliku comlink.global.js to prawdopodobnie
https://airhorner.com/scripts/comlink.global.js. - Element scripts to katalog.
- (indeks) to główny dokument HTML.
- Inny kontekst przeglądania to iu3. Ten kontekst został prawdopodobnie utworzony przez element
<iframe>umieszczony w głównym kodzie HTML dokumentu. - Skrypt sw.js zawiera kontekst wykonywania skryptu service worker.
Kliknij zasób, aby wyświetlić go w Edytorze.
Rysunek 7. wyświetlanie pliku w Edytorze.
Przeglądaj według nazwy pliku
Domyślnie panel Strona grupuje zasoby według katalogu. Aby wyłączyć to grupowanie i wyświetlić zasoby poszczególnych domen w postaci płaskiej listy:
- Otwórz panel Strona. Zobacz Przeglądanie 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. Zasoby w każdym typie pliku są uporządkowane alfabetycznie.
Rysunek 9. Okienko Strona po wyłączeniu opcji Grupuj według folderu
Przeglądaj według typu plików
Aby zgrupować zasoby na podstawie typu pliku:
Kliknij kartę Aplikacja. Otworzy się panel Aplikacja. Domyślnie panel pliku manifestu zwykle otwiera się jako pierwszy.
Rysunek 10. panel Aplikacja.
Przewiń w dół do panelu Klatki.
Rysunek 11. Okienko Klatki
Rozwiń interesujące Cię sekcje.
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 pod kątem CSS w dzienniku sieci