- Czym jest chrome DevTools ?
- Z jakich elementów menu składa się narzędzie Chrome DevTools?
- Do czego może służyć Chrome DevTools?
Chrome DevTools to zestaw narzędzi developerskich wbudowanych bezpośrednio w przeglądarkę Chrome (takie narzędzie jest w większości przeglądarek). Pozwala nam na debugowanie oraz edytowanie niektórych plików, dzięki czemu możemy wprowadzać dowolne poprawki, które później możemy w łatwy sposób przenieść do kodu. Dzięki narzędziom dla developerów możemy także debugować CSS, prototypować CSS, debugować JavaScript i analizować wydajność strony.
Dostęp do narzędzia deweloperskiego
Za pomocą naciśnięcia przycisku F12
Za pomocą naciśnięcia Ctrl + Shift + I
Po naciśnięciu Chrome menu 
a następnie wybraniu Więcej narzędzi > Narzędzia dla programistów
Po kliknięciu prawym przyciskiem myszki i wybraniu Zbadaj na danym elemencie.
Okno narzędzi developerskich składa się z kilku podstawowych zakładek:
- Elements – miejsce, w którym możemy sprawdzać/dodawać/usuwać/edytować elementy html oraz css. Mamy również podgląd podpiętych eventów. Zakładka ta zawiera renderowany kod HTML naszej strony. Kod ten pokazuje wynikowy obraz naszej strony ze względu, że jest zrenderowany.
- Console – w tym miejscu możemy wykonywać kod oraz w łatwy sposób go debugować. Robimy to poprzez umieszczenie w kodzie console.logów.
- Sources – daje możliwość debugowania przy pomocy breakpointów i podgląd źródła kodu w którym to debugowanie (ustawienie breakpointa) się odbywa.
- Network – miejsce, w którym sprawdzimy wysyłane żądania, prędkość ładowania czy też otrzymywane zwrotki.
- Perfomance – miejsce do analizowania ładowanych elementów.
- Memory – zakładka, która daje nam możliwość sprawdzenia zużywanej pamięci.
- Application – możliwość inspekcji zasobów ładowanych przez stronę.
- Security – sekcja związana z bezpieczeństwem, umożliwia sprawdzenie certyfikatu oraz problemów z nim związanych.
