Einstellungen

Sofia Emelianova
Sofia Emelianova

Sie können das Aussehen und Verhalten der Entwicklertools und ihrer Bereiche über Einstellungen. Einstellungen > Einstellungen konfigurieren. Auf diesem Tab sind sowohl allgemeine als auch spezifische Anpassungsoptionen für das Steuerfeld aufgeführt.

Wenn Sie die Einstellungen festlegen möchten, öffnen Sie Einstellungen. Einstellungen > Einstellungen und scrollen Sie zu einem der folgenden Abschnitte.

Im Bereich „Darstellung“ auf dem Tab „Einstellungen“.

Wenn Sie wissen möchten, welche Funktion die einzelnen Einstellungen haben, suchen Sie auf dieser Seite nach dem Namen der Einstellung und maximieren Sie die Beschreibung mit .

In dieser Referenz werden verschiedene Einstellungen mit den folgenden Symbolen gekennzeichnet:

  • Kästchen. Kästchen
  • Drop-down-Listen Drop-down-Menü.
  • Verworfen. Eingestellt

Wenn Sie die Standardeinstellungen wiederherstellen möchten, scrollen Sie auf dem Tab Einstellungen nach unten und klicken Sie auf Standardeinstellungen wiederherstellen und neu laden.

Darstellung

In diesem Abschnitt werden Optionen aufgeführt, mit denen Sie das Erscheinungsbild der Entwicklertools anpassen können.

Unter Designs Drop-down-Menü. können Sie ein Farbdesign für die DevTools-Benutzeroberfläche festlegen.

Design: Das DevTools-Design kann von der Systemeinstellung in ein dunkles oder helles Design geändert werden.
  • Systempräferenz
  • Leicht
  • Dunkel

Mit dem Bereichslayout Drop-down-Menü. können Sie Bereiche in Steuerfeldern anordnen.

Wirkt sich auf Elemente > Stile und zugehörige Tabs sowie auf den Bereich Quellen > Debugger aus. Bei der Option auto hängt das Layout von der Breite der Entwicklertools ab.

Bereichslayout: Ändern des Bereichslayouts des Elements von horizontal zu vertikal
  • horizontal
  • Branche
  • Automatisch

Mit Language Drop-down-Menü. wird die Sprache für die Benutzeroberfläche der Entwicklertools festgelegt.

Um diese Einstellung anzuwenden, aktualisieren Sie die Entwicklertools.

Sprache: Der Bereich „Einstellungen“ auf Chinesisch
  • Sprache der Browseroberfläche
  • Eine der Optionen für die Sprache, in diesem Beispiel „Chinese“

Kästchen. Wenn Sie Strg/Befehlstaste + 09 zum Wechseln der Bereiche aktivieren, können Sie die Bereiche über die Tastatur öffnen.

In diesem Video wird gezeigt, wie Sie mit den entsprechenden Tastenkombinationen zwischen den Tabs wechseln.

Kästchen. Wenn Sie Pausierten Status-Overlay deaktivieren auswählen, wird das Schaltflächen „Wiedergabe“ und „Überspringen“-Overlay Im Debugger angehalten im Viewport ausgeblendet, wenn die Codeausführung pausiert ist.

Kästchen. Wenn Sie Neuigkeiten nach jedem Update anzeigen auswählen, wird nach jedem Chrome-Update automatisch der Tab Neuigkeiten geöffnet.

Im Tab „Neuigkeiten“

Quellen

In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie den Bereich Quellen anpassen können.

Kästchen. Mit der Option In anonymen und Inhaltsskripten suchen können Sie auf dem Tab Suchen in allen geladenen JavaScript-Dateien suchen, einschließlich derjenigen in Chrome-Erweiterungen.

In diesem Video wird gezeigt, wie Sie in einer Erweiterungsquelle nach Text suchen.

Kästchen. Dateien in der Seitenleiste automatisch anzeigen: Wenn Sie im Editor zwischen Tabs wechseln, werden Dateien im Bereich Quellen > Seite ausgewählt.

In diesem Video wird gezeigt, wie beim Aktivieren dieser Option im Bereich Quellen Dateien im Navigationsbaum ausgewählt werden, wenn Sie zwischen Tabs wechseln.

Kästchen. Wenn Sie JavaScript-Quellzuordnungen aktivieren, können die Entwicklertools die Quellen generierter oder minimierter JavaScript-Dateien finden.

Im Bereich „Quellen“ wird in der Statusleiste ein Link zur minimierten Datei angezeigt.

Wenn Sie Fokus auf Tab-Verschiebung aktivieren auswählen, wird der Fokus in den Entwicklertools mit der Taste Tabulatortaste Tab verschoben, anstatt ein Tabulatorzeichen in den Editor einzufügen.Kästchen.

Die Entwicklertools müssen neu geladen werden.

In diesem Video werden zuerst Tabulatorzeichen gezeigt, die mit der Tabulatortaste eingefügt werden. Wenn Sie diese Option aktivieren und die Entwicklertools aktualisieren, wird der Fokus mit der Tabulatortaste verschoben.

Kästchen. Mit Einzug erkennen wird der Einzug auf den in der im Editor geöffneten Quelldatei festgelegt.

Die Entwicklertools müssen neu geladen werden.

In diesem Video wird zuerst die Standardeinzug von acht Leerzeichen gezeigt. Wenn Sie diese Option aktivieren, wird die Standardeinzugung durch die der Quelldatei überschrieben.

Kästchen. Die automatische Vervollständigung ermöglicht praktische Vorschläge im Editor.

Für dieses Video werden keine Vorschläge angezeigt. Wenn Sie diese Option aktivieren, werden im Editor Vorschläge zur Befehlsvervollständigung angezeigt.

Kästchen. Automatisch schließende Klammern: Wenn Sie eine öffnende Klammer eingeben, wird automatisch eine schließende Klammer oder ein schließendes Tag eingefügt.

In diesem Video wird gezeigt, wie Sie öffnende Klammern eingeben, bevor und nachdem Sie die automatische Schließung von Klammern aktiviert haben.

Kästchen. Klammerabgleich: Im Editor werden eckige Klammern, geschweifte Klammern oder Klammern ohne Paar hellrot unterstrichen und hervorgehoben.

Eine geschweifte Klammer ohne Paar wird rot unterstrichen.

Kästchen. Mit dem Minimieren von Code können Sie Codeblöcke in geschweiften Klammern im Editor minimieren und maximieren.

Die Entwicklertools müssen neu geladen werden.

In diesem Video wird gezeigt, wie Sie Codeblöcke minimieren, wenn Sie diese Option aktivieren.

Wenn Sie Leerzeichen anzeigen Drop-down-Menü. auswählen, werden Leerzeichen im Editor angezeigt.

Die Entwicklertools müssen neu geladen werden. Optionen haben folgende Funktionen:

  • Bei Alle werden alle Leerzeichen als Punkte (...) dargestellt. Außerdem wird im Editor das Tabulatorzeichen als Linie () dargestellt.
  • Bei Trailing werden Leerzeichen am Ende von Zeilen hellrot hervorgehoben.
Leerzeichen anzeigen: Ausgewählte Optionen: „Alle“ und „Nachgestellt“.
  • Keine
  • Alle (...)
  • Trailing

Kästchen. Variablenwerte beim Debuggen inline anzeigen: Die Variablenwerte werden neben den Zuweisungsausdrücken angezeigt, während die Ausführung pausiert ist.

Wenn der Debugger während der Funktionsausführung angehalten wird, werden Variablenwerte neben Zuweisungsausdrücken angezeigt.

Kästchen. Wenn Sie den Quellenbereich fokussieren, wenn ein Haltepunkt ausgelöst wird, wird Quellen > Editor in der Zeile mit dem Haltepunkt geöffnet, durch den die Ausführung pausiert wurde.

In diesem Video ist der Bereich Quellen zuerst unscharf, wenn die Wiedergabe an einem Haltepunkt pausiert wird. Wenn Sie diese Option aktivieren, öffnet DevTools im Bereich Quellen den Editor und zeigt die Codezeile mit dem Haltepunkt an.

Kästchen. Reduzierten Quelltext automatisch formatieren, damit er lesbar ist.

Bei Schönformatierung wird im Editor eine lange Codezeile möglicherweise auf mehreren Zeilen angezeigt, gefolgt von -, um anzugeben, dass es sich um eine Zeilenfortsetzung handelt.

Im Bereich „Quellen“ wird der Code in einer lesbaren Formatierung angezeigt.

Kästchen. Wenn Sie CSS-Quellzuordnungen aktivieren, können Sie in den Entwicklertools die Quellen der generierten CSS-Dateien, z. B. .scss, finden und anzeigen lassen.

Im Bereich „Quellen“ werden im Navigationsbaum im Abschnitt „Verfasst“ .scss-Dateien angezeigt. Im Bereich „Stile“ im Bereich „Elemente“ werden neben den CSS-Regeln Links zu .scss-Quellen angezeigt.

Kästchen. Wenn Sie Scrollen über das Ende der Datei hinaus zulassen aktivieren, können Sie im Editor weiter als bis zur letzten Zeile scrollen.

In diesem Video wird gezeigt, wie Sie bei aktivierter Option über das Ende der Datei hinaus scrollen.

Kästchen. DevTools dürfen Ressourcen wie Quellzuordnungen aus Remote-Dateipfaden laden. Die Haltepunkte sind aus Sicherheitsgründen standardmäßig deaktiviert.

Wenn die Funktion deaktiviert bleibt, werden in den Entwicklertools in der Console Meldungen wie die folgenden protokolliert:

In der Konsole wird eine Meldung angezeigt, dass das Laden über einen Remote-Dateipfad aus Sicherheitsgründen nicht zulässig ist.

Mit Standardeinzug Drop-down-Menü. können Sie die Anzahl der Leerzeichen festlegen, die mit der Taste Tabulatortaste Tabulator im Editor eingefügt werden.

Standardeinrückung: Die Optionen zum Überschreiben deaktivieren und die Standardeinzüge von zwei Leerzeichen auf acht und dann auf die Tabulatortaste ändern.
  • 2 Leerzeichen
  • 4 Leerzeichen
  • 8 Leerzeichen
  • Tabulatorzeichen

In diesem Beispiel wird gezeigt, wie Sie die Standardeinzug zuerst auf acht Leerzeichen und dann auf ein Tabulatorzeichen festlegen.

Elemente

In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie den Bereich Elemente anpassen können.

Kästchen. Wenn Sie User-Agent-Shadow DOM anzeigen auswählen, werden Shadow-DOM-Knoten im DOM-Baum angezeigt.

Im Bereich „Elemente“ werden Shadow-DOM-Knoten angezeigt.

Kästchen. Durch den Textumbruch werden lange Zeilen im DOM-Baum umgebrochen und in die nächste Zeile verschoben.

Im Bereich „Elemente“ werden lange Zeilen nach Worten umgebrochen und in die nächste Zeile verschoben.

Kästchen. HTML-Kommentare anzeigen: Hiermit werden HTML-Kommentare im DOM-Baum angezeigt.

Im Bereich „Elemente“ werden HTML-Kommentare angezeigt.

Kästchen. DOM-Knoten beim Hovering anzeigen: Wenn Sie im Prüfen-Inspect-Modus den Mauszeiger auf ein Element im Viewport bewegen, wird der entsprechende Knoten im DOM-Baum ausgewählt.

In diesem Video wird zuerst gezeigt, dass DOM-Knoten im DOM-Baum nicht ausgewählt sind. Wenn Sie diese Option aktivieren, werden die Knoten im Bereich Elemente beim Bewegen des Mauszeigers ausgewählt.

Wenn Sie Kästchen. Detaillierte Kurzinfo „Inspizieren“ anzeigen auswählen, wird die Kurzinfo im Prüfen-Inspect-Modus im Ansichtsbereich angezeigt, wenn Sie den Mauszeiger auf ein Element bewegen.

Die detaillierte Kurzinfo, die im Inspektionsmodus angezeigt wird.

Kästchen. Lineale anzeigen, wenn der Mauszeiger darauf bewegt wird: Die Lineale werden im Viewport angezeigt, wenn Sie den Mauszeiger auf Elemente in der DOM-Hierarchie bewegen.

Im Darstellungsbereich werden Lineale angezeigt.

Kästchen. Wenn Sie Kurzinfo zur CSS-Dokumentation anzeigen aktivieren, wird eine Kurzinfo angezeigt, wenn Sie im Bereich Stile den Mauszeiger auf eine Property bewegen.

Über den Link Weitere Informationen gelangen Sie zu einer MDN-CSS-Referenz für die Property.

Die Kurzinfo mit der Dokumentation zu einer CSS-Property.

Netzwerk

In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie den Bereich Netzwerk anpassen können. Die meisten Optionen sind mit denen in den Einstellungen des Steuerfelds identisch.

Kästchen. Protokoll beibehalten entspricht Protokoll beibehalten im Bereich Netzwerk. Ermöglicht das Einsparen von Anfragen bei Seitenaufbauvorgängen.

In diesem Video wird zuerst das Anfragenprotokoll beim Aktualisieren der Seite aktualisiert und dann bei Aktivierung dieser Option beibehalten.

Kästchen. Netzwerkprotokoll aufzeichnen entspricht Netzwerkprotokoll aufzeichnen Netzwerkprotokoll aufzeichnen im Bereich Netzwerk. Startet oder beendet die Aufzeichnung von Anfragen im Netzwerkprotokoll.

Die Schaltfläche „Netzwerkprotokoll aufzeichnen“ im Bereich „Netzwerk“.

Kästchen. Wenn Sie Blockierung der Netzwerkanfrage aktivieren auswählen, werden Anfragen blockiert, die mit Mustern im Bereich Blockierung der Netzwerkanfrage übereinstimmen.

In diesem Video wird zuerst gezeigt, dass die Anfragen nicht blockiert werden. Nachdem Sie diese Option aktiviert haben, werden sie durch ein Muster im Bereich Blockierung der Netzwerkanfrage blockiert.

Kästchen. Cache deaktivieren (während Entwicklertools geöffnet ist) entspricht der Option Cache deaktivieren im Bereich Netzwerk. Browser-Cache wird deaktiviert.

Das Kästchen „Cache deaktivieren“.

Kästchen. Generierung von HAR mit sensiblen Daten zulassen: Die Schaltfläche HAR exportieren erhält Optionen, mit denen Sie mit oder ohne sensible Daten (bereinigt) exportieren können.

Zu sensiblen Daten gehören die Daten in den Überschriften Cookie, Set-Cookie und Authorization.

Die beiden Optionen für die Schaltfläche „HAR exportieren“

Kästchen. Farbcodierte Ressourcentypen: Anfragen werden in der Spalte Abfolge des Netzwerklogs je nach Typ in verschiedenen Farben hervorgehoben.

Die abfolgebasierte Spalte auf dem Tab „Netzwerk“ ohne und mit Farbcodierung

Kästchen. Netzwerkprotokoll nach Frame gruppieren entspricht Nach Frames gruppieren im Bereich Netzwerk. Mit dieser Option werden Anfragen gruppiert, die von Inline-Frames initiiert wurden.

Das Netzwerkanfrageprotokoll mit Anfragen, die nach Inline-Frames gruppiert sind.

Kästchen. Wenn Sie Blockieren von Anzeigen auf dieser Website erzwingen auswählen, werden erkannte Anzeigen auf der Seite blockiert, während die Entwicklertools geöffnet sind.

Eine anzeigenbezogene Netzwerkanfrage, die im Bereich „Netzwerk“ angezeigt wird, wenn der Filter „Blockierte Anfragen“ aktiviert ist.

Leistung

In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie den Bereich Leistung anpassen können.

Mit der Mausradaktion für Flamecharts Drop-down-Menü. wird dem Mausrad eine Scroll- oder Zoomaktion zugewiesen, wenn Sie sich im Flammendiagramm bewegen.

Mausradaktion für Flame-Diagramme: Die Mausradaktion für das Flammendiagramm wurde von „Scrollen“ zu „Zoomen“ geändert.
  • Scrollen
  • Zoom

In diesem Beispiel wird sowohl das Scrollen als auch das Zoomen mit dem Mausrad in einem Flammendiagramm im Bereich Leistung gezeigt.

Console

In diesem Abschnitt sind Optionen aufgeführt, mit denen Sie die Console anpassen können. Die meisten Optionen sind mit denen in den Konsoleneinstellungen identisch.

Ähnliche Optionen in der Console und in den Einstellungen

Kästchen. Mit Netzwerk-Benachrichtigungen verbergen werden Netzwerk-Benachrichtigungen in der Konsole ausgeblendet.

In diesem Video wird gezeigt, wie Sie Netzwerknachrichten mit dieser Option sowohl in den Einstellungen. Einstellungen als auch in den Konsoleneinstellungen ausblenden.

Kästchen. Wenn Sie Nur ausgewählter Kontext auswählen, werden in der Console nur Meldungen für den ausgewählten Kontext angezeigt: „top“, „iframe“, „worker“ oder „extension“.

In diesem Video wird gezeigt, wie Sie diese Option sowohl unter Einstellungen. Einstellungen als auch unter Konsole > Einstellungen aktivieren und den Kontext in der Konsole auswählen.

Kästchen. Wenn Sie Log XMLHttpRequests auswählen, werden in der Console XHR- und Abrufanfragen protokolliert.

In diesem Video wird gezeigt, wie Sie diese Option sowohl in den Einstellungen.-Einstellungen als auch in der Konsole > Einstellungen aktivieren und die XHR finished loading-Nachrichten in der Konsole protokollieren.

Kästchen. Wenn Sie Zeitstempel anzeigen auswählen, werden in der Konsole Zeitstempel neben den Meldungen angezeigt.

In der Console aufgeführte Nachrichten mit Zeitstempeln

Kästchen. Wenn Sie Autocomplete aus dem Verlauf aktivieren, werden Ihnen in der Console während der Eingabe Befehle vorgeschlagen, die Sie zuvor ausgeführt haben.

Sie finden diese Option auch unter Konsole > Einstellungen.

Drop-down-Liste für die automatische Vervollständigung mit einer Befehlsoption aus dem Konsolenverlauf

Kästchen. Wenn Sie Automatisch vervollständigten Vorschlag bei Drücken von Eingabe akzeptieren auswählen, wird in der Console der ausgewählte Vorschlag aus dem Drop-down-Menü für die automatische Vervollständigung akzeptiert, wenn Sie die Eingabetaste drücken.

In diesem Video wird gezeigt, was passiert, wenn Sie vor und nach der Aktivierung dieser Option die Eingabetaste drücken.

Kästchen. Wenn Sie Ähnliche Nachrichten in der Console gruppieren auswählen, werden ähnliche Nachrichten in der Console gruppiert.

Sie finden diese Option auch unter Konsole > Einstellungen.

Ähnliche Nachrichten in der Console werden gruppiert.

Kästchen. Wenn Sie CORS-Fehler in der Konsole anzeigen auswählen, werden in der Konsole die protokollierten CORS-Fehler angezeigt.

Sie finden diese Option auch unter Konsole > Einstellungen.

In der Konsole werden CORS-Fehler angezeigt.

Kästchen. Bei der Eager-Bewertung wird in der Console eine Vorschau der Ausgabe angezeigt, während Sie einen Befehl eingeben.

Sie finden diese Option auch unter Konsole > Einstellungen.

In diesem Video sind verschiedene Ausgabevorschauen zu sehen.

Kästchen. Wenn Sie Codeevaluierung als Nutzeraktion behandeln auswählen, wird jeder Befehl, den Sie in der Console ausführen, als Nutzerinteraktion gewertet.

Mit anderen Worten: Bei der Auswertung wird navigator.userActivation.isActive auf true gesetzt. Sie finden diese Option auch unter Konsole > Einstellungen.

In diesem Video wird das Bewertungsergebnis von navigator.userActivation.isActive vor und nach der Aktivierung dieser Option verglichen.

Kästchen. Wenn Sie console.trace()-Nachrichten automatisch maximieren auswählen, werden in der Console maximierte console.trace()-Nachrichten angezeigt, wenn sie protokolliert werden.

Eine erweiterte console.trace()-Nachricht in der Konsole.

Kästchen. Wenn Sie Log bei Navigation beibehalten auswählen, protokolliert die Console bei jeder Navigation eine Navigated to-Nachricht und speichert die Protokolle auf allen Seiten.

Sie finden diese Option auch unter Konsole > Einstellungen.

Die Console zeigt Nachrichten vom Typ „Zugegriffen auf“ an und speichert Protokolle auf verschiedenen Seiten.

Erweiterung

In diesem Abschnitt werden Optionen aufgeführt, mit denen Sie die Linkbehandlung für Chrome DevTools-Erweiterungen anpassen können.

Link-Verarbeitung: Wählen Sie eine Option zum Öffnen von Links aus.
  • Automatisch. Dateien werden standardmäßig im Bereich Quellen geöffnet.
  • Beliebige Option, die über eine DevTools-Erweiterung hinzugefügt werden kann.

Persistenz

In diesem Abschnitt werden Optionen aufgeführt, mit denen Sie steuern können, wie die von Ihnen vorgenommenen Änderungen in den Entwicklertools gespeichert werden.

Kästchen. Wenn Sie lokale Überschreibungen aktivieren, werden Änderungen, die Sie an den Quellen vornehmen, in den Entwicklertools beibehalten, bis die Seite neu geladen wird.

Weitere Informationen finden Sie unter Lokale Überschreibungen.

Debugger

In diesem Abschnitt werden Optionen aufgeführt, mit denen das Verhalten des Debuggers gesteuert wird.

Kästchen. Mit JavaScript deaktivieren können Sie sehen, wie Ihre Webseite aussieht und sich verhält, wenn JavaScript deaktiviert ist.

Aktualisieren Sie die Seite, um zu sehen, ob und wie die Seite beim Laden von JavaScript abhängig ist.

Wenn JavaScript deaktiviert ist, zeigt Chrome das entsprechende Symbol JavaScript wurde deaktiviert. in der Adressleiste an und in den Entwicklertools wird neben Quellen ein Warnsymbol Warnung. angezeigt.

Ein Symbol in der Adressleiste und ein Warnsymbol neben „Quellen“ in den Entwicklertools.

Kästchen. Wenn Sie Async-Stacktraces deaktivieren, wird der vollständige Ablauf des asynchronen Vorgangs im Anrufstapel ausgeblendet.

Standardmäßig versucht der Debugger, asynchrone Vorgänge zu erfassen, wenn das von Ihnen verwendete Framework eine solche Erfassung unterstützt.

Der asynchrone Vorgang im Aufrufstack.

Weitere Informationen finden Sie unter Asynchrone Stack-Traces ansehen.

Global

In diesem Abschnitt sind Optionen aufgeführt, die globale Auswirkungen in DevTools haben.

In diesem Video wird zuerst gezeigt, wie Sie auf einen Link klicken und einen neuen Tab *ohne* die Entwicklertools öffnen. Wenn Sie diese Option aktivieren, wird ein neuer Tab *mit* den Entwicklertools geöffnet.

Kästchen. Suchen während der Eingabe: Wenn Sie diese Option aktivieren, springt DevTools beim Eingeben Ihrer Suchanfrage zum ersten Suchergebnis. Wenn diese Option deaktiviert ist, werden Sie in den Entwicklertools nur dann zum Ergebnis weitergeleitet, wenn Sie die Eingabetaste drücken.

In diesem Video wird zuerst gezeigt, wie die DevTools „springen“, wenn Sie eine Suchanfrage eingeben. Wenn Sie diese Option aktivieren, werden Sie in den DevTools zum ersten Ergebnis weitergeleitet, wenn Sie die Eingabetaste drücken.

Synchronisieren

In diesem Abschnitt können Sie die Synchronisierung von Einstellungen zwischen Geräten einrichten.

Kästchen. Wenn Sie Synchronisierungseinstellungen aktivieren auswählen, können Sie die DevTools-Einstellungen auf mehreren Geräten synchronisieren.

Wenn Sie diese Einstellung verwenden möchten, müssen Sie zuerst die Chrome-Synchronisierung aktivieren. Weitere Informationen finden Sie unter Synchronisierungseinstellungen.