Comment afficher l'objet complet dans la console Chrome?

155 
var functor=function(){
    //test
}

functor.prop=1;

console.log(functor);

cela ne montre que la partie fonction du foncteur, ne peut pas afficher les propriétés du foncteur dans la console.

javascript debugging google-chrome amour
la source

Réponses:

245

Utilisez console.dir()pour afficher un objet consultable sur lequel vous pouvez cliquer au lieu de la .toString()version, comme ceci:

console.dir(functor);

Imprime une représentation JavaScript de l'objet spécifié. Si l'objet en cours de journalisation est un élément HTML, alors les propriétés de sa représentation DOM sont imprimées [1]

[1] https://developers.google.com/web/tools/chrome-devtools/debug/console/console-reference#dir

Nick Craver
la source
1
Il convient de noter que le simple fait d'imprimer varNamedans la console Chrome et d'appuyer sur Entrée donne le même effet que console.dir(varName).
Vadzim
118

Vous pourriez obtenir de meilleurs résultats si vous essayez:

console.log(JSON.stringify(functor));
BastiBen
la source
cette réponse est excellente mais je pense que cela ne fonctionne pas avec l'exemple ci-dessus, essayé dans un nouvel onglet et renvoie undefined
aitorllj93
1
Avec tout le respect que je dois à cette réponse, elle renvoie finalement une chaîne représentant l'objet, et non un objet "navigable" dans la console, comme la question est ici. Certes, si vous exécutez cette chaîne de sortie via JSON.parse, elle reviendra à son format d'objet, mais la console affichera toujours un ".toString ()" et nous revenons à la case départ. La réponse ici avec l'utilisation de "console.dir" est la meilleure solution pour la question en cours.
TheCuBeMan
21

Vous pourriez obtenir des résultats encore meilleurs si vous essayez:

console.log(JSON.stringify(obj, null, 4));
Trident D'Gao
la source
Cette réponse améliore celle de @ BastiBen en formatant la sortie.
Xeoncross
12 
var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
Kean Amaral
la source
8

cela a parfaitement fonctionné pour moi:

for(a in array)console.log(array[a])

vous pouvez extraire n'importe quel tableau créé dans la console pour rechercher / remplacer le nettoyage et l'utilisation postérieure de ces données extraites

domSurgeon
la source
3
un peu plus détaillé:for (i in arr) { console.log(i); console.log(arr[i]); }
Geo
il ne produira pas de propriétés et de méthodes qui ne sont pas énumérables
Barbu Barbu
0

J'ai écrit une fonction pour imprimer facilement des choses sur la console.

// function for debugging stuff
function print(...x) {
    console.log(JSON.stringify(x,null,4));
}

// how to call it
let obj = { a: 1, b: [2,3] };
print('hello',123,obj);

affichera dans la console:

[
    "hello",
    123,
    {
        "a": 1,
        "b": [
            2,
            3
        ]
    }
]
John Henckel
la source
0

Avec les navigateurs modernes, console.log(functor)fonctionne parfaitement (se comporte de la même manière a console.dir).

Akim
la source
0

J'ai fait fonction de la réponse du Trident D'Gao.

function print(obj) {
  console.log(JSON.stringify(obj, null, 4));
}

Comment l'utiliser

print(obj);
Jens Törnell
la source
-5

Pour afficher obj:

console.log(obj, null, 4)
Kulakov Serg
la source