Narzędzia deweloperskie w Chrome można otwierać na wiele sposobów. Z tego kompleksowego materiału referencyjnego wybierz ulubiony sposób.
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.
Otwieranie Narzędzi deweloperskich z menu Chrome
Jeśli wolisz interfejs użytkownika, możesz przejść do Narzędzi deweloperskich z menu w Chrome.
Otwórz panel Elementy, aby sprawdzić DOM lub CSS
Aby to sprawdzić, kliknij dany element prawym przyciskiem myszy i wybierz Zbadaj.
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.
Otwórz ostatnio używany panel w menu głównym 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.
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 – JavaScript.
- I oznacza Twój wybór.
Skrót C otwiera panel Elementy w trybie inspektora . Ten tryb wyświetla przydatne etykietki po najechaniu kursorem na element na stronie. Możesz też kliknąć dowolny element, aby wyświetlić jego kod CSS w panelu Elementy > Style.
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
:
Zamknij wszystkie uruchomione wystąpienia Chrome.
Uruchom ulubiony terminal lub aplikację wiersza poleceń.
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?
Obejrzyj film poniżej, aby poznać przydatne skróty i ustawienia, dzięki którym szybciej nawigujesz po narzędziach deweloperskich.
Aby mieć więcej praktycznych możliwości, zapoznaj się z artykułem na temat dostosowywania Narzędzi deweloperskich.