Otwórz Narzędzia deweloperskie w Chrome

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Narzędzia deweloperskie w Chrome można otworzyć na wiele sposobów. Wybierz swój ulubiony sposób z tego obszernego przewodnika.

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

Dowiedz się też, jak automatycznie otwierać Narzędzia deweloperskie na każdej nowej karcie.

Otwieranie Narzędzi deweloperskich z menu Chrome

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

Otwieranie panelu Elementy w celu sprawdzenia DOM lub CSS

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

Opcja Zbadaj w menu w Chrome.

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

Element wybrany w panelu Elementy.

Otwieranie ostatnio używanego panelu z menu głównego Chrome

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

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

Możesz też otworzyć ostatni panel 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 klawiaturę, naciśnij skrót w Chrome w zależności od systemu operacyjnego:

System operacyjny Elementy Konsola 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 na zapamiętanie skrótów:

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

Skrót C otwiera panel Elementy w trybie inspektora. W tym trybie po najechaniu kursorem na elementy na stronie wyświetlają się przydatne podpowiedzi. Możesz też kliknąć dowolny element, aby wyświetlić jego CSS na karcie Elementy > Style.

Panel Elementy w trybie inspektora z etykietką.

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

Gdy Narzędzia deweloperskie są otwarte, odśwież stronę z pamięcią podręczną lub bez niej

Gdy Narzędzia deweloperskie są otwarte, możesz odświeżyć stronę na 3 sposoby. Na głównym pasku działań okna Chrome naciśnij i przytrzymaj przycisk odświeżania Odśwież i wybierz jedną z tych opcji:

Trzy opcje ponownego wczytywania przy otwartych Narzędziach deweloperskich.

  • Normalne odświeżanie. Używa pamięci podręcznej, aby przyspieszyć odświeżanie.

    Skrót: Cmd+R (macOS) lub Ctrl+R (Windows/Linux).

  • Twarde odświeżanie. Omija pamięć podręczną, ale jej nie opróżnia.

    Skrót: Cmd+Shift+R (macOS) lub Ctrl+Shift+R (Windows/Linux).

  • Opróżnij pamięć podręczną i twardo odśwież. Przed odświeżeniem opróżnia pamięć podręczną wszystkich witryn.

Automatyczne otwieranie Narzędzi deweloperskich na każdej nowej karcie

Uruchom Chrome z wiersza poleceń i przekaż flagę --auto-open-devtools-for-tabs:

  1. Zamknij wszystkie uruchomione instancje Chrome.

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

  3. W zależności od systemu operacyjnego uruchom to 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ą się automatycznie otwierać na każdej nowej karcie, dopóki nie zamkniesz Chrome.

Co dalej?

Następnie obejrzyj ten film, aby poznać przydatne skróty i ustawienia, które przyspieszą nawigację w Narzędziach deweloperskich.

Aby zdobyć praktyczne doświadczenie, dowiedz się, jak dostosować Narzędzia deweloperskie.