Ausführliche Erklärung von mehr als einem Dutzend praktischer JavaScript-Debugging-Tipps mit Bildern und Codes-js-Tutorial-php.cn

Ausführliche Erklärung von mehr als einem Dutzend praktischer JavaScript-Debugging-Tipps mit Bildern und Codes

黄舟

Freigeben： 2017-03-07 14:46:04

Original

1149 Leute haben es durchsucht

'debugger;'

Neben console.log ist debugger ein weiteres Tool, das ich zum schnellen Debuggen mag. Nachdem Chrome den Debugger zum Code hinzugefügt hat, wird er automatisch eingefügt stoppt irgendwo, ähnlich wie Haltepunkte in C oder Java. Sie können diese Debugging-Anweisung auch in einige bedingte Steuerelemente einfügen, z. B.:

if (thisThing) {
    debugger;
}

Nach dem Login kopieren

Objekte in Tabellenform anzeigen

Manchmal müssen wir die detaillierten Informationen einiger komplexer Objekte sehen Die Methode besteht darin, console.log zu verwenden und es in einer Liste anzuzeigen und zum Durchsuchen nach oben und unten zu scrollen. Es scheint jedoch besser, console.table zu verwenden, um es als Liste anzuzeigen. Es sieht wahrscheinlich so aus:

var animals = [
    { animal: &#39;Horse&#39;, name: &#39;Henry&#39;, age: 43 },
    { animal: &#39;Dog&#39;, name: &#39;Fred&#39;, age: 13 },
    { animal: &#39;Cat&#39;, name: &#39;Frodo&#39;, age: 18 }
];

console.table(animals);

Nach dem Login kopieren

Test mit mehreren Bildschirmgrößen

Eine sehr attraktive Funktion von Chrome ist die Möglichkeit, die Größen verschiedener Geräte zu simulieren. Klicken Sie im Chrome-Inspektor auf die Schaltfläche toggle device mode, und Sie können dann unter verschiedenen Gerätebildschirmgrößen debuggen:

Schnell ein DOM-Element in der Konsole auswählen

Das Auswählen eines DOM-Elements im Elementauswahlfeld und die anschließende Verwendung des Elements in der Konsole ist ebenfalls ein sehr häufiger Vorgang, der von Chrome Inspector zwischengespeichert wird Sie können die letzten 5 DOM-Elemente in ihrem Verlauf schnell mit Methoden verknüpfen, die denen von  in der Shell ähneln. In der folgenden Liste gibt es beispielsweise die Elemente „item-4“, „item-3“, „item-2“, „item-1“, „item-0“. Sie können es wie folgt verwenden:

Rufen Sie den Anrufverfolgungsdatensatz einer bestimmten Funktion ab

console.traceDas JavaScript-Framework erleichtert unsere Entwicklung erheblich, bringt aber auch eine große Anzahl vordefinierter Funktionen mit, z. B. das Erstellen Anzeigen, Bindungsereignisse usw., sodass es für uns nicht einfach ist, den Aufrufprozess unserer benutzerdefinierten Funktionen zu verfolgen. Obwohl JavaScript keine sehr strenge Sprache ist, kann es manchmal schwierig sein, herauszufinden, was vor sich geht, insbesondere wenn Sie den Code anderer Leute überprüfen müssen. Hier kommt ins Spiel. Es kann Ihnen dabei helfen, Funktionsaufrufe zu verfolgen. Im folgenden Code müssen wir beispielsweise den Aufrufprozess von funcZ im Autoobjekt verfolgen:

var car;

var func1 = function() {
func2();
}

var func2 = function() {
func4();
}

var func3 = function() {

}

var func4 = function() {
car = new Car();
car.funcX();
}

var Car = function() {
this.brand = ‘volvo’;
this.color = ‘red’;

this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}

this.funcZ = function() {
console.trace(‘trace car’)
}
}

func1();

Nach dem Login kopieren

Hier können Sie deutlich sehen, dass func1 func2 und dann func4 aufruft und func4 Car erstellt . Die Instanz ruft dann car.funcX auf.

Komprimierten Code formatieren

Manchmal stoßen wir auf unerklärliche Probleme in der Produktionsumgebung und vergessen dann, die Quellkarten auf diesem Server abzulegen oder mir die Quellkarten anderer Leute anzusehen Auf der Website sah ich eine Menge Code, von dem ich nicht wusste, was ich sagen sollte, wie im Bild unten. Chrome stellt uns ein sehr benutzerfreundliches Antikomprimierungstool zur Verfügung, um die Lesbarkeit des Codes zu verbessern. Es kann wie folgt verwendet werden:

Debugging-Funktionen schnell finden

Wenn wir einer Funktion einen Haltepunkt hinzufügen möchten, gehen wir normalerweise folgendermaßen vor:

Suchen Sie die angegebene Zeile im Inspektor und fügen Sie dann einen Haltepunkt hinzu
Fügen Sie einen Debugger-Aufruf im Skript hinzu

debug(funcName)Allerdings gibt es bei beiden Methoden ein kleines Problem, das heißt, Sie müssen zur entsprechenden Skriptdatei gehen und dann die entsprechende Zeile finden, damit es schwieriger wird. Hier ist eine relativ schnelle Methode: Verwenden Sie in der Konsole und das Skript stoppt automatisch dort, wo die entsprechende Funktion angegeben ist. Ein Fehler dieser Methode besteht darin, dass sie nicht bei einer privaten oder anonymen Funktion anhalten kann und daher von Zeit zu Zeit variiert werden muss:

var func1 = function() {
func2();
};

var Car = function() {
this.funcX = function() {
this.funcY();
}

this.funcY = function() {
this.funcZ();
}
}

var car = new Car();

Nach dem Login kopieren

Unverwandte verbieten Skripte werden nicht ausgeführt

Wenn wir moderne Webseiten entwickeln, verwenden wir einige Frameworks oder Bibliotheken von Drittanbietern. Fast alle wurden getestet und weisen relativ wenige Fehler auf. Wenn wir jedoch unsere eigenen Skripte debuggen, springen wir möglicherweise versehentlich in diese Dateien, was zusätzliche Debugging-Aufgaben verursacht. Die Lösung besteht darin, die Ausführung dieser Skripte zu verhindern, die kein Debuggen erfordern. Weitere Informationen finden Sie in diesem Artikel: Javascript-Debugging-with-Black-Box. <🎜>

在较复杂的调试情况下发现关键元素

在一些复杂的调试环境下我们可能要输出很多行的内容，这时候我们习惯性的会用console.log, console.debug, console.warn, console.info, console.error这些来进行区分，然后就可以在Inspector中进行过滤。不过有时候我们还是希望能够自定义显示样式，你可以用CSS来定义个性化的信息样式：

console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}

console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}

console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);

Nach dem Login kopieren