Jenseits von console.log () - steigen Sie Ihre Debugging -Fähigkeiten auf

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.

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

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:

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

Typumwandlung kann auch durchgeführt werden:

<code class="language-javascript">console.log('%ix %s developer', 10, 'console');
// 10x console developer</code>

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

<code class="language-javascript">console.log('%i', 12.34455241234324234); // 12</code>

Gruppenprotokoll

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

<code class="language-javascript">console.log('%cPay attention to me','color:firebrick;font-size:40px')</code>

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

<code class="language-javascript">const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);</code>

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:

<code class="language-javascript">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>

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

<code class="language-javascript">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>

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