- Szybko edytuj elementy HTML
- Rozwiń wszystkie elementy potomne
- Przeniesienie inspektora
- Wyszukiwanie elementów DOM
- Palety
- Wiele kursorów
- Zakoduj obraz base64
- Przełączanie pseudoklas
- Wybór kolumny
- Kopiuj prośbę o cURL
- Klawiatura ekranowa
- Zrzut ekranu całej strony
- Emulacja urządzeń dotykowych
- Przydatne funkcje
Jak sama nazwa wskazuje, Chrome DevTools lub inspektor internetowy to narzędzie przeznaczone dla twórców stron internetowych i osób z nim związanych. Inspektor internetowy umożliwia wykonanie następujących czynności:
- Sprawdź poprawność wyświetlacza.
- Śledź wykonywanie skryptów w JavaScript.
- Wyświetl działania sieciowe.
Podczas pisania tego artykułu użyłem Kanarek - wersja Chrome, w której testowane są nowe funkcje, które następnie wchodzą w stabilną wersję Chrome.
Aby uruchomić inspektora, możesz kliknąć prawym przyciskiem myszy w dowolnym miejscu na stronie i wybrać „Wyświetl kod elementu”, możesz też po prostu nacisnąć Ctrl + Shift + C.
Szybko edytuj elementy HTML
Zacznijmy od najprostszych: elementów edycji.
Jak sprawdzić:
- Wybierz kartę „Elementy”.
- Wybierz dowolny element HTML wewnątrz panelu.
- Kliknij dwukrotnie znacznik i zmień na przykład nazwę znacznika.
Po zakończeniu edycji tag zamykający zostanie automatycznie zaktualizowany.
Rozwiń wszystkie elementy potomne
Jak sprawdzić:
- Przejdź do panelu Elementy.
- Wybierz element i przytrzymując Alt, kliknij strzałkę po lewej stronie elementu.
Przeniesienie inspektora
Panel inspektora można nacisnąć zarówno w dolnej części okna przeglądarki, jak i po prawej stronie. Na przykład lokalizacja panelu po prawej stronie jest wygodna podczas pracy na monitorach szerokoekranowych. Ponadto panel inspektora można umieścić w oddzielnym oknie i na przykład przenieść na inny monitor.
Jak sprawdzić:
- Ctrl + Shift + D - Przełącz lokalizację
Wyszukiwanie elementów DOM
Prawdopodobnie nie wielu, dla których będzie to odkrycie, ale w zakładce „Elementy” możesz wyszukiwać według DOM.
Jak sprawdzić:
- Naciśnij Ctrl + F i wprowadź proponowane zapytanie.
Palety
Wybierz kolor z palety Wybór kolorów w ostatnich wersjach Chrome został poddany pewnym zmianom: dodano dwie palety, aby ułatwić wybór koloru.
Wiele kursorów
Przesuń kursor i przytrzymując Ctrl, kliknij żądany obszar, aby dodać kursor. Możesz cofnąć akcję za pomocą Ctrl + U. Osobiście nigdy nie byłem przydatny.
Zakoduj obraz base64
Jak sprawdzić:
- Przejdź do panelu Sieć.
- Wybierz obraz
- Kliknij obraz prawym przyciskiem myszy i wybierz „”
Przełączanie pseudoklas
Pseudoklasy odzwierciedlają stan elementów i ich względne pozycje.
Jak sprawdzić:
- Kliknij prawym przyciskiem myszy element w panelu Elementy i wybierz pseudoklasę z listy Stan elementu siły.
- Możesz również wybrać pseudoklasę po prawej stronie panelu Elementy.
Wybór kolumny
Jak sprawdzić:
- Przejdź do panelu „Źródła”.
- Wybierz dowolny plik.
- Wybierz tekst, przytrzymując Alt.
Wybór kolumny działa również wtedy, gdy HTML jest edytowany w panelu Elementy.
Kopiuj prośbę o cURL
Każde żądanie na karcie Sieć można skopiować, a następnie wkleić do terminala w celu wykonania za pomocą zwijania.
Klawiatura ekranowa
Jeśli wybrany jest profil Nexus 5X, możesz zobaczyć, jak wygląda strona, gdy klawiatura ekranowa jest aktywna.
Chrome DevTools: klawiatura ekranowa
Zrzut ekranu całej strony
Zrób zdjęcie całej strony jest bardzo proste. Wystarczy ...
- Otwórz Inspektora.
- Idź do konsoli.
- Naciśnij Ctrl + Shift + P
- Wpisz „zrzut ekranu”
- Wybierz „Zrzut ekranu w pełnym rozmiarze”
Zrzut ekranu całej strony Emulacja urządzeń dotykowych
Możesz także symulować niektóre czujniki:
- Ekran dotykowy
- Współrzędne geolokalizacji
- Akcelerometr
Jak spróbować:
- Wybierz panel Elementy.
- Naciśnij „Esc” i wybierz „Emulacja> Czujniki”.
Przydatne funkcje
klucze i wartości
Funkcje klawiszy i wartości pozwalają odpowiednio wysyłać klucze lub wartości obiektu do konsoli. 
Wyświetlanie kluczy i wartości obiektu oddzielnie