Einstellungen

Sofia Emelianova
Sofia Emelianova

Konfigurieren Sie das Aussehen und Verhalten der Entwicklertools und ihrer Bereiche über Einstellungen. Einstellungen > Einstellungen. 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.

Auf dem Tab „Einstellungen“ im Bereich „Darstellung“

Suchen Sie auf dieser Seite nach dem Namen der jeweiligen 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 zum Ende des Tabs Einstellungen und klicken Sie auf Standardeinstellungen wiederherstellen und aktualisieren.

Darstellung

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

Wirkt sich auf Elemente > Stile und Schwester-Tabs sowie 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

Aktualisiere die Entwicklertools, um diese Einstellung anzuwenden.

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

In diesem Video erfahren Sie, wie Sie mithilfe der entsprechenden Tastenkombinationen zwischen den Tabs wechseln können.

Quellen

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

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

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

Die Entwicklertools müssen neu geladen werden.

In diesem Video werden zuerst Tabulatorzeichen gezeigt, die mit der Tabulatortaste eingefügt werden. Wenn du dann diese Option aktivierst und die Entwicklertools neu lädst, verschiebt die Tabulatortaste den Fokus.

Die Entwicklertools müssen neu geladen werden.

Dieses Video zeigt zuerst den Standardeinzug von acht Leerzeichen. Wenn Sie diese Option aktivieren, wird die Standardeinzugung durch die der Quelldatei überschrieben.

Zu diesem Video gibt es keine Vorschläge. Wenn Sie diese Option aktivieren, werden im Editor Vorschläge zur Befehlsvervollständigung angezeigt.

In diesem Video wird gezeigt, wie sich öffnende Klammern vor und nach dem Aktivieren des automatischen Schließens von Klammern eingeben lassen.

Die Entwicklertools müssen neu geladen werden.

In diesem Video wird gezeigt, wie Sie Codeblocks nach dem Aktivieren dieser Option umklappen.

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

  • Alle gibt alle Leerzeichen als Punkte (...) an. Darüber hinaus gibt der Editor das Tabulatorzeichen als Zeile an ().
  • Nachgestellt: Leerzeichen am Zeilenende werden hellrot hervorgehoben.
Leerzeichen anzeigen: Ausgewählte Optionen: „Alle“ und „Nachgestellt“.
  • Keine
  • Alle (...)
  • Nach hinten

In diesem Video ist zuerst der Bereich Quellen zu sehen, wenn das Video 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.

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 im Format „Schöner Code“ angezeigt.
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.

In diesem Video erfahren Sie, wie Sie über das Ende einer Datei hinaus scrollen, wenn Sie diese Option aktivieren.

Wenn diese Option deaktiviert ist, werden Nachrichten in der Console in Form von Entwicklertools protokolliert, die in etwa so aussehen:

Eine Meldung in der Konsole mit dem Hinweis, dass das Laden aus einem Remote-Dateipfad aus Sicherheitsgründen verboten ist.
Standardeinzug: Deaktivieren der Überschreibungsoptionen und Ändern des Standardeinzugs von zwei Leerzeichen auf acht und anschließend auf die Tabulatortaste.
  • 2 Leerzeichen
  • 4 Leerzeichen
  • 8 Leerzeichen
  • Tabulatorzeichen

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

Elemente

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

In diesem Video ist zuerst zu sehen, 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.

Netzwerk

In diesem Abschnitt werden Optionen zum Anpassen des Steuerfelds Netzwerk aufgeführt. Die meisten Optionen sind mit den Einstellungen des Bereichs identisch.

Protokoll beibehalten im Bereich Netzwerk identisch. Speichert Anfragen beim Seitenaufbau.

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

Netzwerkprotokoll aufzeichnen im Bereich Netzwerk identisch. Startet oder beendet die Aufzeichnung von Anfragen im Netzwerkprotokoll.

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

Dieses Video zeigt zuerst, dass die Anfragen nicht blockiert werden. Wenn Sie diese Option aktivieren, werden sie dann durch ein Muster in der Leiste Blockierung von Netzwerkanfragen blockiert.

Nach Frames gruppieren im Bereich Netzwerk. Mit dieser Option werden Anfragen gruppiert, die von Inline-Frames initiiert wurden.

Das Netzwerkanfrageprotokoll mit Anfragen, gruppiert nach Inline-Frames.

erkannte Anzeigen auf der Seite blockiert, während die Entwicklertools geöffnet sind.

Eine anzeigenbezogene Netzwerkanfrage, die im Steuerfeld „Netzwerk“ mit aktiviertem Filter „Blockierte Anfragen“ angezeigt wird

Leistung

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

Mausradaktion für Flame-Diagramme: Die Aktion des Mausrads wird für das Flame-Diagramm vom Scrollen bis zum Zoomen geändert.
  • Scrollen
  • Zoom

Dieses Beispiel zeigt in einem Flame-Diagramm im Steuerfeld Leistung sowohl Scroll- als auch Zoom-Mausradaktionen.

Console

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

Ähnliche Optionen in der Console und in den Einstellungen.

In diesem Video wird gezeigt, wie Sie Netzwerknachrichten mit dieser Option in den Einstellungen.-Einstellungen und in den Konsoleneinstellungen ausblenden.

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.

In diesem Video wird gezeigt, wie Sie diese Option unter Einstellungen. Einstellungen und Konsole > Einstellungen aktivieren und XHR finished loading-Meldungen in der Konsole protokollieren.

Die gleiche Option findest du unter Console > Einstellungen.

In diesem Video sind verschiedene Ausgabevorschauen zu sehen.

Mit anderen Worten: navigator.userActivation.isActive wird nach der Auswertung auf true gesetzt. Die gleiche Option findest du unter Console > Einstellungen.

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

Erweiterung

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

Link-Verarbeitung: Auswählen einer Option zum Öffnen von Links.
  • 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 sind Optionen aufgeführt, mit denen gesteuert wird, wie die von dir vorgenommenen Änderungen in den Entwicklertools gespeichert werden.

Debugger

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

JavaScript deaktiviert ist.

Aktualisieren Sie die Seite, um zu prüfen, ob und wie sie beim Laden von JavaScript abhängig ist.

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

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

Standardmäßig versucht der Debugger, asynchrone Vorgänge zu verfolgen, wenn das von Ihnen verwendete Framework ein solches Tracing unterstützt.

Der asynchrone Vorgang im Aufrufstack.

Weitere Informationen finden Sie unter Asynchrone Stacktraces ansehen.

Global

In diesem Abschnitt werden Optionen aufgeführt, die globale Auswirkungen in den Entwicklertools 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.

Suche während der Eingabe: Während der Eingabe deiner Suchanfrage springt die Entwicklertools direkt zum ersten Suchergebnis. 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 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 der Einstellungen zwischen Geräten einrichten.