Чи є спосіб автоматичного розширення об’єктів у інструментах Chrome Dev?

КОЖИЙ ОДИН ЧАС Я переглядаю об'єкт у консолі, я хочу його розширити, тому стає втомленим потрібно клацати стрілкою, щоб зробити це КОЖНЕ ОДИНЕ ЧАС :) Чи є ярлик або налаштування, щоб зробити це автоматично?

Хоча згадка про рішенняJSON.stringify досить велика для більшості випадків, вона має кілька обмежень

• Він не може обробляти предмети з круговими посиланнями, коли, як console.logможна, елегантно опікується такими предметами.
• Крім того, якщо у вас є велике дерево, то можливість інтерактивного складання деяких вузлів може полегшити розвідку.

Ось рішення (використовує бібліотеку underscore.js ), яке вирішує обидва вищезазначені творчо (ab), використовуючи 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);
        }
    }
})();

Зараз працює:

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"
                }
            }
        }
    }
})

Дасть вам щось на кшталт:

Значення MAX_DEPTH можна відрегулювати до потрібного рівня, і після цього рівня гніздування - розширений журнал повернеться до звичайного console.log

Спробуйте запустити щось на кшталт:

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

Зауважте, що залежність підкреслення можна легко усунути - просто витягніть потрібні функції з джерела .

Також зверніть увагу, що console.groupце нестандартно.

Подумайте про використання console.table () .

Щоб розгорнути / згорнути вузол та всіх його дітей,

Ctrl + Alt + Клацніть або Оптимізуйте + Натисніть на значок стрілки

(зауважте, що хоч doc інструменти розробки перераховують Ctrl + Alt + Click, у Windows все, що потрібно, це Alt + Click).

Це може бути не найкращою відповіддю, але я робив це десь у своєму коді.

Оновлення :

Використовуйте JSON.stringifyдля автоматичного розширення об'єкта:

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

Ви завжди можете зробити функцію швидкого доступу, якщо вам боляче вводити все це:

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

j(a)

Попередня відповідь:

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

то замість:

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

Ти робиш:

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

Не найкраще рішення, але добре працює для мого використання. Більш глибокі об'єкти не працюватимуть, тому це може бути покращено.

варіант + Клацніть на Mac. Щойно я відкрив це зараз сам і зробив свій тиждень! Це було як раз прикро

Ось модифікована версія відповіді lorefnon, яка не залежить від підкреслення:

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

Ось моє рішення - функція, яка ітералізує всі властивості об'єкта, включаючи масиви.

У цьому прикладі я повторюю простий багаторівневий об'єкт:

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

Ви також можете виключити ітерацію, якщо властивості починаються з певного суфіксу (тобто $ для кутових об'єктів)

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

Ось вихід функції:

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

Ви також можете ввести цю функцію на будь-яку веб-сторінку та скопіювати та проаналізувати всі властивості, спробуйте на сторінці Google за допомогою команди chrome:

discoverProperties(google,0,'$')

Також ви можете скопіювати вихід команди, використовуючи команду chrome:

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

якщо у вас є великий об'єкт, JSON.stringfy подасть помилку Uncaught TypeError: Перетворення кругової структури в JSON, ось хитрість використовувати модифіковану версію цього

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

тепер ви можете використовувати JSON.stringifyOnce(obj)

Я насправді не прихильник того, як Chrome і Safari консолірують об'єкти (переобладнані). Консоль за замовчуванням конденсує об'єкт, сортує клавіші об'єкта при розширенні об'єкта та показує внутрішні функції ланцюга прототипу. Ці функції повинні бути налаштуваннями для входу. Розробники за замовчуванням, ймовірно, зацікавлені в необроблених результатах, щоб вони могли перевірити, чи працює їх код правильно; і ці функції сповільнюють розвиток і дають неправильні результати сортування.

Як розгорнути об’єкти в консолі

Рекомендовано

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

   Можна також використовувати як функцію:

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

2. "Option + Click" (Chrome на Mac) та "Alt + Click" (Chrome у вікні).
   Однак він підтримується не всіми браузерами (наприклад, Safari), і Console все ще друкує ланцюги типу прототипу, об'єктивні клавіші автоматично сортуються, коли розширений тощо.

Не рекомендовано

Я б не рекомендував жодної з найкращих відповідей

1. console.table() - це лише неглибоке розширення і не розширює вкладені об'єкти

2. Напишіть власну функцію underscore.js - занадто великі накладні витрати для того, що має бути простим рішенням

Це робота навколо, але це працює для мене.

Я використовую у випадку, коли керування / віджет автоматично оновлюється залежно від дій користувача. Наприклад, коли ви використовуєте twitter's typeahead.js, коли ви фокусуєтеся у вікні, спадне меню зникає, а пропозиції видаляються з DOM.

У Dev інструментів клацніть правою кнопкою миші на вузлі , який ви хочете включити , щоб розширити розрив на ... -> модифікаціями піддерев , це відправить вас в відладчик. Продовжуйте натискати клавіші F10 або Shift + F11, доки ви не будете мутувати. Як тільки це мутує, то ви можете оглянути. Оскільки налагоджувач активний, користувальницький інтерфейс Chrome заблокований і не закриває спадне меню, і пропозиції все ще знаходяться в DOM.

Дуже зручно при вирішенні проблем з компонуванням динамічно вставлених вузлів, які починають вставляти та видаляти постійно.

Ще один простіший спосіб був би

• Використовуйте JSON.stringify (jsonObject)
• Скопіюйте та вставте результат у Visual Studio Code
• Використовуйте Ctrl + K і Ctrl + F для форматування результату
• Ви побачите відформатований розширений об'єкт

Я спробував це для простих об'єктів.

Ви можете переглянути свій елемент, відвідавши document.getElementsBy ..., а потім клацніть правою кнопкою миші та скопіюйте отриманий об'єкт. Наприклад:

document.getElementsByTagName('ion-app') повертає об'єкт javascript, який можна скопіювати, вставити в текстовий редактор, і він робить це повністю.

Ще краще: клацніть правою кнопкою миші на отриманому елементі - "Редагувати як html" - "Вибрати все" - "Копіювати" - "Вставити"

Ви можете побачити тут:

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

Найпростіший спосіб:

import SampleJson from '../../assets/SampleJson.json';
...
console.log(SampleJson);

Ви також повинні додати наступний код до tsconfig:

{  "compilerOptions": {  ..."resolveJsonModule": true, "esModuleInterop": true... } }

Я не претендую на право власності на це, просто посилаючись на корисне джерело.