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.

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

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“

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

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 minimierten Datei angezeigt.

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.

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.

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

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

Die Entwicklertools müssen neu geladen werden.

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

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

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.

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.
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 wird gezeigt, wie Sie bei aktivierter Option über das Ende der Datei hinaus scrollen.

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.
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.

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.

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.

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.

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

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

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.

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.

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.

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

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

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.

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.

Sie finden diese Option auch unter Konsole > Einstellungen.

In diesem Video sind verschiedene Ausgabevorschauen zu sehen.

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.

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.

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 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.

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.

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.