DevTools
Chrome-Entwicklertools sind Webentwicklertools, die direkt in den Google Chrome-Browser integriert sind. Mit den Entwicklertools können Sie Seiten im Handumdrehen bearbeiten und Probleme schnell diagnostizieren. So können Sie schneller bessere Websites erstellen.
Entwicklertools öffnen
Alle Möglichkeiten zum Öffnen der Chrome-Entwicklertools.
Das ist neu in den Entwicklertools
Du solltest dich über die neuesten Änderungen an den Entwicklertools auf dem Laufenden halten.
Tipps zu Entwicklertools
Eine Reihe kurzer Videos, in denen du die Funktionen der Entwicklertools kennenlernen kannst.
Befehle und Tastenkombinationen
Aufgaben schnell erledigen
Befehle über das Befehlsmenü ausführen
Öffnen Sie unter anderem das Befehlsmenü, führen Sie Befehle aus, öffnen Sie Dateien und sehen Sie sich andere Aktionen an.
Tastenkombinationen
Eine umfassende Übersicht über Tastenkombinationen
JavaScript deaktivieren
Sehen Sie sich an, wie eine Webseite aussieht und funktioniert, wenn JavaScript deaktiviert ist.
Mobilgeräte mit dem Gerätemodus simulieren
Simulieren Sie Geräte, um für Mobilgeräte optimierte Websites zu erstellen.
In geladenen Ressourcen suchen
Mit dem Suchfeld können Sie in allen geladenen Ressourcen nach Text suchen.
Steuerfelder
Entdecken Sie die Möglichkeiten der einzelnen Entwicklertools.
Elemente – DOM
Hier erfahren Sie, wie Sie das DOM einer Seite ansehen und ändern.
Elemente – CSS
Hier erfahren Sie, wie Sie die CSS einer Seite aufrufen und ändern.
Cloud Console
Meldungen protokollieren und JavaScript ausführen.
Quellen
Hier können Sie Dateien ansehen und bearbeiten, Snippets erstellen, JavaScript-Fehler beheben und einen Arbeitsbereich einrichten.
Netzwerk
Netzwerkanfragen protokollieren.
Leistung
Websiteleistung bewerten
Speicher
Hiermit können Sie Speicherprobleme identifizieren, die die Seitenleistung beeinträchtigen, z. B. Speicherlecks.
Anwendung
Hier können Sie unter anderem Web-Apps prüfen, ändern und debuggen, den Cache testen und Speicherplatz anzeigen.
Rekorder
Sie können User Flows aufzeichnen, noch einmal abspielen, messen und ihre Schritte bearbeiten.
Rendering
Entdecken Sie eine Reihe von Optionen, die das Rendern von Webinhalten beeinflussen.
Autofill
Prüfen und debuggen Sie gespeicherte Adressen.
Probleme
Probleme mit Ihrer Website identifizieren und beheben
Sicherheit
Achten Sie darauf, dass eine Seite vollständig durch HTTPS geschützt ist.
Arbeitsspeicherprüfer
Untersuchen Sie ArrayBuffer, TypedArray oder DataView in JavaScript sowie WebAssembly und Arbeitsspeicher von C++ Wasm-Apps.
Netzwerkbedingungen
Überschreibt den User-Agent-String.
Blockierung der Netzwerkanfrage
Testen Sie Ihre Website, indem Sie Netzwerkanfragen blockieren.
Medien
Sehen Sie sich Informationen an und beheben Sie Mediaplayer für einzelne Browsertabs.
Animationen
Animationen prüfen und ändern
Umstiege
Verfolgen Sie Änderungen an HTML, CSS und JavaScript.
Abdeckung
Suchen und analysieren Sie nicht verwendeten JavaScript- und CSS-Code.
Entwicklerressourcen
Prüfen Sie, ob Quellzuordnungen erfolgreich geladen werden, und laden Sie sie manuell.
Übersicht über Preisvergleichsportale
Identifizieren Sie mögliche CSS-Verbesserungen.
Leuchtturm
Optimieren Sie die Websitegeschwindigkeit mithilfe des Lighthouse-Steuerfelds.
Statistische Daten zur Leistung
Umsetzbare Informationen zur Leistung Ihrer Website erhalten
Leistungsüberwachung
Überwachen Sie die Last- und Laufzeitleistung.
Quick Source
Sie können Quelldateien aufrufen und bearbeiten und dabei auf andere Bereiche zugreifen.
Sensoren
Gerätesensoren emulieren.
WebAudio
WebAudio API-Messwerte ansehen
WebAuthn
Authenticators emulieren.