Otwórz Narzędzia deweloperskie w Chrome

Kayce Basques
Kayce Basques
Sofia Emelianowa
Sofia Emelianova

Narzędzia deweloperskie w Chrome możesz otwierać na wiele sposobów. Z tego kompleksowego źródła informacji wybierz tę, która najbardziej Ci odpowiada.

Dostęp do Narzędzi deweloperskich możesz uzyskać za pomocą interfejsu Chrome lub klawiatury:

  • W menu w Chrome.
  • dzięki specjalnym skrótom, które otwierają Elementy, konsolę lub ostatnio używany panel.

Dowiedz się też, jak automatycznie otwierać Narzędzia deweloperskie w przypadku każdej nowej karty.

Otwieraj Narzędzia deweloperskie z menu Chrome

Jeśli wolisz interfejs, możesz uzyskać dostęp do Narzędzi deweloperskich z menu w Chrome.

Otwórz panel Elementy, aby sprawdzić DOM lub CSS

Aby to sprawdzić, kliknij prawym przyciskiem myszy element na stronie i wybierz Zbadaj.

Opcja Zbadaj w menu w Chrome.

Narzędzia deweloperskie otwierają panel Elementy i wybierają element w drzewie DOM. W panelu Style możesz zobaczyć reguły CSS zastosowane do wybranego elementu.

Element wybrany w panelu Elementy.

Otwórz ostatnio używany panel w menu głównym Chrome

Aby otworzyć ostatni panel Narzędzi deweloperskich, kliknij przycisk Menu z 3 kropkami. po prawej stronie paska adresu i wybierz Więcej narzędzi > Narzędzia dla programistów.

Opcja Narzędzia dla deweloperów z menu z 3 kropkami

Ostatni panel możesz też otworzyć za pomocą skrótu. Więcej informacji znajdziesz w następnej sekcji.

Otwieranie paneli za pomocą skrótów: Elementy, Konsola lub ostatni panel

Jeśli wolisz używać klawiatury, naciśnij skrót w Chrome w zależności od systemu operacyjnego:

System operacyjny Elementy Konsola Twój ostatni panel
Windows lub Linux Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

Oto łatwy sposób zapamiętania skrótów:

  • C oznacza CSS.
  • J oznacza kod JavaScript.
  • I oznacza Twój wybór.

Skrót C otwiera panel Elementy w trybie inspektora Zbadaj.. Ten tryb wyświetla przydatne etykietki po najechaniu kursorem na poszczególne elementy strony. Możesz też kliknąć dowolny element, aby wyświetlić jego kod CSS w panelu Elementy > Style.

Panel Elementy w trybie inspektora z etykietką.

Pełną listę skrótów dostępnych w Narzędziach deweloperskich znajdziesz w artykule Skróty klawiszowe.

Automatycznie otwieraj Narzędzia deweloperskie na każdej nowej karcie

Uruchom Chrome z poziomu wiersza poleceń i prześlij flagę --auto-open-devtools-for-tabs:

  1. Zamknij wszystkie uruchomione wystąpienia Chrome.

  2. Uruchom ulubiony terminal lub aplikację wiersza poleceń.

  3. W zależności od systemu operacyjnego uruchom następujące polecenie:

  • macOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs
    
  • Windows:

    start chrome --auto-open-devtools-for-tabs
    
  • Linux:

    google-chrome --auto-open-devtools-for-tabs
    

Narzędzia deweloperskie będą automatycznie otwierać się na każdej nowej karcie, dopóki nie zamkniesz Chrome.

Co dalej?

W następnym filmie obejrzyj ten film, aby poznać przydatne skróty i ustawienia, które pozwalają przyspieszyć nawigację w Narzędziach deweloperskich.

Aby uzyskać więcej praktycznego doświadczenia, przeczytaj artykuł o dostosowywaniu Narzędzi deweloperskich.