Zu Beginn: Eigentlich habe ich darüber nachgedacht, ob ich dieses Ding bereits schreiben sollte, weil es nicht schwierig ist, aber warum fragen so viele Leute, dass sie nicht fragen, wie sie die Konsole benutzen sollen, aber sie wissen nicht, was die Konsole tun kann. Sie wissen auch, dass es Konsole gibt .log und andere Dinge, aber sie wissen nicht, warum sie eine so lange Zeichenfolge verwenden, anstatt die Ausgabe von Informationen zu geben. In ihren Augen reicht Alarm aus. OK, ich gebe zu, dass ich mich ein wenig beschwert habe, aber ich habe nur vor, das Grundwissen über Debugging in dieser Serie vorzustellen, und es wird nicht zu tief beinhalten, da eingehende Dinge mit JS-Wissen kombiniert werden. Wenn Sie nicht das gleiche Niveau an JS erreicht haben, auch wenn ich Ihnen beibringe, wie man Fehler debuggiert, einige Plug-Ins usw. knackt, wissen Sie nicht, was ich tue. Mein Ziel ist es, Sie über die Konsole zu informieren und mit dem Debuggen zu beginnen. Sie müssen selbst die Straße vor sich gehen.
Natürlich, bitte schweben oder beschweren. .
JS -Debug -Serienverzeichnis:
Tatsächlich wissen die Leute von Webentwicklung dies, ob es sich um das Front-End oder das Back-End handelt, aber viele Menschen konzentrieren sich nur auf die HTML-Anzeige und die CSS-Änderung und haben die Konsole überhaupt nicht verwendet.
Vielleicht wissen einige der Neulinge nicht, dass es dieses Ding gibt. .
Es gibt viele Informationen über dieses Ding online, aber es geht nicht um Debugging, sondern führt nur vor, wie man es benutzt. .
Egal, ob es sich um Chrome Firefox -IE (8 oder über Version) oder 360 Quick Browser Sogou Browser usw., drücken Sie einfach F12, um die Konsole zu öffnen.
Unser Artikel verwendet Chrome als Beispiel, um es zu erklären, aber es liegt nicht daran, dass ich Chrome mag. . Jeder hat seine eigenen Vorlieben. .
PS: FF In der Vergangenheit war es alles Firebug, aber jetzt ist es einheimisch.
Jetzt klicken wir auf F12, um die Konsole zu öffnen und auf das Konsolenelement zu klicken.
Sie können meinen Avatar und ein paar Textzeilen sehen, aber es gibt immer noch einige Zeilen von Dingen unten. Wir werden es vorerst ignorieren und später erklären.
Tatsächlich sind für F12 der genaueste Name Entwicklerwerkzeuge, und die Konsole ist die Konsole.
PS: Als grundlegendes Tutorial werde ich nur das Debuggen von Konsolen und Quellen vorstellen. Bitte verstehen Sie andere Funktionen selbst. .
Klicken Sie mit der rechten Maustaste auf das Menü "Clear Console" oder geben Sie Clear () ein und drücken Sie die Eingabetaste, um den Konsoleninhalt zu löschen.
Machen wir den ersten Schritt, um Informationen mit Console.log auszugeben.
Geben Sie Console.log ("hehe ..") und console.log ("hehe ..", "haha ..") ein und drücken Sie die Eingabetaste, um das Ausgabeergebnis auf der Konsole zu sehen.
Tatsächlich gibt es nur Informationen aus, es ist sehr einfach. Verwenden Sie es anstelle von Alarm und Dokument. Schreiben Sie es, um zu debuggen, und Ihre Arbeit wird sehr einfach.
Zum Beispiel einen Schleifencode debuggen, aber es gibt Dutzende oder sogar Hunderte von Elementen im Array. Wenn Sie alarmieren, werden Sie verrückt.
document.write ist auch nicht schlecht, aber für die Objektausgabe können Sie nur Dinge wie [Objektobjekt] sehen.
Dies ist ein echtes Problem, dem viele neue Freunde begegnen.
Wenn Sie Console.log anstelle von Alert document.write verwenden, um Objektinformationen auszugeben, können Sie dieses Objekt in der Konsole erweitern, um bestimmte Informationen anzuzeigen.
Zum Beispiel:
var arr = [{name: "nima", Alter: 22}, {Name: "nima", Alter: 20}]; für (var i = 0; i <arr.length; i ++) {console.log (arr [i]);};};};};};Sie können die Objektinformationen direkt sehen, ohne [Objektobjekt] anzuzeigen, was uns verwirrt macht.
Haben Sie plötzlich das Gefühl, dass die Konsole explodiert wird?
Tatsächlich ist dies nur die Spitze seines Eisbergs. Ich werde mein Bestes geben, um Ihnen einige seiner Vorteile zu zeigen.
Fahren Sie gerade mit den Schritten fort, jetzt geben wir direkt die ARR ein und drücken dann die Eingabetaste.
Ist es noch uneingeschränkter? Jetzt können Sie direkt auf Objekt klicken, um die Objekte in diesem Array zum Anzeigen zu erweitern und sogar die Ausgabe des Schleifens zu sparen.
Dies ist der Charme der Konsole, und dies ist einfach das grundlegendste Merkmal.
Lassen Sie uns zunächst verstehen, welche Methoden unter dem Konsolenobjekt stehen, die wir verwenden können.
Geben Sie die Konsole ein und drücken Sie die Eingabetaste, um das Objekt zu erweitern.
Sie können einige dunkle und helle Farben sehen. Dunkle Farben sind Methoden, die wir direkt aufrufen können. Lichtfarben repräsentieren Standardattribute oder -methoden, und es müssen sich keine Sorgen um das Display machen. Ich werde später darüber sprechen, wenn Sie die Chance haben.
Tatsächlich sind die einzigen häufigsten Log Dir. Andere werden selten verwendet und werden nur beim fortgeschrittenen Debuggen verwendet.
Hilfseigenschaften wie Gruppen und Tabelle sind je nach Ihrer Präferenz verfügbar oder nicht. Ich mag es nicht sehr.
Schauen wir uns Schritt für Schritt an. Beginnen wir mit Log Dir, und der größte Teil des Debuggens hängt von ihnen ab.
PS: Eigentlich hätte ich Ihnen die offizielle Dokumentation geben sollen, aber Google konnte sie in letzter Zeit nicht öffnen, damit ich die Funktionen jeder Methode auf Baidu überprüfen kann.
Ich habe eine chinesische Version gefunden, es ist nicht schlecht. Bitte lesen Sie zuerst "Konsolenobjekt".
Machen wir ein paar Nachklassenübungen: (Öffnen Sie Baidu zuerst und öffnen Sie dann die Konsole)
1 Elementinformationen mit ID KW1 in der Konsole anzeigen
2 Verwenden Sie dann die Methode der Konsole.dir, um die Informationen des KW1 -Elements anzuzeigen