Existe-t-il un moyen de développer automatiquement les objets dans Chrome Dev Tools?
CHAQUE FOIS QUE JE CONSULTE UN OBJET DANS LA CONSOLE, JE VEUX VOUDRE LE DÉVELOPPER, ET CELA EST TENU DE CLASSER SUR LA FLÈCHE POUR LE FAIRE À CHAQUE FOIS! Y a-t-il un raccourci ou un réglage pour le faire automatiquement?
Bien que la solution mentionnant JSON.stringify soit plutôt bonne dans la plupart des cas, elle a quelques limitations
- Il ne peut pas gérer les éléments avec des références circulaires où
console.logpeut prendre en charge ces objets avec élégance. - De plus, si vous avez un grand arbre, la possibilité de plier de manière interactive certains nœuds peut faciliter l'exploration.
Voici une solution (utilise la bibliothèque underscore.js ) qui résout les deux problèmes ci-dessus de manière créative (ab) à l’aide de 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:
La valeur de MAX_DEPTH peut être ajustée au niveau souhaité et au-delà de ce niveau d'imbrication - le journal développé sera redirigé vers le fichier console.log habituel.
Essayez de faire quelque chose comme:
x = { a: 10, b: 20 }
x.x = x
expandedLog(x)
Notez que la dépendance de soulignement peut être facilement supprimée - il suffit d'extraire les fonctions requises de la source .
Veuillez également noter que console.group est non standard.
Pensez à utiliser 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 la documentation sur les outils de développement répertorie Ctrl + Alt + Clic, sous Windows, tout ce qui est nécessaire est Alt + Clic).
Ce n'est peut-être pas la meilleure réponse, mais je l'ai fait quelque part dans mon code.
Mettre à jour :
Utilisez JSON.stringify pour développer votre objet automatiquement:
> a = [{name: 'Joe', age: 5}, {name: 'John', age: 6}]
> JSON.stringify(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 ça:
j = function(d) {
return JSON.stringify(d, true, 2)
}
j(a)
Précédent réponse:
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 objets plus profonds ne fonctionneront pas, c'est quelque chose qui peut être amélioré.
Voici une version modifiée de la réponse de lorefnon qui ne dépend pas de underscorejs:
var expandedLog = (function(MAX_DEPTH){
return function(item, depth){
depth = depth || 0;
isString = typeof item === 'string';
isDeep = depth > MAX_DEPTH
if (isString || isDeep) {
console.log(item);
return;
}
for(var key in item){
console.group(key + ' : ' +(typeof item[key]));
expandedLog(item[key], depth + 1);
console.groupEnd();
}
}
})(100);
option + Cliquez sur un Mac. Vient de le découvrir maintenant moi-même et ont fait ma semaine! Cela a été aussi agaçant que tout
Voici ma solution, une fonction qui itère toutes les propriétés de l'objet, y compris les tableaux.
Dans cet exemple, nous parcourons un objet 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 (c'est-à-dire $ pour les objets angulaires).
discoverProperties = function (obj, level, excludePrefix) {
var indent = "----------------------------------------".substring(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("<pre>" + discoverProperties(point,0,'$')+ "</pre>");Voici le résultat de la fonction:
level 0
x(Number):5
y(Number):2
innerobj(Object):[object Object]
--level 1
--innerVal(Number):1
--innerVal2(Number):2
$excludedInnerProperties(Object):[object Object]
includedInnerProperties(Object):[object Object]
--level 1
--test(Number):1
Vous pouvez également injecter cette fonction dans n’importe quelle page Web et copier et analyser toutes les propriétés. Essayez sur la page Google à l’aide de la commande chrome:
discoverProperties(google,0,'$')
Vous pouvez également copier le résultat de la commande à l'aide de la commande chrome:
copy(discoverProperties(myvariable,0,'$'))
@ Hady Votre solution Mac m'a indiqué la solution Windows appropriée! Je viens d'essayer alt + clic gauche sur le nœud le plus élevé que je veux développer (dans mon cas,), et il développe tout à l'intérieur de cette balise.
si vous avez un gros objet, JSON.stringfy donnera l'erreur Uncaught TypeError: Conversion de la structure circulaire en JSON , l'astuce consiste à en utiliser une version modifiée
JSON.stringifyOnce = function(obj, replacer, indent){
var printedObjects = [];
var printedObjectKeys = [];
function printOnceReplacer(key, value){
if ( printedObjects.length > 2000){ // browsers will not print more than 20K, I don't see the point to allow 2K.. algorithm will not be fast anyway if we have too many objects
return 'object too long';
}
var printedObjIndex = false;
printedObjects.forEach(function(obj, index){
if(obj===value){
printedObjIndex = index;
}
});
if ( key == ''){ //root element
printedObjects.Push(obj);
printedObjectKeys.Push("root");
return value;
}
else if(printedObjIndex+"" != "false" && typeof(value)=="object"){
if ( printedObjectKeys[printedObjIndex] == "root"){
return "(pointer to root)";
}else{
return "(see " + ((!!value && !!value.constructor) ? value.constructor.name.toLowerCase() : typeof(value)) + " with key " + printedObjectKeys[printedObjIndex] + ")";
}
}else{
var qualifiedKey = key || "(empty key)";
printedObjects.Push(value);
printedObjectKeys.Push(qualifiedKey);
if(replacer){
return replacer(key, value);
}else{
return value;
}
}
}
return JSON.stringify(obj, printOnceReplacer, indent);
};
maintenant vous pouvez utiliser JSON.stringifyOnce(obj)
C'est un travail, mais ça marche pour moi.
J'utilise dans le cas où un contrôle/widget met à jour automatiquement en fonction des actions de l'utilisateur. Par exemple, lorsque vous utilisez le fichier typeahead.js de Twitter, une fois que vous vous êtes focalisé en dehors de la fenêtre, la liste déroulante 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. Activez break sur ... -> modifications de sous-arborescence, cela vous enverra ensuite au débogueur. Continuez à frapper F10 ou Shift + F11 jusqu'à ce que votre dom mute. Une fois que cela change, vous pouvez inspecter. Le débogueur étant actif, l'interface utilisateur de Chrome est verrouillée et ne ferme pas la liste déroulante. Les suggestions sont toujours dans le DOM.
Très pratique lors du dépannage de la disposition des noeuds insérés dynamiquement, qui commencent à être insérés et supprimés en permanence.
Un autre moyen plus facile serait
- Utilisez JSON.stringify (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 l'objet développé formaté
J'ai essayé ceci pour des objets simples.
Je ne suis vraiment pas un fan de la façon dont les consoles de Chrome et de Safari sont trop sophistiquées. La console par défaut condense l'objet, trie les clés de l'objet lorsque l'objet est développé et affiche les fonctions internes de la chaîne de prototypes. Ces fonctionnalités doivent être des paramètres de participation. Les développeurs par défaut sont probablement intéressés par les résultats bruts afin de pouvoir vérifier si leur code fonctionne correctement. et ces fonctionnalités ralentissent le développement et donnent des résultats de tri incorrects.
Comment développer des objets dans la console
Conseillé
console.log(JSON.stringify({}, undefined, 2));Pourrait aussi utiliser comme fonction:
console.json = object => console.log(JSON.stringify(object, undefined, 2)); console.json({});- "Option + Clic" (Chrome sur Mac) et "Alt + Clic" (Chrome sur Fenêtre)
Cependant, il n'est pas pris en charge par tous les navigateurs (Safari, par exemple) et la console imprime toujours les chaînes de type de prototype, les clés d'objet sont triées automatiquement lors de leur développement, etc.
Non recommandé
Je ne recommanderais aucune des premières réponses
console.table()- il s'agit d'un développement superficiel uniquement et ne développe pas les objets imbriquésEcrivez une fonction underscore.js personnalisée - trop de charge pour ce qui devrait être une solution simple
Vous pouvez voir ici:
https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/
Manière la plus simple:
import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);
Vous devez également ajouter le code suivant à tsconfig:
{ "compilerOptions": { ..."resolveJsonModule": true, "esModuleInterop": true... } }
Je ne revendique aucun droit de propriété, je fais simplement référence à une source utile.