Zuerst öffnen Baidu und drücken Sie dann F12, um es zu öffnen. Wenn es nicht das Konsolenelement ist, klicken Sie auf das Konsolenelement, da wir es in der Konsole bedienen möchten. .
Siehe den folgenden Inhalt:
Okay, lassen Sie uns zunächst den Inhalt löschen, Sie können mit der rechten Maustaste klicken und das Menü Clear Console auswählen oder Clear () eingeben.
Als nächstes geben wir document.getElementById ('KW1') ein; Drücken Sie dann die Eingabetaste, um die Elementinformationen mit ID KW1 anzuzeigen.
Ist es nicht sehr einfach? Der nächste Schritt besteht darin, Console.dir zu verwenden, um die Elementinformationen anzuzeigen.
Geben Sie console.dir (document.getElementById ('KW1')); Und dann drücken Sie Eingänge und etwas Seltsames kommt heraus.
Sie können auf dieses Ding klicken und alle Attributmethoden erweitern und auflisten. Einfach ausgedrückt, ist es die DOM -Attributmethode dieses Elements.
Ok, ich werde nicht detailliert darauf eingehen. Wie auch immer, die DIR -Methode ist auch eines der Debugging -Tools.
Diese Fragen sind tatsächlich eine Vorahnung des heutigen Inhalts. Wir haben gerade gesehen, wie man ein Element und seine Attributmethoden auf der Konsole anzeigt.
Tatsächlich bietet uns die Konsole viele Befehlszeilen -APIs. Einfach gesagt, es ist eine Funktion, die nur die Konsole verwenden kann.
Derzeit sind die Konsolenmethoden und Eigenschaften: (Chrome 34)
Die Codekopie 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 anzeigt, werde ich später darüber sprechen. Ich habe Angst, dass Sie sie vorerst nicht verstehen werden.
Sie können auch auf "Konsolenobjekt #3. Befehlszeilen -API" verweisen, um einige seiner Verwendungen zu sehen.
Was wir oft verwenden, ist $, $ _, $ 0- $ 4, Dir, Schlüssel, Werte. Wenn Sie interessiert sind oder ausführlich lernen möchten, lesen Sie bitte die Materialien selbst.
Die Codekopie lautet wie folgt:
$ // Verstehe einfach, es ist document.querySelector.
$$ // Verstehe einfach, es ist document.querySelectorAll.
$ _ // ist der Wert des vorherigen Ausdrucks und das Konsolenobjekt Nr. 3. Die Befehlszeile -API wird erklärt.
$ 0- $ 4 // ist das DOM-Element, das in den letzten 5 Elemente-Panels ausgewählt wurde und später diskutiert wird.
Dir // Es ist tatsächlich console.dir
Tasten // Nehmen Sie den Schlüsselnamen des Objekts an, geben Sie ein Array zurück, das aus Schlüsselnamen besteht
Werte // Entfernen Sie den Wert des Objekts und geben Sie ein Wertearray zurück
OK, es ist in der Tat nicht schwer aus der Erklärung zu verstehen, aber es wurde noch nicht getan, und niemand weiß, was passieren wird.
Verdammte Baidu, es wurde tatsächlich JQuery 1.10.2 geladen. Ursprünglich ist Baidus Umgebung sauber und es ist angemessener, darüber zu sprechen, aber es stellte sich heraus, dass es ein Dummkopf war. .
Lassen Sie uns zu Soso wechseln, um zu erklären. . Öffnen Sie http://www.soso.com/ und öffnen Sie dann die Konsole.
Jetzt verwenden wir $, um das Element mit ID -Abfrage (wie das KW1 -Element in Baidu) anzuzeigen und dann die Attributmethode des Elements zu überprüfen.
Die gleiche Funktion wie zuvor, aber der Code ist jetzt sehr einfach. Verwenden Sie die drei Konsoleneigenschaften und Methoden von $, Dir, $ _, das Debuggen sofort einfacher?
Manche Leute können sagen, dass JQuery heutzutage normalerweise verwendet wird. Was soll ich tun, wenn ich das überprüfen möchte?
Zurück nach Baidu, machen wir die Operation gerade.
Es ist ein wenig anders als der gerade, denn der Schritt $ ('#kw1') erhält ein JQuery -Objekt, sodass die JQuery -Attributmethode, mit der wir uns auch befinden.
Wenn Sie die Attributmethode des realen Elements sehen möchten, fügen Sie A [0]
Wenn Sie das JQuery -Objekt nur sehen möchten, gibt es natürlich kein Problem. . Was das Debuggen angeht, müssen Sie es natürlich versuchen, während Sie es anpassen. .
Tatsächlich gibt es eine andere sehr einfache Methode, bei der das Lupe -Symbol in der oberen linken Ecke klicken und das Eingabefeld auswählen kann.
Auf diese Weise können wir direkt $ 0 verwenden, um es anzuzeigen. Wir haben gerade 0 bis 4 US-Dollar eingeführt. Dies ist die Funktion, sie ist einfach.
Lassen Sie uns kurz über Schlüsseln und Werte sprechen, die später verwendet werden. . Aber manche Leute sehen es immer noch gerne direkt.
Die Codekopie lautet wie folgt:
var obj = {name: 'nima', Alter: 22, Desc: 'Silk One'};
Ich glaube, dass Sie es auf einen Blick verstehen und auf einen Blick verstehen können.
Okay, der heutige Inhalt ist fast all das. Natürlich muss ich es selbst ausprobieren, sonst werde ich diese Wissenspunkte nicht wirklich lernen können. .
Wenn wir es einfach lesen können, werden wir alle die Top -Torschützen in der College -Aufnahmeprüfung sein, oder?
Lassen Sie mich schließlich einen kleinen Trick sagen, nämlich die Befehle, die ich zuvor eingegeben habe, müssen Sie nicht wieder eintreten. Sie können durch die Pfeiltasten ↑ und ↓ suchen. Diese Funktion ähnelt CMD und ist sehr bequem. .
Nachklassenübungen: (Drücken Sie nun F12 direkt, um die Konsole zu öffnen)
1. Überprüfen Sie den Funktionsquellencode, der in dieser Funktion unter dem Artikel empfohlen wird (natürlich können Sie auf die Empfehlung klicken, ich habe Sie nicht angehalten. O (∩_∩∩) o)
2. Positionieren Sie zum Dateiort, an dem sich die Funktion befindet. (Der Höhepunkt kommt)
A. Ändern Sie die Funktion, um sie ungültig zu machen. (Tatsächlich ist es nur eine einfache globale Modifikation und Debugging.)
Schließlich, wenn das, was gesagt wird, falsch ist oder nicht verstehen kann oder der Fortschritt nicht mithalten kann usw., bitte posten und beschweren.
Wenn Sie möchten, dass ich etwas hinzufüge oder echte Projekte oder Plug-Ins debuggen, können Sie es auch veröffentlichen. Wenn es sich um ein sehr problematisches Projekt handelt, kann ich natürlich keinen Artikel schreiben, um ihn vorzustellen. Ich bin kein Artikel. . .