Unter Einstellungen > Einstellungen lassen sich Darstellung und Verhalten der Entwicklertools und ihrer Bereiche konfigurieren. Auf diesem Tab werden sowohl allgemeine als auch Bereichsspezifische Optionen aufgeführt.
Wenn Sie die Einstellungen festlegen möchten, öffnen Sie Einstellungen > Einstellungen und scrollen Sie zu einem der nachfolgend beschriebenen Abschnitte.
Wenn Sie mehr über die einzelnen Einstellungen erfahren möchten, suchen Sie auf dieser Seite nach dem Namen der Einstellung und maximieren Sie die Beschreibung mit add_circle.
In dieser Referenz sind verschiedene Einstellungen mit den folgenden Symbolen angegeben:
- Kästchen
- Drop-down-Listen
- eingestellt
Wenn Sie die Standardeinstellungen wiederherstellen möchten, scrollen Sie zum Ende des Tabs Einstellungen und klicken Sie auf Standardeinstellungen wiederherstellen und neu laden.
Darstellung
In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie das Erscheinungsbild der Entwicklertools anpassen können.
Mit Designs wird ein Farbdesign für die Benutzeroberfläche der Entwicklertools festgelegt.
Durch das Steuerfeldlayout werden Bereiche in Steuerfeldern angeordnet.
Dies wirkt sich auf Elemente > Stile und zugehörige Tabs sowie auf den Bereich Quellen > Debugger aus. Durch die Option auto hängt das Layout von der Breite der Entwicklertools ab.
Sprache legt die Sprache für die Benutzeroberfläche der Entwicklertools fest.
Lade die Entwicklertools neu, um diese Einstellung anzuwenden.
Wenn Sie die Tastenkombination Strg/Cmd + 0–9 zum Wechseln zwischen den Bereichen aktivieren, können Sie Bereiche über die Tastatur öffnen.
In diesem Video erfahren Sie, wie Sie mit den entsprechenden Tastenkürzeln zwischen Tabs wechseln.
Mit der Option Pausierter Status-Overlay deaktivieren wird das Overlay Pausiert in Debugger im Darstellungsbereich ausgeblendet, wenn die Codeausführung pausiert wird.
Mit der Option Neue Funktionen nach jedem Update anzeigen wird nach jedem Chrome-Update automatisch der Tab Neue Funktionen geöffnet.
Quellen
In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie den Bereich Quellen anpassen können.
Mit der Suche in anonymen und Inhaltsskripten können Sie über den Tab Suchen in allen geladenen JavaScript-Dateien suchen, einschließlich der Dateien in Chrome-Erweiterungen.
In diesem Video wird gezeigt, wie Sie in einer Quelldatei für die Erweiterung nach Text suchen.
Dateien in Seitenleiste automatisch anzeigen: Damit werden Dateien im Bereich Quellen > Seite ausgewählt, wenn Sie im Editor zwischen den Tabs wechseln.
In diesem Video wird gezeigt, wie bei aktivierter Option im Bereich Quellen Dateien im Navigationsbaum ausgewählt werden, wenn Sie zwischen den Tabs wechseln.
Mit JavaScript-Quellzuordnungen aktivieren können die Entwicklertools Quellen generierter oder reduzierter JavaScript-Dateien finden.
Wenn du Fokus auf Tabulatortaste verschieben aktivierst, wird der Fokus auf mit der Tabulatortaste innerhalb der Entwicklertools verschoben, anstatt im Editor ein Tabulatorzeichen einzufügen.
Die Entwicklertools müssen neu geladen werden.
In diesem Video sind zuerst Tabulatorzeichen zu sehen, die mit der Tabulatortaste eingefügt wurden. Wenn du dann diese Option aktivierst und die Entwicklertools neu lädst, wird der Fokus mit der Tabulatortaste verschoben.
Mit der Option Einzug erkennen wird die Einrückung auf den Einzug in der Quelldatei festgelegt, die im Editor geöffnet ist.
Die Entwicklertools müssen neu geladen werden.
In diesem Video wird zuerst der Standardeinzug von acht Leerzeichen gezeigt. Wenn Sie dann diese Option aktivieren, wird der Standardeinzug in Bezug auf die Quelldatei überschrieben.
Durch die automatische Vervollständigung werden praktische Vorschläge im Editor aktiviert.
Für dieses Video werden zuerst keine Vorschläge angezeigt. Wenn Sie diese Option aktivieren, werden im Editor Vorschläge zur Befehlsvervollständigung angezeigt.
Mit der Option Automatische Klammern schließen wird beim Eingeben einer öffnenden Klammer automatisch eine schließende Klammer oder ein schließendes Tag hinzugefügt.
In diesem Video wird gezeigt, wie Sie öffnende Klammern eingeben, bevor und nachdem Sie das automatische Schließen von Klammern aktiviert haben.
Mit der Option Bei Übereinstimmung von eckigen Klammern werden im Editor eckige und geschweifte Klammern oder Klammern ohne Paar unterstrichen und hellrot hervorgehoben.
Mit der Funktion Codefaltung können Sie im Editor Codeblöcke in geschweiften Klammern auf- und zuklappen.
Die Entwicklertools müssen neu geladen werden.
In diesem Video wird gezeigt, wie Codeblöcke zugeklappt werden, wenn Sie diese Option aktivieren.
Leerzeichen anzeigen zeigt Leerzeichen im Editor an.
Die Entwicklertools müssen neu geladen werden. Die Optionen haben folgende Möglichkeiten:
- All bezeichnet alle Leerzeichen als Punkte (
...
). Außerdem bezeichnet der Editor das Tab-Zeichen als eine Zeile (—
). - Nachfolgend hebt Leerzeichen am Zeilenende in hellrot hervor.
Variablenwerte beim Debugging inline anzeigen zeigt die Variablenwerte neben den Zuweisungsanweisungen an, während die Ausführung pausiert ist.
Im Bereich Quellen beim Auslösen eines Haltepunkts wird Quellen > Editor in der Zeile mit dem Haltepunkt geöffnet, für den die Ausführung pausiert wurde.
In diesem Video ist der Bereich Quellen zuerst unscharf zu sehen, wenn er an einem Haltepunkt pausiert wurde. Wenn Sie diese Option aktivieren, öffnet die Entwicklertools den Editor im Bereich Quellen und zeigt die Codezeile mit dem Haltepunkt an.
Automatisch optimierte, komprimierte Quellen von gedruckten Quellen sorgen dafür, dass diese Quellen lesbar sind.
Wenn schön gedruckt, zeigt der Editor möglicherweise eine einzelne lange Codezeile in mehreren Zeilen an, denen -
vorangestellt ist, um anzuzeigen, dass es sich um eine Zeilenkontinuität handelt.
Mit CSS-Quellzuordnungen aktivieren können die Entwicklertools die Quellen generierter CSS-Dateien finden (z. B. .scss
) und sie dir anzeigen.
Mit Scrollen über das Ende der Datei hinaus zulassen können Sie im Editor weiter als die letzte Zeile scrollen.
In diesem Video erfahren Sie, wie Sie über das Dateiende hinausscrollen, wenn Sie diese Option aktivieren.
Den Entwicklertools das Laden von Ressourcen wie Quellzuordnungen aus Remote-Dateipfaden erlauben. Aus Sicherheitsgründen standardmäßig deaktiviert.
Ist diese Option deaktiviert, werden in den Entwicklertools die folgenden Meldungen in der Console protokolliert:
Mit dem Standardeinzug können Sie die Anzahl der Leerzeichen auswählen, die mit der Tabulatortaste im Editor eingefügt werden.
In diesem Beispiel wird gezeigt, wie Sie den Standardeinzug auf acht Leerzeichen und anschließend auf ein Tabulatorzeichen festlegen.
Elemente
In diesem Abschnitt sind Optionen aufgeführt, mit denen das Steuerfeld Elemente angepasst werden kann.
Mit User-Agent-Shadow-DOM anzeigen werden Shadow-DOM-Knoten im DOM-Baum angezeigt.
Mit der Funktion Wortumbruch werden lange Zeilen im DOM-Baum getrennt und in der nächsten Zeile eingefügt.
Mit HTML-Kommentare anzeigen werden HTML-Kommentare im DOM-Baum angezeigt.
DOM-Knoten anzeigen, wenn der Mauszeiger auf das Element bewegt wird: Damit wird der entsprechende Knoten im DOM-Baum ausgewählt, wenn Sie im Prüfmodus den Mauszeiger auf ein Element im Darstellungsbereich bewegen.
In diesem Video wird zuerst gezeigt, dass im DOM-Baum keine DOM-Knoten ausgewählt sind. Wenn Sie dann diese Option aktivieren, werden im Steuerfeld Elemente die Knoten ausgewählt, wenn der Mauszeiger darauf bewegt wird.
Mit Detaillierte Kurzinfo zur Prüfung anzeigen wird die Kurzinfo im Darstellungsbereich im Prüfmodus angezeigt, wenn Sie den Mauszeiger auf ein Element bewegen.
Lineal einblenden, wenn der Mauszeiger auf die Elemente bewegt wird: Damit werden die Lineale im Darstellungsbereich angezeigt, wenn Sie den Mauszeiger auf Elemente im DOM-Baum bewegen.
Unter Kurzinfo zur CSS-Dokumentation anzeigen wird eine Kurzinfo mit einer kurzen Beschreibung angezeigt, wenn Sie den Mauszeiger im Bereich Stile auf eine Eigenschaft bewegen.
Über den Link Weitere Informationen gelangen Sie zu einer MDN-CSS-Referenz zur Property.
Netzwerk
In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie das Steuerfeld Netzwerk anpassen können. Die meisten Optionen sind mit den Einstellungen des Steuerfelds identisch.
Protokoll beibehalten ist mit Protokoll beibehalten im Bereich Netzwerk identisch. Speichert Anfragen beim Seitenaufbau.
Dieses Video zeigt zuerst das Anfrageprotokoll, das beim Aktualisieren der Seite aktualisiert wurde, und dann beibehalten wird, wenn Sie diese Option aktivieren.
Netzwerkprotokoll aufzeichnen ist identisch mit Netzwerkprotokoll aufzeichnen im Bereich Netzwerk. Startet oder beendet die Aufzeichnung von Anfragen im Netzwerkprotokoll.
Mit der Option Blockierung von Netzwerkanfragen aktivieren werden Anfragen blockiert, die mit Mustern auf der Leiste Blockierung der Netzwerkanfrage übereinstimmen.
In diesem Video ist zuerst zu sehen, dass die Anfragen nicht blockiert werden. Wenn Sie diese Option aktivieren, werden sie durch ein Muster in der Leiste Blockierung der Netzwerkanfrage blockiert.
Cache deaktivieren (während die Entwicklertools geöffnet sind) ist identisch mit Cache deaktivieren im Bereich Netzwerk. Deaktiviert den Browser-Cache.
Bei Ressourcentypen mit Farbcodierung werden Anfragen in der Spalte Waterfall des Netzwerkprotokolls je nach Typ in unterschiedlichen Farben hervorgehoben.
Netzwerkprotokoll nach Frame gruppieren ist identisch mit Nach Frames gruppieren im Bereich Netzwerk. Mit dieser Option werden von Inline-Frames initiierte Anfragen gruppiert.
Mit der Option Anzeigenblockierung auf dieser Website erzwingen werden erkannte Anzeigen auf der Seite blockiert, während die Entwicklertools geöffnet sind.
Leistung
In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie den Bereich Leistung anpassen können.
Flamechart-Mausradaktion: weist Ihrem Mausrad beim Navigieren im Flame-Diagramm eine Scroll- oder Zoomaktion zu.
Dieses Beispiel zeigt Aktionen mit dem Mausrad für das Scrollen und zum Zoomen für ein Flame-Diagramm im Bereich Leistung.
Console
In diesem Abschnitt finden Sie Optionen zum Anpassen der Console. Die meisten Optionen stimmen mit den Einstellungen der Konsole überein.
Mit der Option Netzwerknachrichten ausblenden werden Netzwerknachrichten in der Konsole ausgeblendet.
In diesem Video wird gezeigt, wie Netzwerknachrichten mit dieser Option in den -Einstellungen und in den Console-Einstellungen ausgeblendet werden.
Mit der Option Nur ausgewählten Kontext zeigt die Konsole Nachrichten nur für den ausgewählten Kontext an: oben, iFrame, Worker oder Erweiterung.
In diesem Video wird gezeigt, wie Sie diese Option in den -Einstellungen und unter Console > Einstellungen aktivieren und den Kontext in der Console auswählen können.
Durch Log XMLHttpRequests nimmt die Console XHR- und Abrufanfragen auf.
In diesem Video wird gezeigt, wie Sie diese Option in den -Einstellungen und Konsole > Einstellungen aktivieren und die XHR finished loading
-Nachrichten in der Konsole protokollieren können.
Mit der Option Zeitstempel anzeigen kann die Konsole Zeitstempel neben Nachrichten anzeigen.
Durch Automatische Vervollständigung aus dem Verlauf schlägt die Console während der Eingabe Befehle vor, die Sie bereits ausgeführt haben.
Dieselbe Option finden Sie unter Konsole > Einstellungen.
Wenn Sie die Option Automatisch vervollständigten Vorschlag bei Eingabe übernehmen auswählen, übernimmt die Konsole den ausgewählten Vorschlag aus dem Drop-down-Menü für die automatische Vervollständigung, wenn Sie die Eingabetaste drücken.
In diesem Video wird gezeigt, was passiert, wenn Sie vor und nach dem Aktivieren dieser Option die Eingabetaste drücken.
Mit der Option Ähnliche Nachrichten in der Konsole gruppieren werden ähnliche Nachrichten in der Konsole gruppiert.
Dieselbe Option finden Sie unter Konsole > Einstellungen.
Mit der Option CORS-Fehler in der Konsole anzeigen werden in der Konsole die protokollierten CORS-Fehler angezeigt.
Dieselbe Option finden Sie unter Konsole > Einstellungen.
Ehrgeizige Auswertung sorgt dafür, dass die Console während der Eingabe eines Befehls eine Vorschau einer Ausgabe anzeigt.
Dieselbe Option finden Sie unter Konsole > Einstellungen.
Dieses Video zeigt verschiedene Ausgabevorschauen.
Codeauswertung als Nutzeraktion behandeln: Damit werden alle Befehle, die Sie in der Console ausführen, in eine Nutzerinteraktion umgewandelt.
Mit anderen Worten: navigator.userActivation.isActive
wird bei der Auswertung auf true
gesetzt. Dieselbe Option finden Sie unter Konsole > Einstellungen.
In diesem Video wird das Bewertungsergebnis von navigator.userActivation.isActive
vor und nach dem Aktivieren dieser Option gezeigt.
Durch Automatisch maximieren von „console.trace()“-Nachrichten werden console.trace()
-Nachrichten in der Console maximiert, wenn sie protokolliert werden.
Mit der Option Protokoll bei der Navigation beibehalten wird in der Console bei jeder Navigation eine Navigated to
-Meldung protokolliert und die Protokolle auf allen Seiten werden gespeichert.
Dieselbe Option finden Sie unter Konsole > Einstellungen.
Erweiterung
In diesem Abschnitt sind Optionen aufgeführt, mit denen sich die Linkbehandlung für Erweiterungen der Chrome-Entwicklertools anpassen lässt.
Linkbehandlung legt eine Option zum Öffnen von Dateien fest, wenn Sie auf einen Link zu einer Quelldatei klicken, z. B. im Bereich Elemente > Stile.
Persistenz
In diesem Abschnitt findest du Optionen, mit denen du steuern kannst, wie die Entwicklertools deine Änderungen speichern.
Mit Lokale Überschreibungen aktivieren werden Änderungen, die du an den Quellen beim Seitenaufbau vornimmst, in den Entwicklertools beibehalten.
Weitere Informationen finden Sie unter Lokale Überschreibungen.
Debugger
In diesem Abschnitt sind Optionen aufgeführt, mit denen das Debugger-Verhalten gesteuert wird.
Unter JavaScript deaktivieren können Sie sehen, wie Ihre Webseite aussieht und funktioniert, wenn JavaScript deaktiviert ist.
Aktualisieren Sie die Seite, um zu sehen, ob und wie sie beim Laden von JavaScript abhängt.
Wenn JavaScript deaktiviert ist, zeigt Chrome das entsprechende -Symbol in der Adressleiste und in den Entwicklertools ein Warnsymbol neben Quellen an.
Mit Asynchrone Stacktraces deaktivieren wird die vollständige Geschichte des asynchronen Vorgangs im Aufrufstack ausgeblendet.
Standardmäßig versucht der Debugger, asynchrone Vorgänge zu verfolgen, wenn das von Ihnen verwendete Framework diese Funktion unterstützt.
Weitere Informationen finden Sie unter Asynchrone Stacktraces ansehen.
Global
In diesem Abschnitt sind Optionen aufgeführt, die in den Entwicklertools globale Auswirkungen haben.
Mit Entwicklertools für Pop-ups automatisch öffnen werden die Entwicklertools geöffnet, wenn du auf Links klickst, die neue Tabs öffnen. Das heißt, alle Links mit target=_blank
.
In diesem Video wird zuerst gezeigt, wie man *ohne* Entwicklertools auf einen Link klickt und einen neuen Tab öffnet. Wenn du dann diese Option aktivierst, wird ein neuer Tab *mit* Entwicklertools geöffnet.
Während der Eingabe suchen sorgt dafür, dass die Entwicklertools das erste Suchergebnis sehen, während du deine Suchanfrage eingibst. Wenn diese Option deaktiviert ist, werden Sie in den Entwicklertools nur dann zum Ergebnis weitergeleitet, wenn Sie die Eingabetaste drücken.
Dieses Video zeigt zuerst, wie die Entwicklertools bei der Eingabe einer Suchanfrage „springen“. Wenn Sie dann diese Option aktivieren, gelangen Sie über die Entwicklertools zum ersten Ergebnis, wenn Sie die Eingabetaste drücken.
Synchronisieren
In diesem Bereich können Sie die Synchronisierung von Einstellungen zwischen Geräten einrichten.
Mit Synchronisierung von Einstellungen aktivieren kannst du die Entwicklertools-Einstellungen auf mehreren Geräten synchronisieren.
Wenn Sie diese Einstellung verwenden möchten, aktivieren Sie zuerst die Chrome-Synchronisierung. Weitere Informationen finden Sie unter Synchronisierungseinstellungen.