Au début: en fait, je me demandais de rédiger cette chose avant, car ce n'est pas difficile, mais pourquoi il y a tant de gens qui demandent, ils ne demandent pas comment utiliser la console, mais ils ne savent pas ce que la console peut faire. Ils savent également qu'il y a console.log et d'autres choses, mais ils ne savent pas pourquoi ils utilisent une chaîne aussi longue au lieu d'alerter aux informations de sortie. À leurs yeux, l'alerte suffit. OK, j'avoue que je me suis un peu plaint, mais je prévois d'introduire les connaissances de base de la débogage de cette série, et cela n'impliquera pas trop de profondeur, car les choses approfondies sont combinées avec la connaissance JS. Si vous n’avez pas atteint le même niveau de JS, même si je vous apprends à déboguer des bogues, à faire des plug-ins, etc., vous ne savez pas ce que je fais. Mon but est de vous faire connaître la console et de commencer par le débogage. Vous devez marcher vous-même sur la route.
Bien sûr, veuillez flotter ou se plaindre. .
Répertoire de la série de débogage JS:
En fait, les gens du développement Web le savent, que ce soit le front-end ou le back-end, mais de nombreuses personnes se concentrent uniquement sur la visualisation HTML et la modification du CSS, et n'ont pas du tout utilisé la console.
Peut-être que certains des débutants ne savent pas qu'il y a cette chose. .
Il y a beaucoup d'informations sur cette chose en ligne, mais elle ne parle pas de débogage, il ne fait que savoir comment l'utiliser. .
Qu'il s'agisse de Chrome Firefox IE (8 ou supérieure à la version) ou 360 BROWNER SOGOU BROWSER, etc., appuyez simplement sur F12 pour ouvrir la console.
Notre article utilise Chrome comme exemple pour l'expliquer, mais ce n'est pas parce que j'aime Chrome. . Chacun a ses propres préférences. .
PS: FF Dans le passé, c'était tout Firebug, mais maintenant il est natif.
Nous cliquons maintenant sur F12 pour ouvrir la console et cliquer sur l'élément de console.
Vous pouvez voir mon avatar et quelques lignes de texte, mais il y a encore quelques lignes ci-dessous. Nous l'ignorerons pour le moment et l'expliquerons plus tard.
En fait, pour F12, le nom le plus précis est les outils de développement et la console est la console.
PS: En tant que tutoriel de base, je ne présenterai que le débogage de la console et des sources. Veuillez comprendre vous-même d'autres fonctions. .
Cliquez avec le bouton droit sur le menu Clear Console ou Entrez Clear () et appuyez sur Entrée pour effacer le contenu de la console.
Passons au premier pas pour produire des informations à l'aide de Console.log.
Entrez console.log ("hehe ..") et console.log ("hehe ..", "haha ..") respectivement et appuyez sur Entrée pour voir le résultat de sortie sur la console.
En fait, il s'agit simplement d'informations, c'est très simple. Utilisez-le au lieu de l'alerte et document.write pour déboguer, et votre travail deviendra très facile.
Par exemple, déboguer un code de boucle, mais il y a des dizaines ou même des centaines d'éléments dans le tableau. Si vous alerte, vous deviendrez fou.
Document.Write n'est pas mal non plus, mais pour la sortie de l'objet, vous ne pouvez voir que des choses comme [Object Object].
C'est un vrai problème que de nombreux nouveaux amis rencontrent.
Si vous utilisez Console.log au lieu de l'alerte Document.Write pour sortir des informations sur l'objet, vous pouvez étendre cet objet dans la console pour afficher des informations spécifiques.
Par exemple:
var arr = [{nom: "Nima", âge: 22}, {nom: "Nima", âge: 20}]; pour (var i = 0; i <arr.length; i ++) {console.log (arr [i]);}Vous pouvez voir directement les informations de l'objet sans afficher [objet objet], ce qui nous fait confondre.
Pensez-vous soudain que Console. Log est explosé?
En fait, ce n'est que la pointe de son iceberg. Je ferai de mon mieux pour vous montrer certains de ses avantages.
Continuez avec les étapes à l'heure actuelle, maintenant nous entrons directement ARR, puis appuyons sur Entrée.
Est-ce encore plus sans restriction? Vous pouvez maintenant cliquer directement sur l'objet pour étendre les objets dans ce tableau pour la visualisation, même la sortie de la boucle.
C'est le charme de la console, et ce n'est que sa fonctionnalité la plus élémentaire.
Comprenons d'abord quelles méthodes sont sous l'objet Console à utiliser.
Entrez la console et appuyez sur Entrée pour développer l'objet.
Vous pouvez voir des couleurs sombres et claires. Les couleurs sombres sont des méthodes que nous pouvons appeler directement. Les couleurs claires représentent les attributs ou les méthodes par défaut, et il n'est pas nécessaire de s'inquiéter de l'affichage. J'en parlerai plus tard si vous en avez l'occasion.
En fait, les seuls communs sont le log. Dir. D'autres sont rarement utilisés et ils ne seront utilisés que dans le débogage avancé.
Les propriétés auxiliaires telles que le groupe et la table sont disponibles ou non, selon vos préférences. Je n'aime pas l'utiliser beaucoup.
Jetons un coup d'œil étape par étape. Quoi qu'il en soit, commençons par Log Dir, et la majeure partie du débogage en dépend.
PS: En fait, j'aurais dû vous donner la documentation officielle, mais Google n'a pas pu l'ouvrir récemment, afin que je puisse vérifier les fonctions de chaque méthode sur Baidu.
J'ai trouvé une version chinoise, ce n'est pas mal. Veuillez d'abord lire "Console Object".
Prenons quelques exercices après classe: (Ouvrez d'abord Baidu, puis ouvrez la console)
1 Afficher les informations sur les éléments avec ID KW1 dans la console
2 Utilisez ensuite Console.DIR Méthode pour afficher les informations de l'élément KW1