Jak korzystać z narzędzi programistycznych Chrome, aby ulepszyć swoją witrynę WordPress?

Narzędzia programistyczne Chrome (DevTools) to niesamowity zestaw narzędzi do tworzenia i debugowania stron internetowych dla przeglądarki Google Chrome. DevTools zapewnia dostęp do elementów budujących strony internetowe. Możesz użyć DevTools, aby rozwiązywać problemy z układem, przeglądać i modyfikować CSS, ustawiać punkty przerwania JavaScript, sprawdzać kod pod kątem optymalizacji i wiele więcej. DevTools są bezpłatne i już wbudowane w przeglądarkę Chrome. Więc jeśli masz Chrome, to już je masz.

W tym artykule dowiemy się, czym są narzędzia i jak z nich korzystać, aby ulepszyć swoją witrynę WordPress.

Otwieranie narzędzi

Istnieje kilka sposobów otwierania narzędzi:

1. Wybierz menu Chrome, wybierz Narzędzia, a następnie wybierz Narzędzia programisty.
2. Kliknij prawym przyciskiem myszy dowolny element na ekranie i wybierz opcję Sprawdź element (moja preferowana metoda).
3. Ctrl + Shift + I (na PC) | Cmd + Opt + I (dla komputerów Mac)

Okno DevTools

Okno narzędzi zawiera dwa panele. Oba zawierają narzędzia, których można używać razem. Oto spojrzenie na narzędzia.

Pierwsza zawiera 8 grup narzędzi. Narzędzia obejmują:

• Elementy
• Sieć
• Źródła
• Oś czasu
• Profile
• Zasoby
• Audyty
• Konsola

Druga sekcja zawiera:

• Style
• Obliczona
• Słuchacze zdarzeń
• Punkty przerwania DOM (Document Object Model)
• Nieruchomości

Istnieje kilka różnych sposobów wyświetlania narzędzi. Możesz zmienić rozmiar okien, aby zrobić miejsce. Możesz także przenieść okna po prawej stronie ekranu, aby uzyskać podzielony ekran z narzędziami po jednej stronie i witryną po drugiej.

Elementy

Ten panel pokazuje drzewo DOM, które reprezentuje elementy HTML Twojej strony i umożliwia przeglądanie lub edycję dowolnych elementów. Możesz zobaczyć korekty CSS w czasie rzeczywistym.

Możesz otwierać i zwijać dowolne panele, aby ułatwić przeglądanie i nawigację, klikając węzły (wyglądają jak strzałki lub trójkąty). Widok drzewa DOM pokazuje aktualny stan drzewa, a nie oryginalny HTML (na przykład mógł zostać zmodyfikowany przez JavaScript).

Gdy najedziesz myszą na element w widoku drzewa, element na stronie internetowej zostanie podświetlony. Pokaże Ci informacje, takie jak styl czcionki, rozmiar obrazu itp.

Jeśli klikniesz na jeden z elementów, okno po prawej pokaże CSS. Tutaj możesz wybrać style i dokonać modyfikacji czcionek, kolorów, rozmiarów, marginesów, obramowań, dopełnienia itp.

W stopce zobaczysz bułkę tartą, dzięki czemu możesz się cofnąć, jeśli zajdzie taka potrzeba. Możesz edytować dowolne elementy, klikając je i wpisując zmiany. Kiedy naciśniesz Enter, zobaczysz zmiany.

Na przykład ten obraz ma obecnie szerokość 600 pikseli. Mogę wybrać szerokość, wpisać nową wartość i nacisnąć Enter.

Obraz natychmiast zmieni się na nowy rozmiar.

Aby zmienić styl czcionki, po prostu wybierz czcionkę i wybierz, co chcesz zmienić w oknie stylów po prawej stronie.

Możesz nawet przeciągać elementy i upuszczać je w nowych lokalizacjach, aby zmienić układ strony.

Przenoszę ostatnie komentarze nad ostatnie posty, po prostu przeciągając div.

Kliknięcie prawym przyciskiem myszy daje nowy zestaw funkcji. Możesz zobaczyć różne stany elementów, zmodyfikować je jako HTML, ustawić przerwy, skopiować ścieżkę CSS i wiele więcej. Możesz także kliknąć prawym przyciskiem myszy i usunąć węzeł. To takie proste, że aż przerażające.

Używałem tego narzędzia do znajdowania rozmiarów obrazów i sprawdzania fragmentów kodu.

Sieć

Panel Sieć pokazuje, jakie zasoby z Twojej witryny są wymagane i pobierane. Jest przedstawiany na wykresie w czasie rzeczywistym. Sprawdzanie, które elementy trwają najdłużej do pobrania, daje wgląd w to, jakie problemy należy naprawić, aby zoptymalizować stronę.

Możesz filtrować i wyświetlać różne widoki i typy wykresów, takie jak wodospad. Możesz rejestrować aktywność sieciową i zapisywać ją, aby móc ją później przeanalizować.

Możesz wyświetlić szczegóły zasobów. Szczegóły obejmują:

• Nagłówki żądania i odpowiedzi HTTP — wyświetla adres URL żądania, metodę HTTP, kody stanu odpowiedzi oraz wyświetla nagłówki odpowiedzi i żądania HTTP wraz z ich wartościami oraz parametrami ciągu zapytania.
• Podgląd zasobów – pokazuje podgląd zasobów graficznych i JSON.
• Odpowiedź HTTP – pokazuje niesformatowaną zawartość zasobu.
• Nazwy i wartości plików cookie — pokazuje pliki cookie, które są przesyłane w nagłówkach żądań HTTP i odpowiedzi zasobu oraz usuwają pliki cookie.
• Wiadomości WebSocket – ta pokazuje wiadomości wysyłane lub odbierane przez połączenie WebSocket.
• Czas sieci zasobów — pokazuje wykres czasu poświęconego na fazy sieci, które są zaangażowane w ładowanie zasobu.

Widok kaskadowy to świetny sposób, aby zobaczyć, ile czasu zajmuje załadowanie każdego elementu od początku żądania do dostarczenia ostatniego bajtu elementu. Widząc, które elementy zajmują najwięcej czasu, możesz lepiej zrozumieć, gdzie wprowadzić poprawki.

Możesz zapisać dane sieciowe do przyszłej analizy.

Źródła

Możesz użyć panelu źródeł, aby zobaczyć i debugować swój kod, taki jak JavaScript i skrypty, które są częścią załadowanej strony. Możesz wstrzymywać, wznawiać, przeglądać kod i wstrzymywać się w wyjątkach. Zawiera podstawowe funkcje wykonywania kodu, dzięki czemu możesz przechodzić, wchodzić, wychodzić i przełączać punkty przerwania. Możesz użyć punktów przerwania do debugowania JavaScript, aktualizacji DOM i wywołań sieciowych. Możesz także ustawić warunkowe punkty przerwania, w których dowolne wyrażenie może zwrócić jako prawda lub fałsz. Punkt przerwania następnie wstrzyma kod, jeśli warunek zostanie spełniony.

Dostępna jest ładna funkcja drukowania, dzięki której zminimalizowany kod jest łatwy do odczytania. Ułatwia to również sprawdzenie, gdzie umieścić punkty przerwania. Jeśli to nie działa tak, jak tego potrzebujesz, możesz użyć formatu mapowania opartego na JSON, zwanego mapą źródłową. Mapy źródłowe są tworzone przez minifikator, który ma wbudowaną tę funkcję.

Oś czasu

Panel Oś czasu pokazuje, gdzie spędza się czas na wczytywanie i używanie strony. Będzie malować i kreślić każde wydarzenie na osi czasu. Pokaże zasoby, takie jak JavaScript, obliczanie stylów i przemalowywanie. Możesz nagrywać zdarzenia i analizować je krok po kroku. Dostępne są trzy tryby:

• Wydarzenia – lista wszystkich wydarzeń organizowanych według rodzaju. To pokazuje, które zadania zajmują najwięcej czasu.
• Klatki — pokazuje pracę, którą należy wykonać w każdej klatce wydajności renderowania Twojej witryny. Na przykład, jeśli Twoja witryna renderuje się z szybkością 60 klatek na sekundę, pokaże Ci pracę wykonaną w 1/60 sekundy. Obejmuje to ładowanie skryptów, malowanie układu, obsługę zdarzeń itp. Możesz użyć tego, aby wyświetlić wszelkie nietypowe działania podczas ładowania strony.
• Pamięć — przedstawia wykres wykorzystania pamięci w czasie. Pokazuje wszystkie dokumenty, węzły i detektory zdarzeń, które są przechowywane w pamięci. Pomaga to w ustaleniu, co powoduje wycieki pamięci.

Profile

Tutaj możesz profilować czas wykonania i wykorzystanie pamięci stron internetowych i aplikacji. To pokazuje, gdzie zasoby są używane. To dobre narzędzie do optymalizacji kodu.

Rejestruje trzy typy profili:

• Collect JavaScript CPU Profile – pokazuje czas wykonania twoich funkcji JavaScript.
• Take Heap Snapshot – pokazuje użycie pamięci i dystrybucję twoich obiektów JavaScript.
• Record Heap Allocations — rejestruje alokacje obiektów, aby pokazać wycieki pamięci w czasie.

Zasoby

Możesz użyć tego panelu do sprawdzenia zasobów. Pokaże Ci informacje o IndexedDB, internetowej bazie danych SQL, plikach cookie pamięci podręcznej aplikacji, pamięci lokalnej i sesyjnej oraz nie tylko. Możesz także sprawdzić swoje zasoby wizualne, takie jak czcionki, obrazy i arkusze stylów.

Karta IndexedDB umożliwia przeglądanie baz danych IndexedDB i składnic obiektów oraz przeglądanie i usuwanie rekordów.

Możesz uruchamiać polecenia SQL i wyświetlać wyniki w formacie tabelarycznym. Podczas wpisywania poleceń otrzymasz wskazówki dotyczące nazw tabel, poleceń i klauzul.

Zakładka plików cookie zawiera informacje o plikach cookie, które zostały utworzone przez HTTP lub JavaScript. Możesz je usunąć pojedynczo lub grupowo.

Chrome buforuje zasoby aplikacji. Karta pamięci podręcznej aplikacji umożliwia przeglądanie stanu tych zasobów. Wyświetli również adres URL zasobu, typ zasobu i jego rozmiar.

Lokalne i sesyjne Panel przechowywania umożliwia przeglądanie, tworzenie, usuwanie i edytowanie par klucz/wartość pamięci lokalnej i sesji, które zostały utworzone za pomocą interfejsu API przechowywania.

Audyty

Panel audytu analizuje stronę w trakcie jej wczytywania i sugeruje poprawki w celu optymalizacji ładowania strony. Posiada dwa audyty, które dzielą informacje na dwie kategorie: wykorzystanie sieci i wydajność strony internetowej. Możesz przeprowadzić oba audyty lub tylko ten, który chcesz. Możesz uruchomić audyty w obecnym stanie strony lub ponownie załadować stronę i przeprowadzić audyt po załadowaniu.

Nie zawiera tak wielu szczegółów, jak Google PageSpeed ​​Insights, ale daje wystarczającą ilość informacji, aby naprawić nisko wiszący owoc. Po przejściu przez PageSpeed ​​Insights moja strona była w przyzwoitym stanie, ale zawierała pewne informacje o mojej witrynie, których nie zawierały Insights.

Konsola

Konsola służy do debugowania. Możesz rejestrować diagnostykę, wprowadzać polecenia, oceniać JavaScript, tworzyć profile JavaScript itp. Możesz zapisywać informacje do konsoli za pomocą wiersza poleceń. Korzystając z wiersza poleceń, możesz używać funkcji do wybierania i sprawdzania elementów w DOM, monitorowania zdarzeń oraz zatrzymywania i uruchamiania profilera.

Tryb urządzenia

Jedną z moich ulubionych funkcji jest tryb urządzenia. Możesz uzyskać do tego dostęp za pomocą małego przycisku po lewej stronie Elementów w menu. Tryb urządzenia pozwala wybrać spośród 23 różnych popularnych urządzeń mobilnych (Kindle Fire, kilka iPhone'ów, kilka Galaxies, laptopy itp.) i zobaczyć, jak wygląda i reaguje Twoja witryna na tym urządzeniu.

Możesz także przeciągnąć ekran, aby utworzyć własny niestandardowy rozmiar ekranu. Kursor naśladuje Twój palec, więc ekran reaguje z myszą tak samo, jak z Twoim palcem. Możesz także tworzyć własne niestandardowe urządzenia na ekranie ustawień.

Możesz także wybrać typ sieci (3G, 4G, Wi-Fi itp.), aby przeanalizować wygląd i reakcje witryny w różnych sieciach i prędkościach.

Szuflada

Na dole ekranu znajdziesz szufladę. Można to włączyć lub wyłączyć za pomocą przycisku >_ po prawej stronie paska narzędzi. Szuflada zawiera:

• Konsola – wiersz poleceń konsoli. Dzięki temu konsola jest dostępna podczas korzystania z innych paneli.
• Szukaj – znajdź dowolne źródło. Możesz zignorować wielkość liter i wyszukać wyrażenia regularne.
• Emulacja – narzędzia i ustawienia trybu urządzenia. Zawiera takie funkcje, jak akcelerometr i współrzędne geolokalizacji.
• Rendering – pokazuje funkcje renderowania, takie jak licznik klatek na sekundę, złożone, warstwowe granice itp. Najlepsze w tym jest to, że pokaże potencjalne wąskie gardła.

Warto mieć te narzędzia w szufladzie, ponieważ niektóre panele nie zapewniają dostępu do tych narzędzi.

Końcowe przemyślenia

Narzędzia dla programistów Chrome (DevTools) to niesamowity zestaw narzędzi do tworzenia i debugowania stron internetowych, które pomogą Ci ulepszyć witrynę. Możesz szybko przeciągać i upuszczać elementy, aby zmienić układ witryny, rozwiązywać problemy z wyciekami pamięci, rozwiązywać problemy z ładowaniem stron, wyświetlać witrynę na praktycznie dowolnym urządzeniu mobilnym i na dowolnym rozmiarze ekranu oraz wiele więcej. Ten przegląd tylko zarysowuje powierzchnię tego, jak potężne są te narzędzia. Najlepsze w tym jest to, że jest już wbudowany w Google Chrome, więc nie musisz niczego pobierać.

Chciałbym usłyszeć od ciebie. Czy korzystasz z Narzędzi dla programistów Chrome? Jakie są twoje ulubione funkcje? Czego najczęściej używasz? Czy masz jakieś wskazówki dotyczące korzystania z narzędzi? Opowiedz nam o tym w komentarzach.