Existe-t-il un moyen de développer automatiquement les objects dans Chrome Dev Tools?

CHAQUE TEMPS UNIQUE Je vois un object dans la console que je vais vouloir agrandir, il est donc fastidieux de devoir cliquer sur la flèche pour le faire TOUTES LES TEMPS UNIQUES 🙂 Existe-t-il un raccourci ou un réglage pour que cela se fasse automatiquement?

Bien que la solution mentionnant JSON.ssortingngify soit plutôt bonne pour la plupart des cas, elle présente quelques limitations

  • Il ne peut pas gérer les éléments avec des références circulaires où console.log peut console.log ces objects avec élégance.
  • De plus, si vous avez un grand arbre, la possibilité de replier interactivement certains nœuds peut faciliter l’exploration.

Voici une solution (utilise la bibliothèque underscore.js ) qui résout ces deux problèmes de manière créative (ab) avec console.group :

 expandedLog = (function(){ var MAX_DEPTH = 100; return function(item, depth){ depth = depth || 0; if (depth > MAX_DEPTH ) { console.log(item); return; } if (_.isObject(item)) { _.each(item, function(value, key) { console.group(key + ' : ' +(typeof value)); expandedLog(value, depth + 1); console.groupEnd(); }); } else { console.log(item); } } })(); 

Maintenant en cours d’exécution:

 expandedLog({ "glossary": { "title": "example glossary", "GlossDiv": { "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Standard Generalized Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "A meta-markup language, used to create markup languages such as DocBook.", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } }) 

Vous donnera quelque chose comme:

capture d'écran de sortie

La valeur de MAX_DEPTH peut être ajustée à un niveau souhaité, et au-delà de ce niveau d’imbrication – le journal étendu retombera sur console.log habituel

Essayez de lancer quelque chose comme:

 x = { a: 10, b: 20 } xx = x expandedLog(x) 

entrer la description de l'image ici

Notez que la dépendance de soulignement peut être facilement supprimée – il suffit d’extraire les fonctions requirejses de la source .

Notez également que console.group est non standard.

Pensez à utiliser console.table () .

sortie console.table

Pour développer / réduire un nœud et tous ses enfants,

Ctrl + Alt + Clic ou Opt + Clic sur l’icône de la flèche

(notez que bien que le doc d’outils de développement répertorie Ctrl + Alt + Clic, sur Windows, tout ce qui est nécessaire est Alt + Clic).

Ne serait peut-être pas la meilleure réponse, mais je le fais quelque part dans mon code.

Mise à jour :

Utilisez JSON.ssortingngify pour développer automatiquement votre object:

 > a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}] > JSON.ssortingngify(a, true, 2) "[ { "name": "Joe", "age": 5 }, { "name": "John", "age": 6 } ]" 

Vous pouvez toujours créer une fonction de raccourci si cela vous fait mal de taper tout cela:

 j = function(d) { return JSON.ssortingngify(d, true, 2) } j(a) 

Réponse précédente :

 pretty = function(d) { var s = [] for (var k in d) { s.push(k + ': ' + d[k]) } console.log(s.join(', ')) } 

alors, au lieu de:

 -> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}] -> a < - [Object, Object] 

Tu fais:

 -> a.forEach(pretty) < - name: Joe, age: 5 name: John, age: 6 

Pas la meilleure solution, mais fonctionne bien pour mon utilisation. Les objects plus profonds ne fonctionneront pas, ce qui peut être amélioré.

option + Cliquez sur un Mac. Je viens de le découvrir moi-même et j’ai fait ma semaine! Cela a été aussi ennuyeux que ça

Voici une version modifiée de la réponse de lorefnon qui ne dépend pas des raccourcis:

 var expandedLog = (function(MAX_DEPTH){ return function(item, depth){ depth = depth || 0; isSsortingng = typeof item === 'ssortingng'; isDeep = depth > MAX_DEPTH if (isSsortingng || isDeep) { console.log(item); return; } for(var key in item){ console.group(key + ' : ' +(typeof item[key])); expandedLog(item[key], depth + 1); console.groupEnd(); } } })(100); 

C’est un travail autour de moi, mais ça marche pour moi.

J’utilise dans le cas où un contrôle / widget se met à jour automatiquement en fonction des actions de l’utilisateur. Par exemple, lorsque vous utilisez typeahead.js de twitter, une fois que vous vous êtes concentré sur la fenêtre, le menu déroulant disparaît et les suggestions sont supprimées du DOM.

Dans les outils de développement, cliquez avec le bouton droit de la souris sur le nœud que vous souhaitez développer, puis activez la pause sur … -> les modifications de sous-arborescence , cela vous enverra ensuite au débogueur. Continuez à bash F10 ou Shift + F11 jusqu’à ce que vous mourrez. Une fois que ça mute, alors vous pouvez inspecter. Comme le débogueur est actif, l’interface utilisateur de Chrome est verrouillée et ne ferme pas la liste déroulante et les suggestions sont toujours dans le DOM.

Très pratique lors du dépannage de la disposition des noeuds insérés dynamicment qui sont insérés et supprimés en permanence.

@Hady Votre solution Mac m’a orienté vers la solution Windows appropriée! J’ai juste essayé alt + clic gauche sur le nœud le plus haut que je veux développer (dans mon cas,), et il développe tout ce qui se trouve à l’intérieur de ce tag.

Voici ma solution, une fonction qui itère toutes les propriétés de l’object, y compris les tableaux.

Dans cet exemple, je répète un object simple à plusieurs niveaux:

  var point = { x: 5, y: 2, innerobj : { innerVal : 1,innerVal2 : 2 }, $excludedInnerProperties : { test: 1}, includedInnerProperties : { test: 1} }; 

Vous avez également la possibilité d’exclure l’itération si les propriétés commencent par un suffixe particulier (par exemple, $ pour les objects angulars)

 discoverProperties = function (obj, level, excludePrefix) { var indent = "----------------------------------------".subssortingng(0, level * 2); var str = indent + "level " + level + "\r\n"; if (typeof (obj) == "undefined") return ""; for (var property in obj) { if (obj.hasOwnProperty(property)) { var propVal; try { propVal = eval('obj.' + property); str += indent + property + "(" + propVal.constructor.name + "):" + propVal + "\r\n"; if (typeof (propVal) == 'object' && level < 10 && propVal.constructor.name != "Date" && property.indexOf(excludePrefix) != 0) { if (propVal.hasOwnProperty('length')) { for (var i = 0; i < propVal.length; i++) { if (typeof (propVal) == 'object' && level < 10) { if (typeof (propVal[i]) != "undefined") { str += indent + (propVal[i]).constructor.name + "[" + i + "]\r\n"; str += this.discoverProperties(propVal[i], level + 1, excludePrefix); } } else str += indent + propVal[i].constructor.name + "[" + i + "]:" + propVal[i] + "\r\n"; } } else str += this.discoverProperties(propVal, level + 1, excludePrefix); } } catch (e) { } } } return str; }; var point = { x: 5, y: 2, innerobj : { innerVal : 1,innerVal2 : 2 }, $excludedInnerProperties : { test: 1}, includedInnerProperties : { test: 1} }; document.write("
" + discoverProperties(point,0,'$')+ "

");

Un autre moyen plus facile serait

  • Utilisez JSON.ssortingngify (jsonObject)
  • Copier et coller le résultat dans le code Visual Studio
  • Utilisez Ctrl + K et Ctrl + F pour formater le résultat
  • Vous verrez un object étendu formaté

Je l’ai essayé pour des objects simples.

Vous pouvez afficher votre élément en accédant à document.getElementsBy …, puis cliquez avec le bouton droit de la souris et copiez l’object obtenu. Par exemple:

document.getElementsByTagName('ion-app') renvoie l’object javascript qui peut être copié dans un éditeur de texte et il le fait complètement.

Mieux encore: faites un clic droit sur l’élément résultant – “Modifier en tant que html” – “Tout sélectionner” – “Copier” – “Coller”