Browser -Entwickler -Tools sind weit mehr als nur <code>console.log(), und ihre leistungsstarken Funktionen k?nnen die Entwicklungseffizienz erheblich verbessern. In diesem Artikel werden einige weniger bekannte praktische Tipps untersucht, mit denen Sie Ihren Workflow optimieren k?nnen.

Kernpunkte

• Verwenden Sie den Echtzeitausdruck der Konsole, um Skript?nderungen in Echtzeit zu überwachen, ohne nach spezifischen ?nderungen im Protokoll zu suchen.
• Verwenden Sie die Konsole, um das aktuelle Dokument direkt zu betreiben, verwenden Sie <code>$_, um das Ergebnis des letzten Befehls zu erhalten, und <code><code>, um auf den Stapel der geprüften Elemente zuzugreifen.
• Wechseln Sie von der Konsole zum "Quellen" -Panel für eine leistungsst?rkere Skriptbearbeitungsumgebung, die Multi-Line-Skript- und komplexe Interaktionen mit Webseiten unterstützt.
• Verwenden Sie Verknüpfungsschlüssel (z. B. STRG Shift P), um über das Befehlsmenü schnell auf Entwickler -Tools zuzugreifen, um den Debugging -Prozess zu vereinfachen.
• nahtlose Integration von Debugging und Entwicklung durch Einrichten von Arbeitsbereichen und Synchronisierungs?nderungen in Browser -Entwickler -Tools direkt zum Quellcode.
• Integrieren Sie den Visual Studio-Code mit Browser-Entwickler-Tools über die Devtools für die VS-Code-Erweiterung, wobei leistungsstarke Bearbeitungsfunktionen und Debugging von Echtzeit-Site kombiniert werden.

Aus der Komfortzone ausbrechen

Entwickler werden h?ufig an feste Workflows verwendet, die die Effizienzgewinne einschr?nken k?nnen. Ein allgemeiner Vorgang ist: Schreiben Sie Code in den Editor, speichern Sie ihn und wechseln Sie zum Laden zum Browser und verwenden Sie dann Entwickler -Tools, um die CSS anzupassen, Gr??en- und mobile Simulationstests durchzuführen. Debugging durch Hinzufügen von <code>console.log() -Antagen, eng mit Zeilennummern und Debugging -Informationen.

Diese Methode ist ineffizient und verwirrend. Die Browser -Tools sind mit Debugging -Informationen gefüllt, die nicht zum Endprodukt geh?ren, was es anderen nicht nur schwer macht, den Entwicklern der Anf?nger zu verstehen, sondern auch Probleme zu verursachen. Wir haben nur einen kleinen Teil der Funktionen des Entwickler -Tools verwendet und die M?glichkeit verpasst, die Effizienz zu verbessern.

In diesem Artikel werden einige Tools für Chrombrowser -Entwickler und praktische Funktionen im Visual Studio -Code eingeführt. Lassen Sie uns zun?chst in die Konsole eintauchen.

Fortgeschrittene Konsolenkenntnisse

Wir sind es gewohnt, dem Code zum Debuggen <code>console.log(thing) hinzuzufügen. Dies ist jedoch manchmal ineffizient und die ursprünglichen Formatdaten sind schwer zu verstehen.

Die folgenden Spitzen k?nnen auf Github erhalten und im Browser betrachtet werden, in dem die Entwicklerwerkzeuge ge?ffnet werden. (Oder schauen Sie sich die Online -Demo in CodePen an)

Fügen Sie dem Protokoll zuerst lockige Klammern hinzu, um nicht nur den variablen Wert zu drucken, sondern auch den variablen Namen für eine einfache Verfolgung anzeigen.

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

Formatprotokoll

Verwenden eines Formatspezifikators Beginnend mit einem prozentualen Vorzeichen k?nnen bestimmte Werte in verschiedenen Formaten aufgezeichnet werden:

• <code>%s: Aufzeichnung als Zeichenfolge
• <code>%i oder <code>%d: Aufzeichnung als Ganzzahl
• <code>%f: Aufzeichnung als schwimmende Punktzahl
• <code>%o: Aufzeichnung als erweiterbares DOM -Element
• <code>%O: Als erweiterbares JavaScript -Objektdatensatz

Diese Spezifizierer k?nnen in einer Mischung aus der Reihenfolge von Ersatz und Parameter verwendet werden:

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

Typumwandlung kann auch durchgeführt werden:

console.log('%ix %s developer', 10, 'console');
// 10x console developer

<code>%c Spezifizierer erm?glicht CSS-Styled-Protokollnachrichten:

console.log('%i', 12.34455241234324234); // 12

Gruppenprotokoll

Gruppenprotokolle mit <code>console.group() für einfache Erweiterung und Zusammenbruch:

console.log('%cPay attention to me','color:firebrick;font-size:40px')

Sie k?nnen Gruppen nisten und <code>console.groupCollapsed() verwenden, ohne die Gruppen standardm??ig zu erweitern:

const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);

log -filtering

Verwenden von <code>console.info(), <code>console.error() und <code>console.warn() k?nnen Sie die Seitenleiste für die Konsole oder den Level -Selektor verwenden, um Nachrichten zu filtern, um das Finden spezifischer Informationen in einer Vielzahl von Protokollen zu erleichtern.

Andere nützliche Konsolenmethoden

<code>console.count() und <code>console.countReset() Methoden k?nnen die Anzahl der Anzahl einer Methodenaufruf oder Funktionsausführung z?hlen:

const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);

<code>console.time() Methoden k?nnen die Skriptausführungszeit messen:

console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1

<code>console.dir() Zeigt Dateninhalt und Typ an, <code>console.dirxml() die XML -Darstellung des Knotens an und <code>console.table() JSON -Daten in einer sortierbaren Tabelle.

Ersetzen Sie Protokolle durch Echtzeitausdrücke

<code>console.log() überwachung der h?ufig ?ndernden Werte ist ineffizient. Echtzeitausdrücke k?nnen dieses Problem l?sen. Aktivieren Sie die Eye -Taste in den Entwickler -Tools und geben Sie einen gültigen JavaScript -Ausdruck ein, dessen Wert über der Konsole angezeigt wird.

Geben Sie beispielsweise <code>document.activeElement ein und der Ausdruck zeigt das aktuell aktivierte Element auf der Seite an.

Echtzeitausdrücke sind langlebig und haben nichts mit einem bestimmten Dom?nennamen oder einer bestimmten Site zu tun. Es sollte nach Abschluss des Debuggens entfernt werden, um Fehler zu vermeiden.

Echtzeitausdrücke sind ideal für die überwachung von Skriptdaten?nderungen, insbesondere für h?ufig ?ndernde Werte wie Mausposition.

Verwenden Sie die Konsole, um das aktuelle Dokument zu betreiben

Console ist eine Reply, mit der das Schreiben und Ausführen von JavaScript und die Verwendung der automatischen Funktionsfunktion die verfügbaren Methoden und Eigenschaften des aktuellen Dokuments verstehen k?nnen.

Die Konsole bietet auch viele bequeme Methoden und Verknüpfungen:

• <code>$_: Speichern Sie das Ergebnis des letzten Befehls.
• <code><code> zu
: Der zuletzt überprüfte Element -Stapel.
• <code>$() <code>$$() und <code>document.querySelector(): abgekürzte <code>document.querySelectorAll() bzw.
.
• <code>$x()
: Verwenden Sie XPath, um das DOM -Element auszuw?hlen.
• <code>copy()
: Kopieren Sie den Inhalt in die Zwischenablage.
• <code>clear()
: L?schen Sie die Konsole.
• <code>getEventListeners(node)
: Listen Sie alle Ereignish?rer für Knoten auf.
• <code>monitorEvents(node, events)
: überwachen und Aufzeichnung von Ereignissen auf Knoten.
• <code>monitor(method)
: Erstellt ein Protokollelement beim Aufrufen einer Methode.

von der Konsole zum Quellenpanel

Die Einzelumgebung der Konsole begrenzt das Schreiben von Code. Multi-Line-Skripte k?nnen mithilfe der SHIFT ENGERT geschrieben werden. Das Quellenbereich bietet eine leistungsstarke Umgebung zur Bearbeitungsbearbeitungsumgebung.

Entwickler -Tools -Befehlsmenü

Das Befehlsmenü (Strg Shift P oder CMD Shift P) erm?glicht den Zugriff auf alle Entwickler -Toolfunktionen über die Tastatur.

Code -Snippet

Code -Snippets sind eine bequeme M?glichkeit, Skripte zu sparen, die mit Dokumenten interagieren. Sie haben bequeme M?glichkeiten, um auf die aktuell offenen Browser -Dokumente und -Konsolen zuzugreifen.

Abdeckung

überschreibung ist eine lokale Kopie der Remote -Datei. Browser -Entwickler -Tools ersetzen Remotedateien durch lokale Kopien, wodurch das Bearbeiten von Website -Style -Bl?ttern einfacher oder Leistungstests durchgeführt werden kann.

Arbeitsbereich: Synchronentwicklungs- und Debugging -Aufgaben

Der Arbeitsbereich erm?glicht das Hinzufügen von Projektordnern zu den Entwickler -Tools, der Synchronisierung der Entwickler -Tools und des Editors.

devtools für vs Code -Erweiterung

Die DevTools für VS-Code-Erweiterung integriert den Visual Studio-Code mit Browser-Entwickler-Tools, wobei leistungsstarke Bearbeitungsfunktionen und Debugging von Echtzeit-Site kombiniert werden.

N?chste Schritte

Es wird empfohlen, das Debugging des Haltepunkts zu lernen, was eine effektivere Debugging -Methode ist.

JavaScript Debugging -F?higkeiten FAQ

(Der FAQs-Teil des Originaltextes wird hier weggelassen, da dieser Teil des Inhalts wenig mit dem Hauptthema des Artikels zu tun hat und lang ist. Wenn er also den Pseudo-Oriental-Artikel beibeh?lt, wird dies überflüssig.)

Das obige ist der detaillierte Inhalt vonJenseits von console.log () - steigen Sie Ihre Debugging -F?higkeiten auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!