Einstellungen

Sofia Emelianova
Sofia Emelianova

Unter Einstellungen. 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 > Einstellungen und scrollen Sie nach unten zu einem der nachfolgend beschriebenen Abschnitte.

Im Bereich "Darstellung" auf dem Tab "Einstellungen"

Informationen zur Funktionsweise der einzelnen Einstellungen finden Sie, wenn Sie auf dieser Seite nach dem Namen der Einstellung suchen und die zugehörige Beschreibung maximieren.

In dieser Referenz sind verschiedene Einstellungen mit den folgenden Symbolen angegeben:

  • Kästchen. Kästchen
  • Drop-down-Listen Drop-down-Menü.
  • Veraltet. 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 sind Optionen aufgeführt, mit denen Sie das Erscheinungsbild der Entwicklertools anpassen können.

Mit Designs Drop-down-Menü. wird ein Farbdesign für die Benutzeroberfläche der Entwicklertools festgelegt.

Design: Das Design der Entwicklertools wird von „Systemeinstellung“ zu „dunkel“ zu „hell“ geändert. – Systemeinstellung – Hell – Dunkel

Durch das Steuerfeldlayout Drop-down-Menü. 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.

Bereichslayout: Das Steuerfeld-Layout des Elements wird von horizontal zu vertikal geändert. - horizontal - vertikal - automatisch

Veraltet. Farbformat Drop-down-Menü. legt das Format der CSS-Farbwerte unter Elemente > Stile fest.

Die Entwicklertools wandeln alle gültigen Farbwerte automatisch in das ausgewählte Format um.

Farbformat: Farbformate im Bereich „Stile“ ändern
  • Wie erstellt
  • Hexadezimalwert: #dac0de
  • RGB: rgb(128 255 255)
  • HSL: hsl(300deg 80% 90%)

Sprache Drop-down-Menü. legt die Sprache für die Benutzeroberfläche der Entwicklertools fest.

Lade die Entwicklertools neu, um diese Einstellung anzuwenden.

Sprache: Der Bereich „Einstellungen“ auf Chinesisch. - Browsersprache – Eine der Sprachoptionen, in diesem Beispiel Chinesisch

Kästchen. Wenn Sie die Tastenkombination Strg/Cmd + 09 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.

Kästchen. Mit der Option Pausierter Status-Overlay deaktivieren wird das Overlay Pausiert in Debugger Schaltflächen für Wiedergabe und Überspringen. im Darstellungsbereich ausgeblendet, wenn die Codeausführung pausiert wird.

Kästchen. Mit der Option Neue Funktionen nach jedem Update anzeigen wird nach jedem Chrome-Update automatisch der Tab Neue Funktionen geöffnet.

Tab „Neue Funktionen“.

Quellen

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

Kästchen. 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.

Kästchen. 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.

Kästchen. Mit JavaScript-Quellzuordnungen aktivieren können die Entwicklertools Quellen generierter oder reduzierter JavaScript-Dateien finden.

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

Kästchen. Wenn du Fokus auf Tabulatortaste verschieben aktivierst, wird der Fokus auf Tabulatortaste. 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.

Kästchen. 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.

Kästchen. 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.

Kästchen. Mit der Option Bei Übereinstimmung von eckigen Klammern werden im Editor eckige und geschweifte Klammern oder Klammern ohne Paar unterstrichen und hellrot hervorgehoben.

Eine geschweifte Klammer ohne ein Paar, die rot unterstrichen ist.

Kästchen. 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 Drop-down-Menü. 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.
Leerzeichen anzeigen: Ausgewählte Optionen: „Alle“ und „Nachgestellt“. – Keine – Alle (`...`) – Nachgestellt

Kästchen. Variablenwerte beim Debugging inline anzeigen zeigt die Variablenwerte neben den Zuweisungsanweisungen an, während die Ausführung pausiert ist.

Der Debugger, der während der Ausführung der Funktion pausiert wurde, zeigt neben den Zuweisungsanweisungen Variablenwerte an.

Kästchen. 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.

Kästchen. Mit CSS-Quellzuordnungen aktivieren können die Entwicklertools die Quellen generierter CSS-Dateien finden (z. B. .scss) und sie dir anzeigen.

Im Bereich „Quellen“ werden CSS-Dateien im Abschnitt „Authored“ der Navigationsstruktur angezeigt. Im Bereich „Styles“ im Steuerfeld „Elemente“ werden neben den CSS-Regeln Links zu SCSs-Quellen angezeigt.

Kästchen. 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.

Kästchen. 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:

Eine Meldung in der Console, die besagt, dass das Laden aus einem Remote-Dateipfad aus Sicherheitsgründen verboten ist.

Mit dem Standardeinzug Drop-down-Menü. können Sie die Anzahl der Leerzeichen auswählen, die mit der Tabulatortaste. Tabulatortaste im Editor eingefügt werden.

Standardeinzug: Deaktivieren der Optionen zum Überschreiben und Ändern des Standardeinzugs von zwei Leerzeichen in acht und dann in die Tabulatortaste - 2 Leerzeichen - 4 Leerzeichen - 8 Leerzeichen - Tabulatorzeichen

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 der Bereich Elemente angepasst werden kann.

Kästchen. Mit User-Agent-Shadow-DOM anzeigen werden Shadow-DOM-Knoten im DOM-Baum angezeigt.

Im Steuerfeld „Elemente“ werden Schatten-DOM-Knoten angezeigt.

Kästchen. Mit der Funktion Wortumbruch werden lange Zeilen im DOM-Baum getrennt und in der nächsten Zeile eingefügt.

Im Steuerfeld Elemente werden lange Zeilen wortgetreu aufgeteilt und in der nächsten Zeile eingefügt.

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

Im Steuerfeld Elemente werden HTML-Kommentare angezeigt.

Kästchen. 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 Untersuchen. 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.

Kästchen. Mit Detaillierte Kurzinfo zur Prüfung anzeigen wird die Kurzinfo im Darstellungsbereich im Prüfmodus Untersuchen. angezeigt, wenn Sie den Mauszeiger auf ein Element bewegen.

Die detaillierte Kurzinfo, die im Prüfmodus angezeigt wird.

Kästchen. 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.

Lineale im Darstellungsbereich.

Kästchen. 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.

Die Kurzinfo mit der Dokumentation zu einer CSS-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.

Kästchen. 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.

Kästchen. Netzwerkprotokoll aufzeichnen ist identisch mit 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. 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.

Kästchen. Cache deaktivieren (während die Entwicklertools geöffnet sind) ist identisch mit Cache deaktivieren im Bereich Netzwerk. Deaktiviert den Browser-Cache.

Das Kontrollkästchen Cache deaktivieren.

Kästchen. Bei Ressourcentypen mit Farbcodierung werden Anfragen in der Spalte Waterfall des Netzwerkprotokolls je nach Typ in unterschiedlichen Farben hervorgehoben.

Die Spalte „Wasserfall“ auf dem Tab „Network“ (Netzwerk) ohne und mit Farbcodierung.

Kästchen. Netzwerkprotokoll nach Frame gruppieren ist identisch mit Nach Frames gruppieren im Bereich Netzwerk. Mit dieser Option werden von Inline-Frames initiierte Anfragen gruppiert.

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

Kästchen. Mit der Option Anzeigenblockierung auf dieser Website erzwingen werden erkannte Anzeigen auf der Seite blockiert, während die Entwicklertools geöffnet sind.

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

Leistung

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

Flamechart-Mausradaktion: Drop-down-Menü. weist Ihrem Mausrad beim Navigieren im Flame-Diagramm eine Scroll- oder Zoomaktion zu.

Mausradaktion für Flame-Diagramm: Mausradaktion für das Flammendiagramm von „Scrollen“ zu „Zoomen“ ändern - Scrollen – Zoomen

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.

Ähnliche Optionen in der Console und in den Einstellungen.

Kästchen. Mit der Option Netzwerknachrichten ausblenden werden Netzwerknachrichten in der Konsole ausgeblendet.

In diesem Video wird gezeigt, wie Netzwerknachrichten mit dieser Option in den Einstellungen.-Einstellungen und in den Console-Einstellungen ausgeblendet werden.

Kästchen. 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.-Einstellungen und unter Console > Einstellungen aktivieren und den Kontext in der Console auswählen können.

Kästchen. Durch Log XMLHttpRequests nimmt die Console XHR- und Abrufanfragen auf.

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

Kästchen. Mit der Option Zeitstempel anzeigen kann die Konsole Zeitstempel neben Nachrichten anzeigen.

Nachrichten mit Zeitstempeln, die in der Konsole aufgeführt sind.

Kästchen. 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.

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

Kästchen. 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.

Kästchen. Mit der Option Ähnliche Nachrichten in der Konsole gruppieren werden ähnliche Nachrichten in der Konsole gruppiert.

Dieselbe Option finden Sie unter Konsole > Einstellungen.

Ähnliche Nachrichten in der Konsole gruppiert.

Kästchen. 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.

In der Konsole werden CORS-Fehler angezeigt.

Kästchen. 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.

Kästchen. 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.

Kästchen. Durch Automatisch maximieren von „console.trace()“-Nachrichten werden console.trace()-Nachrichten in der Console maximiert, wenn sie protokolliert werden.

Eine maximierte „console.trace()“-Nachricht in der Console.

Kästchen. 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.

In der Konsole werden Meldungen angezeigt, zu denen navigiert wurde, und Protokolle auf verschiedenen Seiten gespeichert.

Erweiterung

In diesem Abschnitt sind Optionen aufgeführt, mit denen sich die Linkbehandlung für Erweiterungen der Chrome-Entwicklertools anpassen lässt.

Linkbehandlung Drop-down-Menü. legt eine Option zum Öffnen von Dateien fest, wenn Sie auf einen Link zu einer Quelldatei klicken, z. B. im Bereich Elemente > Stile.

Linkbehandlung: Auswählen einer Option zum Öffnen von Links - Automatisch. Dateien werden standardmäßig im Bereich **Quellen** geöffnet. – Beliebige Option, die über eine Entwicklertools-Erweiterung hinzugefügt werden kann.

Persistenz

In diesem Abschnitt findest du Optionen, mit denen du steuern kannst, wie die Entwicklertools deine Änderungen speichern.

Kästchen. 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.

Kästchen. Über 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 JavaScript wurde deaktiviert.-Symbol in der Adressleiste und die Entwicklertools das Warnsymbol Warnung. neben Quellen an. Ein Symbol in der Adressleiste und ein Warnsymbol neben „Quellen in den Entwicklertools“.

Kästchen. 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. Der asynchrone Vorgang im Aufrufstack. Weitere Informationen finden Sie unter Asynchrone Stacktraces ansehen.

Global

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

Kästchen. 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 Sie ohne Entwicklertools auf einen Link klicken und einen neuen Tab öffnen. Wenn Sie diese Option aktivieren, wird ein neuer Tab mit den Entwicklertools geöffnet.

Kästchen. 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.

Kästchen. Mit der Option 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.