DevTools (narzędzia deweloperskie) to zestaw narzędzi wbudowanych w przeglądarkę, służący do analizy i debugowania stron. Otwiera się je klawiszem F12 lub skrótem Ctrl+Shift+I. Pokazują HTML, style, skrypty, ruch sieciowy i wydajność.
Najważniejsze panele
- Elements: podgląd i edycja HTML i CSS na żywo,
- Console: komunikaty i błędy JavaScript,
- Network: lista żądań z rozmiarami i czasami,
- Performance: profilowanie ładowania i działania strony,
- Application: cookies, local storage i service workers,
- Lighthouse: audyt jakości strony.
Do czego używa się ich w SEO?
Pozwalają sprawdzić kody odpowiedzi i przekierowania, wyświetlić nagłówki HTTP, zobaczyć wyrenderowany HTML i znaleźć zasoby blokujące renderowanie. Tryb urządzeń mobilnych symuluje telefony i zmniejszoną przepustowość.
Przydatne triki
W panelu Network włącz „Disable cache” i ogranicz łącze (Slow 4G), aby zobaczyć stronę oczami użytkownika z wolnym internetem. W panelu Elements można klikać prawym przyciskiem i kopiować selektor, a zmiany stylów wprowadzane na żywo nie zapisują się w plikach.