Narzędzia deweloperskie w Chrome to zestaw wbudowanych w przeglądarkę Google Chrome narzędzi dla programistów stron internetowych. Narzędzia deweloperskie umożliwiają edytowanie stron na bieżąco i szybkie diagnozowanie problemów, co pozwala szybciej tworzyć lepsze witryny.
Rozpocznij Informacje o wersjach

Debugowanie z użyciem AI

Dowiedz się, jak innowacje w zakresie AI w Narzędziach deweloperskich pozwalają Ci robić więcej i szybciej. Użyj Narzędzi deweloperskich w Chrome MCP, aby połączyć możliwości Narzędzi deweloperskich z ulubionymi agentami kodowania.
Pozwól Gemini pomóc Ci w analizowaniu i ulepszaniu stylu, sieci, źródeł i wydajności witryny. Uzyskuj pomoc dotyczącą błędów w konsoli i sugestie dotyczące kodu w panelach Konsola i Źródła.
Odkryj innowacje w zakresie AI
Zapewnij agentom kodującym te same zaufane narzędzia, których używasz do sprawdzania aktywności w sieci, rejestrowania śladów i rozwiązywania problemów z aplikacjami internetowymi w ramach przepływu pracy AI.

 Połącz serwer protokołu kontekstu modelu Narzędzi deweloperskich w Chrome z wybranym narzędziem: interfejsem wiersza poleceń Gemini, Claude Code, Cline, Copilot i innymi.

Więcej informacji znajdziesz w GitHub
Uzyskaj kompleksowy i przydatny w praktyce wgląd w skuteczność strony.
Dowiedz się, jak sprawdzić zasoby wczytywane przez stronę i je edytować w przeglądarce.
Analizowanie i zastępowanie żądań sieciowych oraz odpowiedzi na bieżąco.

Wskazówki dotyczące narzędzi dla programistów

Oglądaj naszą comiesięczną serię filmów, w których w zabawny sposób przedstawiamy typowe scenariusze debugowania w Narzędziach deweloperskich.
Poznaj zaktualizowany panel Wydajność, który pokazuje, jak mierzyć podstawowe wskaźniki internetowe (LCP, CLS, INP) i jak uzyskać spersonalizowane porady od Gemini.
Wyrusz w rejs z Narzędziami deweloperskimi i zostań piratem debugowania! Poznaj techniki emulowania stylów fokusu, testowania formularzy z autouzupełnianiem i rozwiązywania błędów backendu za pomocą zastępowania sieci.
Odkryj możliwości debugowania z pomocą AI w Narzędziach deweloperskich w Chrome. Dowiedz się, jak Statystyki konsoli, pomoc AI w zakresie stylów, wydajności, sieci i źródeł mogą usprawnić Twoją pracę.
Poznaj zaawansowane techniki korzystania z panelu Sieć, w tym sposoby znajdowania wąskich gardeł wydajności, debugowania wyskakujących okien, konfigurowania warunków sieciowych, używania skrótów do określania inicjatorów żądań sieciowych i nie tylko.

Statystyki dotyczące wydajności

Szeroki zakres narzędzi do pomiaru i optymalizacji różnych aspektów wydajności w czasie działania: panel Wydajność, Lighthouse i inne.
Poznaj wszystkie funkcje panelu Wydajność: m.in. jak rejestrować ślad wydajności, wyświetlać i analizować ślad oraz inne.
Poznaj nowe funkcje DevTools, np. kalibrację ograniczania procesora, które pomogą Ci podejmować decyzje dotyczące debugowania wydajności na podstawie rzeczywistych danych
Poznaj nowe statystyki wydajności, czyli możliwości Lighthouse, bezpośrednio w panelu Wydajność w Narzędziach deweloperskich.

Nowości i aktualności

Sprawdzanie i edytowanie zasobów

Poznaj wszystkie funkcje w panelu Źródła: jak wyświetlać i edytować pliki, debugować JavaScript i konfigurować obszar roboczy.
Rozpocznij
Workspace umożliwia zapisywanie w Narzędziach deweloperskich zmian wprowadzonych w źródle kodu, które jest przechowywane na komputerze. Dowiedz się, jak skonfigurować obszar roboczy w ramach własnych projektów.
Przeczytaj samouczek

Analizowanie aktywności sieci

Poznaj wszystkie funkcje panelu sieci: sprawdzanie treści odpowiedzi i żądań, zastępowanie nagłówków i inne.
Rozpocznij
praktyczny samouczek, który poprowadzi Cię przez typowe czynności w panelu sieci;
Przeczytaj samouczek

Więcej narzędzi

Poznaj wszystkie inne funkcje i możliwości w Narzędziach deweloperskich.
Dowiedz się, jak wyświetlić i zmienić DOM strony.
Dowiedz się, jak wyświetlić i zmienić kod CSS strony.
Śledzenie zmian w kodach HTML, CSS i JavaScript.
Rejestruj komunikaty i uruchamiaj JavaScript.
Ocena skuteczności witryny.
Znajdź problemy z pamięcią wpływające na wydajność strony, w tym wycieki pamięci.
Sprawdzaj, modyfikuj i debuguj aplikacje internetowe, testuj pamięć podręczną i przeglądaj pamięć masową.
Sprawdzanie i modyfikowanie animacji.
Nagrywaj, odtwarzaj ponownie, mierz przepływy użytkowników i edytuj ich kroki.
Poznaj kolekcję opcji wpływających na renderowanie treści internetowych.
sprawdzać i debugować zapisane adresy,
Wykryj i rozwiąż problemy z witryną.
Upewnij się, że strona jest w pełni chroniona przez HTTPS.
Wyświetlanie informacji i debugowanie odtwarzaczy multimedialnych na poszczególnych kartach przeglądarki.
Emuluj czujniki urządzenia.
Emuluj uwierzytelnianie.