Jak korzystać z narzędzia Inspect Element w Chrome: Kompletny przewodnik dla programistów

Narzędzie Inspect Element w Google Chrome to interfejs przeglądarkowy do Chrome DevTools — zestaw narzędzi do debugowania, profilowania i edycji na żywo, wbudowanych bezpośrednio w przeglądarkę. Umożliwia odczytywanie i modyfikowanie struktury HTML strony, reguł CSS oraz wykonywania JavaScript w czasie rzeczywistym, bez dotykania serwera ani plików źródłowych.

Dla programistów webowych, inżynierów front-end i testerów QA narzędzie to jest najszybszą drogą od „coś wygląda na zepsute” do „wiem dokładnie dlaczego”. Ten przewodnik omawia każdy główny panel, praktyczne przepływy pracy oraz mniej oczywiste techniki, które odróżniają zwykłych użytkowników od zaawansowanych.

Czym jest Chrome DevTools i gdzie mieści się Inspect Element?

Chrome DevTools to zbiór narzędzi deweloperskich wbudowanych w każdą przeglądarkę opartą na Chromium. Panel Elements — to, co większość ludzi ma na myśli mówiąc „Inspect Element” — to tylko jeden z około tuzina wyspecjalizowanych paneli. Razem obejmują inspekcję DOM, debugowanie JavaScript, profilowanie sieci, wykresy płomieniowe wydajności, migawki sterty pamięci oraz audyt dostępności.

Zrozumienie, że Inspect Element jest punktem wejścia do znacznie większego zestawu narzędzi, zmienia sposób jego używania. Błąd układu może zacząć się w panelu Elements, wymagać sprawdzenia nadpisania CSS w zakładce Computed i zakończyć się analizą wodospadu sieciowego w panelu Network — wszystko bez opuszczania przeglądarki.

Jak otworzyć narzędzie Inspect Element w Chrome

Chrome oferuje cztery różne metody. Każda jest zoptymalizowana pod inny przepływ pracy.

Metoda 1: Menu kontekstowe prawego przycisku myszy (najdokładniejsza)

Kliknij prawym przyciskiem myszy bezpośrednio na konkretny element, który chcesz zbadać. Wybierz Inspect z menu kontekstowego. Chrome otwiera DevTools z aktywnym panelem Elements, a dokładnie ten węzeł DOM jest już zaznaczony i przewinięty do widoku. To najszybszy sposób na przejście bezpośrednio do konkretnego elementu bez ręcznego przeszukiwania drzewa HTML.

Metoda 2: Skróty klawiszowe (najszybsza dla zaawansowanych użytkowników)

Różnica ma znaczenie: Ctrl+Shift+I otwiera DevTools w stanie, w jakim ostatnio go zostawiłeś. Ctrl+Shift+C natychmiast aktywuje selektor elementów, pozwalając kliknąć dowolny element na stronie, aby przejść bezpośrednio do jego węzła DOM.

Metoda 3: Menu aplikacji Chrome

Przejdź do menu z trzema kropkami w prawym górnym rogu, a następnie wybierz Więcej narzędzi > Narzędzia dla deweloperów. To najmniej wydajna metoda, ale przydatna, gdy skróty klawiszowe są przemapowane przez inną aplikację.

Metoda 4: Pasek adresu (rzadko używana)

Wpisz about:blank w pasku adresu, otwórz DevTools, a następnie przejdź do docelowego URL. Pozwala to przechwycić żądania sieciowe od pierwszego bajtu, w tym żądania wysyłane przed zakończeniem ładowania strony — przydatne do debugowania łańcuchów przekierowań lub wczesnych żądań zasobów, które znikają, jeśli otworzysz DevTools po załadowaniu strony.

Architektura paneli DevTools

Po otwarciu DevTools widoczny jest interfejs z zakładkami. Każda zakładka to samodzielne narzędzie. Oto funkcjonalny opis:

Praca w panelu Elements

Nawigacja po drzewie DOM

Panel Elements renderuje live DOM — nie surowe źródło HTML. To kluczowe rozróżnienie. Frameworki JavaScript takie jak React, Vue czy Angular często mutują DOM po parsowaniu początkowego HTML. To, co widzisz w panelu Elements, odzwierciedla bieżący stan modelu obiektowego dokumentu, który może znacznie różnić się od tego, co pokazuje view-source:.

Używaj klawiszy strzałek do rozwijania i zwijania węzłów. Przytrzymaj Alt (Windows/Linux) lub Option (macOS) klikając trójkąt rozwijania, aby rozwinąć całe poddrzewo naraz — nieocenione przy pracy z głęboko zagnieżdżonymi drzewami komponentów.

Edycja HTML w czasie rzeczywistym

Kliknij dwukrotnie dowolny węzeł tekstowy, wartość atrybutu lub nazwę tagu, aby edytować go w miejscu. Naciśnij Enter, aby zatwierdzić. Aby edytować pełny zewnętrzny HTML węzła, kliknij go prawym przyciskiem myszy i wybierz Edit as HTML. Otwiera to wieloliniowy edytor, w którym możesz wkleić całe fragmenty HTML.

Praktyczny przykład — testowanie zmiany nagłówka:

<!-- Original -->
<h1 class="hero-title">Welcome to My Site</h1>

<!-- Edited inline to test copy -->
<h1 class="hero-title">Start Your Free Trial Today</h1>

Zmiany są izolowane do sesji przeglądarki. Odświeżenie strony odrzuca wszystkie modyfikacje. Dzięki temu panel Elements jest bezpieczny do eksperymentowania — nie możesz przypadkowo zepsuć strony produkcyjnej, edytując tutaj.

Edycja CSS w panelu Styles

Panel Styles (prawa strona panelu Elements) pokazuje każdą regułę CSS mającą zastosowanie do wybranego elementu, uporządkowaną według specyficzności. Reguły, które zostały nadpisane, są wyświetlane z przekreśleniem.

Aby zmodyfikować właściwość, kliknij jej wartość i wpisz nową. Aby dodać nową deklarację, kliknij wewnątrz dowolnego bloku reguły po ostatniej właściwości. Aby dodać zupełnie nową regułę, kliknij ikonę + na pasku narzędzi panelu Styles — Chrome tworzy nową regułę ograniczoną do selektora elementu.

Przykład — testowanie nadpisania koloru tła:

/* Typed directly into the Styles pane */
background-color: #1a1a2e;
color: #eaeaea;

Podzakładka Computed pokazuje ostateczną rozwiązaną wartość każdej właściwości CSS po zastosowaniu kaskady. Gdy styl nie zachowuje się zgodnie z oczekiwaniami, zakładka Computed dokładnie mówi, która reguła wygrała i skąd pochodzi.

Przełączanie i wymuszanie stanów

Każda deklaracja CSS ma pole wyboru. Odznaczenie go wyłącza tę właściwość bez jej usuwania, pozwalając natychmiast przetestować wizualny efekt usunięcia reguły.

W przypadku stanów interaktywnych użyj przycisku :hov na pasku narzędzi panelu Styles, aby wymusić pseudoklasy: :hover, :focus, :active, :visited. Jest to niezbędne do debugowania stylów, które pojawiają się tylko podczas interakcji z myszą, a które w innym przypadku są niemożliwe do zbadania, ponieważ przesunięcie myszy do DevTools usuwa stan hover.

Wizualizator modelu pudełkowego

Poniżej panelu Styles sekcja Layout pokazuje wizualny diagram modelu pudełkowego z edytowalnymi na żywo wartościami dla margin, border, padding i wymiarów zawartości. Kliknij dowolną wartość na diagramie, aby edytować ją bezpośrednio. Jest to szybsze niż szukanie odpowiedniej reguły CSS, gdy trzeba dostosować odstępy.

Kopiowanie HTML i CSS

Kliknij prawym przyciskiem myszy dowolny węzeł DOM, aby uzyskać dostęp do rozbudowanego podmenu kopiowania:

• Copy element — kopiuje pełny zewnętrzny HTML
• Copy selector — generuje ścieżkę selektora CSS do tego elementu
• Copy JS path — generuje wyrażenie document.querySelector(...), które możesz wkleić bezpośrednio do konsoli
• Copy XPath / Copy full XPath — do użytku z frameworkami testowymi takimi jak Selenium lub Playwright

Praca w panelu Console

Console to pełnoprawny REPL JavaScript z bezpośrednim dostępem do kontekstu okna strony. Każda zmienna, funkcja i węzeł DOM na stronie są tutaj dostępne.

Praktyczne polecenia konsoli

Zapytania i manipulacja elementami DOM:

// Select an element and log it
const hero = document.querySelector('.hero-title');
console.log(hero.textContent);

// Modify a style property
document.body.style.backgroundColor = '#0d0d0d';

// Count all images on the page
document.querySelectorAll('img').length;

Inspekcja cookies i pamięci:

// Read all cookies
document.cookie;

// Read a localStorage value
localStorage.getItem('user_preferences');

Skrót $_ odnosi się do wartości ostatniego ocenionego wyrażenia. $0 odnosi się do aktualnie wybranego węzła DOM w panelu Elements — potężny most między dwoma panelami.

// After selecting a node in Elements panel:
$0.classList.toggle('hidden');

Filtrowanie konsoli i poziomy logów

Użyj paska filtrów, aby wyświetlać tylko wiadomości Errors, Warnings, Info lub Verbose. W dużych aplikacjach konsola wypełnia się szumem. Filtrowanie tylko do Errors to najszybszy sposób na zidentyfikowanie, co faktycznie jest zepsute podczas ładowania strony.

Symulowanie urządzeń mobilnych za pomocą paska narzędzi urządzeń

Kliknij ikonę Toggle Device Toolbar (Ctrl+Shift+M / Cmd+Shift+M), aby wejść w tryb responsywnego projektowania. Robi to więcej niż tylko zmianę rozmiaru okna widoku.

Co faktycznie zmienia emulator urządzeń:

• Wymiary okna widoku i współczynnik pikseli urządzenia (window.devicePixelRatio)
• Ciąg user-agent (raportowany do serwera i dostępny przez JavaScript)
• Typ zdarzenia dotykowego (zdarzenia myszy są zastępowane zdarzeniami dotykowymi)
• Ustawienie ograniczenia przepustowości sieci (opcjonalne, ale konfigurowalne)

Wybierz urządzenie z listy rozwijanej, aby zastosować jego dokładne specyfikacje. Do niestandardowych testów użyj trybu Responsive i przeciągaj uchwyty okna widoku lub wpisz dokładne wymiary w pikselach w polach szerokości/wysokości.

Mało oczywista pułapka: Emulator urządzeń nie emuluje wydajności CPU. Strona, która wydaje się działać płynnie w emulowanym trybie mobilnym, może nadal działać słabo na prawdziwym urządzeniu z niższej półki. Użyj panelu Performance z włączonym ograniczeniem CPU (spowolnienie 4x lub 6x), aby uzyskać bardziej realistyczną ocenę.

Debugowanie JavaScript w panelu Sources

Panel Sources to w pełni funkcjonalny debugger. Wyświetla wszystkie pliki JavaScript załadowane przez stronę, w tym pliki spakowane i zminifikowane.

Ustawianie punktów przerwania

Kliknij dowolny numer linii w panelu Sources, aby ustawić punkt przerwania. Gdy wykonanie dotrze do tej linii, przeglądarka zatrzymuje się i możesz sprawdzić bieżący zakres, stos wywołań i wszystkie wartości zmiennych.

Typy punktów przerwania wykraczające poza poziom linii:

• Warunkowe punkty przerwania — kliknij prawym przyciskiem myszy numer linii i wprowadź wyrażenie; wykonanie zatrzymuje się tylko wtedy, gdy wyrażenie jest prawdziwe
• Punkty przerwania mutacji DOM — kliknij prawym przyciskiem myszy węzeł DOM w panelu Elements i wybierz Break on, aby zatrzymać się, gdy zmieni się poddrzewo, atrybuty lub usunięcie tego węzła
• Punkty przerwania XHR/Fetch — wstrzymaj wykonanie, gdy URL żądania sieciowego pasuje do wzorca
• Punkty przerwania nasłuchiwania zdarzeń — zatrzymaj się na dowolnym kliknięciu, naciśnięciu klawisza lub innym zdarzeniu DOM

Mapy źródeł

Nowoczesny JavaScript jest zazwyczaj transpilowany i pakowany. Mapy źródeł mapują zminifikowany kod produkcyjny z powrotem do oryginalnych plików źródłowych. Gdy mapy źródeł są poprawnie skonfigurowane, panel Sources pokazuje oryginalne moduły TypeScript lub ES6 zamiast nieczytelnych pakietów. Jeśli widzisz bundle.min.js bez czytelnej struktury, mapy źródeł albo brakuje, albo nie są serwowane.

Analiza sieci za pomocą panelu Network

Otwórz panel Network przed załadowaniem lub odświeżeniem strony. DevTools rejestruje tylko żądania, które wystąpią, gdy panel jest otwarty.

Odczytywanie wodospadu

Każdy wiersz w panelu Network reprezentuje jedno żądanie HTTP. Kolumna wodospadu pokazuje czas podzielony na fazy:

• Queueing / Stalled — przeglądarka czeka na wysłanie żądania (limity połączeń, priorytetyzacja)
• DNS Lookup — czas rozwiązania nazwy hosta
• Initial Connection / SSL — uzgadnianie TCP i negocjacja TLS
• Time to First Byte (TTFB) — czas przetwarzania po stronie serwera
• Content Download — czas odbierania treści odpowiedzi

Długi TTFB wskazuje na problem po stronie serwera — wolne zapytania do bazy danych, niezoptymalizowany kod backendu lub niewystarczające zasoby serwera. Jeśli zarządzasz własną infrastrukturą, tutaj należy korelować z metrykami po stronie serwera. Przejście na odpowiednio wyposażone środowisko VPS Hosting często rozwiązuje problemy z TTFB, których infrastruktura współdzielona nie jest w stanie rozwiązać.

Filtrowanie i inspekcja żądań

Użyj paska filtrów, aby wyświetlać tylko określone typy zasobów: XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm. Kliknij dowolny wiersz żądania, aby otworzyć panel szczegółów, który pokazuje:

• Headers — nagłówki żądania i odpowiedzi, w tym dyrektywy cache-control, content-type i identyfikacja serwera
• Preview — renderowany podgląd odpowiedzi JSON, obrazów lub HTML
• Response — surowa treść odpowiedzi
• Timing — podział wodospadu dla tego konkretnego żądania
• Cookies — cookies wysłane z żądaniem i ustawione przez odpowiedź

Sprawdzanie szczegółów SSL/TLS

W panelu Network kliknij dowolne żądanie HTTPS i przejdź do zakładki Security w panelu szczegółów, aby zobaczyć wersję TLS, zestaw szyfrów i łańcuch certyfikatów. Aby uzyskać ogólny przegląd bezpieczeństwa witryny, użyj dedykowanego panelu Security w DevTools. Prawidłowo skonfigurowane Certyfikaty SSL są tutaj widoczne — możesz potwierdzić wystawcę, datę wygaśnięcia i czy certyfikat obejmuje dokładną domenę, do której wysyłane jest żądanie.

Panel Application: pamięć, buforowanie i service workery

Panel Application zapewnia wgląd we wszystko, co przeglądarka przechowuje w imieniu witryny.

Typy pamięci dostępne tutaj:

• Cookies — przeglądaj, edytuj i usuwaj poszczególne cookies z pełną widocznością atrybutów (HttpOnly, Secure, SameSite, wygaśnięcie)
• localStorage / sessionStorage — pary klucz-wartość; edytowalne bezpośrednio w panelu
• IndexedDB — ustrukturyzowana baza danych po stronie klienta; przeglądalna według magazynu obiektów
• Cache Storage — zasoby buforowane przez service workery; kluczowe dla debugowania Progressive Web App
• Service Workers — rejestruj, wyrejestrowuj i sprawdzaj aktywne service workery; symuluj tryb offline

Typowy scenariusz debugowania: Użytkownik zgłasza wyświetlanie nieaktualnej zawartości po wdrożeniu. Panel Application pozwala sprawdzić Cache Storage, aby potwierdzić, czy stara wersja zasobu jest nadal buforowana przez service worker, i wymusić aktualizację lub wyczyścić pamięć podręczną bez konieczności twardego odświeżenia przez użytkownika.

Panel Lighthouse: automatyczny audyt

Lighthouse przeprowadza automatyczny audyt w pięciu kategoriach: Performance, Accessibility, Best Practices, SEO i Progressive Web App. Każda kategoria generuje wynik od 0 do 100 z wyszczególnionymi wynikami i bezpośrednimi linkami do dokumentacji.

Uruchamiaj Lighthouse zarówno w trybie Mobile, jak i Desktop — wyniki różnią się znacznie, ponieważ symulacja mobilna stosuje ograniczenia CPU i sieci. Audyt SEO sprawdza brakujące meta opisy, niekrawalowane linki i nieprawidłową konfigurację okna widoku. Audyt dostępności oznacza brakujące etykiety ARIA, niewystarczające współczynniki kontrastu kolorów i luki w nawigacji klawiaturowej.

Wyniki Lighthouse bezpośrednio informują o tym, co naprawić na stronie przed uruchomieniem. Jeśli hostujesz na VPS z cPanel, wiele zaleceń dotyczących wydajności — włączenie kompresji, konfiguracja nagłówków cache, włączenie HTTP/2 — można wdrożyć bezpośrednio z panelu sterowania serwera.

Zaawansowane techniki, które większość użytkowników pomija

Trwałe nadpisania za pomocą Local Overrides

W panelu Sources przejdź do zakładki Overrides. Zmapuj lokalny katalog do źródła witryny. DevTools zapisze wszelkie edycje CSS lub JavaScript do tego lokalnego katalogu i ponownie zastosuje je przy każdym załadowaniu strony — nawet po odświeżeniu. Daje to efektywnie lokalną warstwę poprawek na dowolnej witrynie bez modyfikowania serwera, przydatne podczas dłuższych sesji testowych lub przygotowywania propozycji zmian.

Wymuszanie trybu ciemnego i innych zapytań mediów

Otwórz zakładkę Rendering (dostępna przez menu z trzema kropkami wewnątrz DevTools > More tools > Rendering). Tutaj możesz wymusić prefers-color-scheme: dark, prefers-reduced-motion: reduce i inne funkcje mediów CSS bez zmiany ustawień systemu operacyjnego. To właściwy sposób testowania implementacji trybu ciemnego.

Inspekcja czcionek webowych

W panelu Application w sekcji Fonts Chrome wyświetla każdy plik czcionki załadowany przez stronę oraz które glify zostały faktycznie użyte. Pomaga to zidentyfikować, czy zmienna czcionka jest ładowana niepotrzebnie lub czy podzbiór czcionki mógłby zmniejszyć rozmiar ładunku.

Ograniczanie sieci i CPU

W panelu Network użyj listy rozwijanej ograniczania, aby symulować Slow 3G, Fast 3G lub zdefiniuj niestandardowy profil. W panelu Performance włącz ograniczanie CPU, aby symulować sprzęt mobilny z niższej półki. Uruchomienie obu jednocześnie daje najbardziej realistyczny profil wydajności dla użytkowników na urządzeniach i sieciach z ograniczonymi zasobami.

DevTools do diagnozowania problemów z hostingiem i infrastrukturą

Zestaw narzędzi Inspect Element nie służy tylko do pracy front-end. Ujawnia sygnały na poziomie infrastruktury, które bezpośrednio wpływają na doświadczenie użytkownika.

Diagnozowanie konfiguracji serwera przez DevTools:

• Nagłówki odpowiedzi w panelu Network ujawniają, czy kompresja gzip/Brotli jest aktywna (content-encoding: br), czy używane jest HTTP/2 lub HTTP/3 oraz czy nagłówki cache są poprawnie ustawione
• Wartości TTFB powyżej 600ms konsekwentnie wskazują na wąskie gardła po stronie serwera — niewystarczające zasoby hostingowe, brak buforowania opcode lub niezoptymalizowane zapytania do bazy danych
• Ostrzeżenia o mieszanej zawartości w konsoli (Mixed Content: The page was loaded over HTTPS...) wskazują na zasoby HTTP ładowane na stronie HTTPS, które przeglądarki blokują i które wymagają poprawek po stronie serwera
• Błędy certyfikatu widoczne w panelu Security wskazują na błędnie skonfigurowane Certyfikaty SSL lub wygasłe certyfikaty pośrednie

Jeśli zarządzasz wieloma witrynami lub środowiskami klientów, konfiguracja Serwerów Dedykowanych daje pełną kontrolę nad nagłówkami serwera, konfiguracją TLS i ustawieniami kompresji — wszystko to możesz następnie zweryfikować bezpośrednio przez DevTools bez polegania na domyślnych ustawieniach dostawcy hostingu.

Porównanie: panele Chrome DevTools według przypadków użycia

Praktyczna macierz decyzyjna: który panel otworzyć jako pierwszy

Objaw: Strona wygląda na zepsutą wizualnie

Otwórz panel Elements. Sprawdź panel Styles pod kątem nadpisanych lub brakujących reguł. Sprawdź zakładkę Computed pod kątem nieoczekiwanych rozwiązanych wartości. Użyj :hov, aby wymusić stany pseudoklas.

Objaw: Funkcja JavaScript nie działa

Najpierw otwórz Console. Szukaj nieprzechwyconych błędów. Jeśli ich nie ma, otwórz Sources i ustaw punkt przerwania w odpowiednim punkcie wejścia funkcji.

Objaw: Strona ładuje się wolno

Otwórz panel Network przed odświeżeniem. Zidentyfikuj największe zasoby i najdłuższe wartości TTFB. Skonfrontuj z audytem wydajności Lighthouse, aby uzyskać priorytetowe zalecenia.

Objaw: Przesyłanie formularza lub wywołanie API kończy się niepowodzeniem

Otwórz panel Network. Filtruj według XHR lub Fetch. Znajdź nieudane żądanie, sprawdź jego nagłówki żądania, ładunek i treść odpowiedzi. Sprawdź Console pod kątem błędów CORS.

Objaw: Buforowana zawartość nie jest aktualizowana

Otwórz panel Application. Sprawdź Cache Storage i Service Workers. Użyj przycisku Clear site data, aby wyczyścić wszystkie przechowywane dane dla danego źródła.

Kluczowe wnioski techniczne

• Wszystkie zmiany wprowadzone w DevTools są tylko dla bieżącej sesji — odświeżenie strony je odrzuca, chyba że skonfigurowano Local Overrides w panelu Sources
• Panel Elements pokazuje live DOM, a nie źródło HTML — zawartość renderowana przez JavaScript jest tutaj widoczna, ale nie w view-source:
• Ctrl+Shift+C aktywuje selektor elementów bezpośrednio; Ctrl+Shift+I otwiera ostatnio używany panel
• $0 w Console zawsze odnosi się do aktualnie wybranego węzła DOM w panelu Elements
• Wartości TTFB powyżej 600ms konsekwentnie wskazują na problemy po stronie serwera, a nie problemy front-end
• Emulator urządzeń zmienia okno widoku, user-agent i zdarzenia dotykowe — nie emuluje wydajności CPU
• Wyniki Lighthouse różnią się między trybami Mobile i Desktop ze względu na zastosowane ograniczenia — zawsze uruchamiaj oba
• Wymuszanie pseudoklas (:hover, :focus) za pomocą przycisku :hov to jedyny niezawodny sposób na inspekcję stanów interakcji
• Mapy źródeł muszą być serwowane razem z pakietami, aby panel Sources pokazywał czytelny kod w kompilacjach produkcyjnych
• Panel Application jest autorytatywnym źródłem do diagnozowania problemów z nieaktualną zawartością związanych z service workerami i pamięcią podręczną

Dla zespołów obsługujących obciążenia produkcyjne, spostrzeżenia ujawniane przez DevTools — nagłówki kompresji, TTFB, konfiguracja TLS, dyrektywy cache — są możliwe do wdrożenia tylko wtedy, gdy masz kontrolę nad środowiskiem serwera. VPS Hosting i Serwery Dedykowane dają dostęp administracyjny do wdrożenia tego, co diagnozuje DevTools. Zarządzane Panele Sterowania VPS dodatkowo upraszczają stosowanie tych poprawek bez głębokiej wiedzy z zakresu administracji serwerami.

FAQ

Czy edytowanie HTML lub CSS w panelu Elements zmienia rzeczywistą witrynę?

Nie. Wszystkie modyfikacje są lokalne dla sesji przeglądarki i dotyczą tylko Twojej kopii renderowanej strony. Zmiany są odrzucane po odświeżeniu. Aby wprowadzić trwałe zmiany, musisz edytować pliki źródłowe na serwerze lub w swojej bazie kodu.

Dlaczego panel Elements pokazuje inny HTML niż źródło strony?

Panel Elements wyświetla live DOM po wykonaniu JavaScript. view-source: pokazuje surowy HTML dostarczony przez serwer przed jakimkolwiek renderowaniem po stronie klienta. Aplikacje jednostronicowe i witryny z dużą ilością JavaScript będą wykazywać znaczne różnice między nimi.

Jak zbadać element, który znika po przesunięciu myszy?

W panelu Elements wybierz element nadrzędny, który wyzwala pojawienie się. Następnie kliknij przycisk :hov w panelu Styles i zaznacz :hover. Wymusza to pozostanie aktywnego stanu hover podczas nawigacji w DevTools. Alternatywnie ustaw punkt przerwania mutacji DOM na elemencie, aby wstrzymać wykonanie w momencie jego pojawienia się.

Co oznacza wysoka wartość TTFB w panelu Network?

Time to First Byte mierzy, jak długo serwer potrzebuje, aby zacząć wysyłać odpowiedź po otrzymaniu żądania. Konsekwentnie wysokie TTFB (powyżej 600ms) wskazuje na wąskie gardła po stronie serwera: wolne zapytania do bazy danych, brak buforowania opcode PHP, niewystarczająca ilość RAM lub rywalizacja o CPU na przeciążonym hostingu współdzielonym. Nie jest to problem front-end i nie można go naprawić optymalizacjami CSS lub JavaScript.

Czy mogę używać Chrome DevTools do inspekcji ruchu HTTPS i szczegółów certyfikatu?

Tak. Panel Security w DevTools pokazuje wersję TLS, zestaw szyfrów, wystawcę certyfikatu i datę wygaśnięcia dla bieżącej strony. Szczegóły certyfikatu na poziomie poszczególnych żądań są dostępne po kliknięciu żądania w panelu Network i wybraniu zakładki Security w panelu szczegółów.