js-Debugging-Serie Konsolen-Befehlszeilen-API-Nutzung method_javascript Fähigkeiten

Öffnen Sie zuerst Baidu und drücken Sie dann F12. Wenn es sich nach dem Öffnen nicht um das Konsolenelement handelt, klicken Sie auf das Konsolenelement, da wir in der Konsole arbeiten möchten. .
Siehe Folgendes:

Okay, löschen wir zuerst den Inhalt. Sie können mit der rechten Maustaste klicken und das Menü „Konsole löschen“ auswählen oder „clear()“ eingeben.
Als nächstes geben wir document.getElementById('kw1'); ein und drücken die Eingabetaste. Sie können die Elementinformationen mit der ID von kw1 sehen.

Ist es nicht ganz einfach? Der nächste Schritt besteht darin, console.dir zum Anzeigen der Elementinformationen zu verwenden.
Geben Sie console.dir(document.getElementById('kw1')) ein und drücken Sie die Eingabetaste. Es wird etwas Seltsames herauskommen.

Sie können auf dieses Ding klicken und es wird erweitert und alle Attributmethoden aufgelistet. Einfach ausgedrückt handelt es sich um die Dom-Attributmethode dieses Elements.
Okay, ich werde nicht näher darauf eingehen. Wie auch immer, die dir-Methode ist auch eines der Debugging-Tools.

Diese Fragen sind eigentlich ein Vorgeschmack auf den heutigen Inhalt. Wir haben gerade gesehen, wie man ein Element und seine Attributmethoden in der Konsole anzeigt.
Tatsächlich stellt uns die Konsole viele Befehlszeilen-APIs zur Verfügung. Vereinfacht gesagt handelt es sich dabei um Funktionen, die nur die Konsole nutzen kann.
Die aktuellen Konsolenmethoden und -eigenschaften sind: (Chrome 34)

Code kopieren Der Code lautet wie folgt:

["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy" , „clear“, „getEventListeners“, „undebug“, „monitor“, „unmonitor“, „table“, „$0“, „$1“, „$2“, „$3“, „$4“, „$_“]

ps: Wie man diese Dinge überprüft, darüber werde ich später sprechen, ich fürchte, Sie werden es vorerst nicht verstehen.
Sie können auch auf „Konsolenobjekt #3. Befehlszeilen-API“ verweisen, um einige seiner Verwendungsmöglichkeiten zu sehen.

Die, die wir üblicherweise verwenden, sind eigentlich $, $_, $0-$4, dir, Schlüssel, Werte. Wenn Sie interessiert sind oder mehr erfahren möchten, können Sie die Informationen selbst lesen.

Code kopieren Der Code lautet wie folgt:

$ // Das einfache Verständnis ist nur document.querySelector.
$$ // Das einfache Verständnis ist nur document.querySelectorAll.
$_ // ist der Wert des vorherigen Ausdrucks, Konsolenobjekt Nr. 3. Es gibt Anweisungen in der Befehlszeilen-API.
$0-$4 // sind die DOM-Elemente, die im letzten 5-Elemente-Bedienfeld ausgewählt wurden, worauf später noch eingegangen wird.
dir // eigentlich console.dir
Schlüssel // Den Schlüsselnamen des Objekts abrufen und ein Array von Schlüsselnamen zurückgeben
Werte // Den Wert des Objekts abrufen und ein Wertearray zurückgeben

Okay, die Erklärung ist wirklich nicht schwer zu verstehen, aber niemand weiß, was passieren wird, wenn man es noch nicht getan hat.

Verdammt, Baidu hat tatsächlich jQuery 1.10.2 geladen. Ursprünglich hatte Baidu eine saubere Umgebung, daher war es angemessener, darüber zu sprechen, aber es stellte sich als Betrug heraus. .
Wechseln wir zu soso, um es zu erklären. . Öffnen Sie http://www.soso.com/ und öffnen Sie die Konsole.
Jetzt verwenden wir $, um das Element mit der ID-Abfrage anzuzeigen (ein Suchfeld wie das kw1-Element von Baidu) und dann die Attributmethoden des Elements anzuzeigen.

Die gleiche Funktion wie zuvor, aber jetzt ist der Code sehr rationalisiert. Die drei Konsoleneigenschaften und -methoden $, dir, $_ werden sofort einfacher.
Manche Leute sagen vielleicht, dass jQuery heutzutage allgemein verwendet wird. Was soll ich tun, wenn ich dies überprüfen möchte?
Zurück zu Baidu, lassen Sie uns jetzt die Operation durchführen.

Es unterscheidet sich ein wenig vom vorherigen, da $('#kw1') in diesem Schritt das jQuery-Objekt abruft. Was wir also herausgeben, ist auch die jQuery-Attributmethode.
Wenn Sie die Attributmethoden des realen Elements sehen möchten, fügen Sie einfach [0]
hinzu
Wenn Sie sich nur jQuery-Objekte ansehen möchten, ist das natürlich völlig in Ordnung. . Beim Debuggen muss man natürlich gleichzeitig anpassen und testen. .
Tatsächlich gibt es eine sehr einfache Methode: Klicken Sie auf das Lupensymbol in der oberen linken Ecke und wählen Sie dann das Eingabefeld aus.

Auf diese Weise können wir $0 direkt zum Anzeigen verwenden. Dies ist die Funktion.
Lassen Sie uns kurz über Schlüssel und Werte sprechen, die später verwendet werden. . Aber manche Leute schauen immer noch gerne direkt in Richtung.

Code kopieren Der Code lautet wie folgt:

var obj = {Name: 'Nima', Alter:22, desc: '屌丝一'};

Ich glaube, dass Sie schlau sind und es auf einen Blick verstehen können.

Okay, das war's für heute. Natürlich müssen Sie es selbst ausprobieren, sonst können Sie diese Wissenspunkte nicht wirklich lernen. .
Wenn wir es nur lesen könnten, wären wir alle die Besten bei der Aufnahmeprüfung für das College, oder?

Abschließend noch ein kleiner Tipp: Sie müssen die zuvor eingegebenen Befehle nicht erneut eingeben. Sie können die Pfeiltasten ↑ und ↓ verwenden, um nach oben und unten zu suchen. Diese Funktion ähnelt cmd und ist sehr praktisch . .

Übung nach dem Unterricht: (Drücken Sie nun direkt F12, um die Konsole zu öffnen)
1. Sehen Sie sich den Quellcode der von Recommendation aufgerufenen Funktion am Ende des Artikels an (Sie können natürlich auch auf Empfehlen klicken, ich halte Sie nicht auf. o(∩_∩)o )
2. Suchen Sie den Dateispeicherort, an dem sich die Funktion befindet. (Der Höhepunkt naht)
3. Ändern Sie die Funktion, um sie ungültig zu machen. (Tatsächlich handelt es sich um eine einfache globale Änderung und Fehlerbehebung.)

Wenn schließlich etwas nicht stimmt, Sie es nicht verstehen oder mit dem Fortschritt nicht Schritt halten können usw., kommentieren Sie es bitte im Thread.
Wenn Sie möchten, dass ich Inhalte hinzufüge oder echte Projekte oder Plug-Ins debugge, können Sie auch einen Kommentar hinterlassen. Wenn es sich um ein sehr problematisches Projekt handelt, kann ich natürlich keinen Artikel schreiben, um es vorzustellen. und ich bin kein Artikel. . .