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

'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;
}

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: 'Horse', name: 'Henry', age: 43 },
    { animal: 'Dog', name: 'Fred', age: 13 },
    { animal: 'Cat', name: 'Frodo', age: 18 }
];

console.table(animals);

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();

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();

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’);

在console.log()中你可以使用%s来代表一个字符串 , %i 来代表数字， 以及 %c 来代表自定义的样式。

监测指定函数的调用与参数

在Chrome中可以监测指定函数的调用情况以及参数：

var func1 = function(x, y, z) {
};

这种方式能够让你实时监控到底啥参数被传入到了指定函数中。

Console中使用$进行元素查询

在Console中也可以使用来进行类似于querySelector那样基于CSS选择器的查询，(‘css-selector’) 会返回满足匹配的第一个元素，而$$(‘css-selector’) 会返回全部匹配元素。注意，如果你会多次使用到元素，那么别忘了将它们存入变量中。

Postman

很多人习惯用Postman进行API调试或者发起Ajax请求，不过别忘了你浏览器自带的也能做这个，并且你也不需要担心啥认证啊这些，因为Cookie都是自带帮你传送的，这些只要在network这个tab里就能进行，大概这样子：

DOM变化检测

DOM有时候还是很操蛋的，有时候压根不知道啥时候就变了，不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你，你可以监测属性变化等等：

 以上就是关于十几个 实用的 JavaScript 调试小技巧图文代码详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！