Chrome DevTools to zestaw narzędzi dla programistów internetowych wbudowanych bezpośrednio w przeglądarkę Google Chrome. Narzędzia DevTools pomagają edytować strony w locie i szybko diagnozować problemy, co ostatecznie pomaga szybciej budować lepsze strony internetowe.
Sprawdź wideo, aby zobaczyć demonstracje na żywo podstawowych przepływów pracy DevTools, w tym debugowanie CSS, prototypowanie CSS, debugowanie JavaScript i analizowanie wydajności ładowania.
Otwórz DevTools
Istnieje wiele sposobów na otwarcie DevTools, ponieważ różni użytkownicy chcą mieć szybki dostęp do różnych części interfejsu użytkownika DevTools.
- Gdy chcesz pracować z DOM lub CSS, kliknij prawym przyciskiem myszy element na stronie i wybierz Inspect, aby przejść do panelu Elements. Możesz też nacisnąć Command+Option+C (Mac) lub Control+Shift+C (Windows, Linux, Chrome OS).
- Gdy chcesz zobaczyć rejestrowane komunikaty lub uruchomić JavaScript, naciśnij Command+Option+J(Mac) lub Control+Shift+J (Windows, Linux, Chrome OS), aby przejść bezpośrednio do panelu Console.
Więcej szczegółów i przepływy pracy znajdziesz w rozdziale Open Chrome DevTools.
Zacznij
Jeśli jesteś bardziej doświadczonym web developerem, oto zalecane punkty wyjścia do nauki, jakDevTools może poprawić twoją produktywność:
- Widok i zmiana DOM
- Widok i zmiana stylów strony (CSS)
- Debug JavaScript
- Widok komunikatów i uruchamianie JavaScript w Console
- Optymalizuj szybkość strony
- Sprawdź aktywność sieci
Odkryj DevTools
UI DevTools może być trochę przytłaczające…. jest tam tak wiele zakładek! Ale jeśli poświęcisz trochę czasu na zapoznanie się z każdą z nich, aby zrozumieć, co jest możliwe, możesz odkryć, że DevTools może poważnie zwiększyć Twoją produktywność.
Tryb urządzenia
Symuluj urządzenia mobilne.
- Tryb urządzenia
- Testuj responsywne i specyficzne dla urządzenia Viewporty
- Emuluj czujniki: Geolokalizacja & Akcelerometr
PanelElements
Przeglądaj i zmieniaj DOM i CSS.
- Zacznij od przeglądania i zmiany DOM
- Zacznij od przeglądania i zmiany CSS
- Przeglądaj i poprawiaj swoje strony
- Edytuj style
- Edytuj DOM
- Przeglądaj animacje
- Znajdź nieużywany CSS
Panel konsoli
Przeglądaj komunikaty i uruchamiaj JavaScript z konsoli.
- Rozpoczęcie pracy z konsolą
- Używanie konsoli
- Interakcja z wiersza poleceń
- Podręcznik API konsoli Reference
Panel źródeł
Debuguj JavaScript, zachowuj zmiany dokonane w DevTools podczas przeładowywania strony, zapisuj i uruchamiaj fragmenty JavaScript oraz zapisuj zmiany dokonane w DevTools na dysku.
- Zacznij debugować JavaScript
- Zatrzymaj swój kod za pomocą punktów przerwania
- Zapisuj zmiany na dysku za pomocą przestrzeni roboczych
- Uruchamiaj fragmenty kodu z dowolnej strony
- Podręcznik debugowania JavaScript
- Utrzymywanie zmian w trakcie przeładowywania strony dzięki lokalnym nadpisaniom
- Znajdowanie nieużywanego JavaScriptu
Panel sieciowy
Przeglądaj i usuwaj błędy w sieci.
- Rozpocznij
- Przewodnik po zagadnieniach sieciowych
- Podręcznik panelu sieciowego
Panel wydajności
Znajdź sposoby na poprawienie obciążenia i wydajności działania.
- Optymalizuj szybkość witryny
- Zacznij analizować wydajność uruchamiania
- Podręcznik analizy wydajności
- Analizuj wydajność uruchamiania
- Diagnozuj wymuszone układy synchroniczne
.
Panel pamięci
Poprofiluj wykorzystanie pamięci i wytrop wycieki.
- Napraw problemy z pamięcią
- Profiler procesora JavaScript
Panel aplikacji
Sprawdź wszystkie zasoby, które są ładowane, w tym bazy danych IndexedDB lub Web SQL, pamięć lokalną i sesyjną, pliki cookie, pamięć podręczną aplikacji, obrazy, czcionki i arkusze stylów.
- Debugowanie progresywnych aplikacji sieciowych
- Sprawdzanie i zarządzanie pamięcią masową, bazami danych, i pamięci podręcznej
- Sprawdzaj i usuwaj pliki cookie
- Sprawdzaj zasoby
Panel bezpieczeństwa
Usuwaj problemy z mieszaną zawartością, problemy z certyfikatami i inne.
- Zrozumieć problemy z bezpieczeństwem
Społeczność
Zgłaszaj raporty o błędach i prośby o funkcje w Crbug, który jest bug trackerem zespołu inżynierów.
Crbug
Jeśli chcesz nas powiadomić o błędzie lub żądaniu funkcji, ale nie masz zbyt wiele czasu, możesz wysłać tweeta na @ChromeDevTools. Odpowiadamy i regularnie wysyłamy komunikaty z tego konta.
Aby uzyskać pomoc w korzystaniu z DevTools, najlepszym kanałem jest Stack Overflow.
Stack Overflow
Aby zgłosić błędy lub prośby o funkcje w dokumentach DevTools, otwórz problem na GitHubie w repozytorium Web Fundamentals.
Docs Issues
DevTools posiada również kanał Slack, ale zespół nie monitoruje go stale.
Slack