Existe-t-il un moyen de développer automatiquement des objets dans les outils de développement Chrome?

CHAQUE FOIS QUE JE regarde un objet dans la console, je vais vouloir l'agrandir, donc ça devient ennuyeux d'avoir à cliquer sur la flèche pour faire ça CHAQUE FOIS :) Y a-t-il un raccourci ou un paramètre pour que cela soit fait automatiquement?

Bien que la solution mentionnée JSON.stringifysoit assez 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ù il console.logpeut prendre soin de ces objets 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 les deux de manière créative (ab) en utilisant 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);
        }
    }
})();

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 à un niveau souhaité, et au-delà de ce niveau d'imbrication - le journal étendu reviendra à la console habituelle.

Essayez d'exécuter 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 ce console.groupn'est pas 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 des 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.

Mise à jour :

Utilisez JSON.stringifypour développer automatiquement votre objet:

> 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 fait mal de taper tout cela:

j = function(d) {
    return JSON.stringify(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(', '))
}

puis, 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 donc quelque chose qui peut être amélioré.

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

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

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);

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

Dans cet exemple, j'itère sur 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 (ie $ 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 la sortie 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 en utilisant la commande chrome:

discoverProperties(google,0,'$')

Vous pouvez également copier la sortie de la commande à l'aide de la commande chrome:

copy(discoverProperties(myvariable,0,'$'))

si vous avez un gros objet, JSON.stringfy donnera l'erreur Uncaught TypeError: Conversion de la structure circulaire en JSON, voici une astuce pour 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 tu peux utiliser JSON.stringifyOnce(obj)

Je ne suis vraiment pas fan de la façon dont Chrome et Safari consoles des objets (sur-ingénierie). La console par défaut condense l'objet, trie les clés d'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 d'acceptation. Les développeurs par défaut sont probablement intéressés par les résultats bruts afin de 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é

1. console.log(JSON.stringify({}, undefined, 2));

   Pourrait également utiliser comme fonction:

   console.json = object => console.log(JSON.stringify(object, undefined, 2));
   
   console.json({});
   

2. "Option + Clic" (Chrome sur Mac) et "Alt + Clic" (Chrome sur Fenêtre)
   Cependant, il n'est pas pris en charge par tous les navigateurs (par exemple Safari), et la console imprime toujours les chaînes de types de prototypes, les clés d'objet sont triées automatiquement lorsque élargi, etc.

Non recommandé

Je ne recommanderais aucune des meilleures réponses

1. console.table() - il s'agit uniquement d'une expansion superficielle et ne développe pas les objets imbriqués

2. Ecrire une fonction underscore.js personnalisée - trop de frais généraux pour ce qui devrait être une solution simple

C'est un travail autour, mais cela fonctionne 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 le typeahead.js de Twitter, une fois que vous vous concentrez hors de la fenêtre, la liste déroulante disparaît et les suggestions sont supprimées du DOM.

Dans les outils de développement, faites un clic droit sur le nœud sur lequel vous souhaitez développer activer la rupture sur ... -> modifications de sous-arborescence , cela vous enverra alors au débogueur. Continuez à appuyer sur F10 ou Shift + F11 jusqu'à ce que votre dom mute. Une fois que cela mute, vous pouvez inspecter. Puisque 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 nœuds insérés dynamiquement qui commencent à être insérés et supprimés en permanence.

Un autre moyen plus simple serait

• Utilisez JSON.stringify (jsonObject)
• Copiez et collez le résultat dans Visual Studio Code
• Utilisez Ctrl + K et Ctrl + F pour formater le résultat
• Vous verrez un objet développé formaté

J'ai essayé cela pour des objets simples.

Vous pouvez afficher votre élément en accédant à document.getElementsBy ... puis en cliquant avec le bouton droit et en copiant l'objet obtenu. Par exemple:

document.getElementsByTagName('ion-app') rend un objet javascript qui peut être copié dans l'éditeur de texte et il le fait dans son intégralité.

Mieux encore: faites un clic droit sur l'élément obtenu - 'Modifier en html' - 'Tout sélectionner' - 'Copier' - 'Coller'

Vous pouvez voir ici:

https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/

Moyen le 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 aucune propriété de cela, me référant simplement à une source utile.