Maison >interface Web >js tutoriel >Débogage des astuces javascript_javascript avec console.table()

Débogage des astuces javascript_javascript avec console.table()

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal
2016-05-16 16:37:241185parcourir

Utilisez CONSOLE.LOG() pour afficher les tableaux

Imaginez que vous ayez construit le tableau suivant
var langues = [
{ nom : "JavaScript", fileExtension : ".js" },
{ nom : "TypeScript", fileExtension : ".ts" },
{ nom : "CoffeeScript", fileExtension : ".coffee" }
];

<code>console.log(languages);</code>

console.log() affichera le tableau comme ceci

Ce genre d'affichage est très utile pour le développement, mais je trouve un peu fastidieux de cliquer manuellement sur chaque Objet. En ce moment, je pense que console.table() est un peu intéressant.

Utilisez CONSOLE.TABLE() pour afficher les tableaux

Essayons maintenant d'utiliser console.table() :

Est-ce vrai qu'il est tout petit ?

Bien sûr, console.table() est plus adaptée. Les données plates sont répertoriées sous forme de tableau et affichées plus parfaitement. Sinon, si chaque élément du tableau a une structure différente, de nombreuses grilles de votre tableau ne seront pas définies.

Utilisez CONSOLE.TABLE() pour afficher l'objet

Une autre fonctionnalité de console.table() est d'afficher des objets.

<code>var languages = {<br>csharp: { name: "C#", paradigm: "object-oriented" },<br>fsharp: { name: "F#", paradigm: "functional" }<br>};</code>
<code>console.table(languages);</code>

Bien.

Fonction de filtrage de CONSOLE.TABLE()

Si vous souhaitez limiter console.table() à l'affichage d'une certaine colonne, vous pouvez passer une liste de mots-clés dans le paramètre comme suit :
// Plusieurs clés de propriété
console.table(langues, ["nom", "paradigme"]);

Si vous souhaitez accéder à une propriété, un seul paramètre suffit,

<code>// A single property 
keyconsole.table(languages, "name");</code>

Je pensais autrefois comprendre déjà la plupart des fonctions des outils de développement Chrome, mais maintenant je me trompe évidemment. Si vous n'avez rien à faire, allez consulter la documentation de Chrome DevTools !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn