Ouvrez d'abord Baidu, puis appuyez sur F12 pour l'ouvrir. S'il ne s'agit pas de l'élément de console, cliquez sur l'élément de console car nous voulons le faire fonctionner dans la console. .
Voir le contenu suivant:
D'accord, effaçons d'abord le contenu, vous pouvez cliquer avec le bouton droit et sélectionner le menu Clear Console, ou entrer Clear ().
Ensuite, nous entrons dans document.getElementById («KW1»); puis appuyez sur Entrée pour voir les informations de l'élément avec ID KW1.
N'est-ce pas très simple? L'étape suivante consiste à utiliser Console.dir pour afficher les informations de l'élément.
Entrez console.dir (document.getElementById («KW1»)); Et puis appuyez sur Entrée et quelque chose d'étrange sort.
Vous pouvez cliquer sur cette chose, et il élargira et répertoriera toutes les méthodes d'attribut. Autrement dit, c'est la méthode d'attribut DOM de cet élément.
Ok, je n'entrerai pas dans les détails à ce sujet. Quoi qu'il en soit, la méthode DIR est également l'un des outils de débogage.
Ces questions sont en fait une préfiguration du contenu d'aujourd'hui. Nous venons de voir comment voir un élément et ses méthodes d'attribut sur la console.
En fait, la console nous fournit de nombreuses API de ligne de commande. Pour le dire simplement, c'est une fonction que seule la console peut utiliser.
Actuellement, les méthodes et propriétés de la console sont: (Chrome 34)
La copie de code est la suivante:
["$$", "$ x", "dir", "dirxml", "clés", "valeurs", "profil", "profilEnd", "monitorevents", "unmonitorevents", "inspecter", "copier", "clairement", "getEventListeners", "undebug" "3 $", "4 $", "$ _"]
PS: Quant à la façon de voir ces choses, j'en parlerai plus tard. J'ai peur que vous ne les comprendrez pas pour le moment.
Vous pouvez également vous référer à "Console Object # 3. Command Line API" pour voir certains de ses usages.
Ce que nous utilisons souvent, c'est $, $ _, 0 $ à 4 $, dir, clés, valeurs. Si vous êtes intéressé ou si vous souhaitez apprendre en profondeur, veuillez lire vous-même le matériel.
La copie de code est la suivante:
$ // Comprenez simplement qu'il s'agit de document.QuerySelector.
$$ // Comprenez simplement qu'il s'agit de document.QuerySelectorall.
$ _ // est la valeur de l'expression précédente et l'objet console # 3. L'API de ligne de commande est expliquée.
0 $ - 4 $ // est l'élément DOM sélectionné dans les 5 derniers panneaux d'éléments, et sera discuté plus tard.
dir // c'est en fait console.dir
touches // Prenez le nom de clé de l'objet, renvoyez un tableau composé de noms de clés
valeurs // supprimer la valeur de l'objet et renvoyer un tableau de valeurs
OK, ce n'est en effet pas difficile à comprendre de l'explication, mais cela n'a jamais été fait auparavant, et personne ne sait ce qui va se passer.
Damn baidu, il a en fait chargé jQuery 1.10.2. À l'origine, l'environnement de Baidu est propre et il est plus approprié d'en parler, mais cela s'est avéré être un imbécile. .
Passons à Soso pour expliquer. . Ouvrez http://www.soso.com/ puis ouvrez la console.
Maintenant, nous utilisons $ pour afficher l'élément avec la requête ID (comme l'élément KW1 dans Baidu), puis vérifiez la méthode d'attribut de l'élément.
La même fonction qu'avant, mais le code est maintenant très simple. En utilisant les trois propriétés et méthodes de console de $, dir, $ _, rend-il instantanément le débogage plus facile?
Certaines personnes peuvent dire que de nos jours, jQuery est généralement utilisé, que dois-je faire si je veux vérifier cela?
Retour à Baidu, faisons l'opération tout à l'heure.
C'est un peu différent de celui en ce moment, car l'étape $ ('# kw1') obtient un objet jQuery, donc la méthode d'attribut jQuery que nous réalisons également.
Si vous souhaitez voir la méthode d'attribut de l'élément réel, ajoutez un [0]
Bien sûr, si vous voulez juste voir l'objet jQuery, il n'y a pas de problème. . Quant au débogage, bien sûr, vous devez l'essayer lors de l'ajustement. .
En fait, il existe une autre méthode très simple, qui est de cliquer sur l'icône de la vitrail dans le coin supérieur gauche et de sélectionner la boîte d'entrée.
De cette façon, nous pouvons utiliser directement 0 $ pour le visualiser. Nous avons introduit 0 $ à 4 $ tout à l'heure. C'est la fonction, c'est simple.
Parlons brièvement des clés et des valeurs, qui seront utilisées plus tard. . Mais certaines personnes aiment toujours le voir directement.
La copie de code est la suivante:
var obj = {name: 'Nima', âge: 22, desc: 'Silk One'};
Je crois que vous pouvez le comprendre en un coup d'œil et le comprendre en un coup d'œil.
D'accord, le contenu d'aujourd'hui est presque tout ça. Bien sûr, je dois l'essayer moi-même, sinon je ne pourrai pas vraiment apprendre ces points de connaissance. .
Si nous pouvons simplement le lire, nous serons tous les meilleurs buteurs de l'examen d'entrée au collège, non?
Enfin, permettez-moi de vous dire une petite astuce, qui consiste à utiliser les commandes que j'ai saisies auparavant, vous n'avez pas besoin de rentrer. Vous pouvez rechercher et descendre les touches flèches ↑ et ↓. Cette fonction est similaire à CMD et est très pratique. .
Exercices après classe: (Appuyez maintenant sur F12 directement pour ouvrir la console)
1. Vérifiez le code source de la fonction recommandée par cette fonction sous l'article (bien sûr, vous pouvez cliquer sur la recommandation, je ne vous ai pas arrêté. O (∩_∩) O)
2. Position à l'emplacement du fichier où se trouve la fonction. (Le point culminant arrive)
3. Modifiez la fonction pour l'invalider. (En fait, c'est juste une simple modification globale et débogage.)
Enfin, si ce qui est dit est mal, ou ne peut pas comprendre, ou si les progrès ne peuvent pas suivre, etc., veuillez publier et vous plaindre.
De plus, si vous voulez que j'ajoute quelque chose ou que je débogue de véritables projets ou plug-ins, vous pouvez également le publier. Bien sûr, s'il s'agit d'un projet très gênant, je ne peux pas écrire un article pour le présenter. Je ne suis pas un article. . .