Вопрос по – Есть ли способ автоматического расширения объектов в Chrome Dev Tools?

110

EVERY SINGLE TIME Я просматриваю объект в консоли. Я хочу развернуть его, поэтому становится утомительно нажимать стрелку, чтобы делать это КАЖДЫЙ ВРЕМЯ :) Есть ли ярлык или настройка, чтобы сделать это автоматически?

Не сейчас. Не стесняйтесь подать запрос на функцию на New.crbug.com (начните сводку с префикса DevTools:), но будьте очень точны в отношениигд а такжекоторы объекты, которые вы хотите расширить. Например, тыбезусловн никогда не захочет расширять ВСЕ ваши объекты, поскольку они могут (а) иметь огромное количество свойств; (б) содержат циклы (в последнем случае это займеткакое-то врем чтобы развернуть все дерево;)) Alexander Pavlov
Спасибо за этого Никиту, я разместил комментарий с альтернативным решением. Jeremy Smith
Почему это еще не осуществлено 4 года спустя? user3751385
Я бы с радостью согласился на сочетание клавиш. мне больно ходить к мышке ... market

Ваш Ответ

12   ответов
20

решени упоминаяJSON.stringify отлично подходит для большинства случаев, имеет несколько ограничений

Он не может обрабатывать элементы с круговыми ссылками, гдеconsole.log может заботиться о таких объектах элегантно. Кроме того, если у вас большое дерево, то возможность интерактивного сворачивания некоторых узлов может облегчить исследование.

Вот решение (использует Underscore.js library), которая решает оба вышеперечисленных творчески (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 нестандартно.

было бы идеально, если бы оно уже было извлечено Tebe
74
Отлично, я никогда не знал об этом! Dagobert Renouf
Extraordinary! Спас мой день! Nicolae Olariu
Это лучшая вещь когда-либо !!! Jonathan Wood
Я думаю, что говорю от имени любого, кто не видел этого раньше: Удивительно! John Hunt
Выглядит хорошо! Но он сжимает широкие значения, если есть более 10 клавиш: Systems Rebooter
40

Ctrl + Alt + Click илиOpt + Нажмите на иконке со стрелкой

(учтите, что хотя the dev tools doc списки Ctrl + Alt + Click, в Windows все, что нужно, это Alt + Click).

Тестирование выполняется в OSX chrome 46, оно также расширяет все объекты-прототипы, что делает его таким же плохим, как необходимость нажимать на каждую стрелку. Вместо этого вы должны найти свойства (hasOwn) в середине 50 методов-прототипов, свойств и т. Д ... Kev
Это полный ответ на вопрос. Ross Patterson
Просто примечание. В случае объектов с большой глубиной, Ctrl + Alt + Click следует применять несколько раз, пока он не развернет весь объект, а не только один раз. BentCoder
это дает Uncaught ReferenceError: _ не определена ошибка MagePsycho
31

Обновит:

Используйте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

Не лучшее решение, но хорошо подходит для моего использования. Более глубокие объекты не будут работать, поэтому это можно улучшить.

Соедините это с Добавление пользовательских функций в консоль Chrome и мы можем иметьpretty(a) на всех сайтах всегда;) brasofilo
И тогда ты сможешь использовать Jsonviewer.stack.hu чтобы отформатировать JSON! reverie_ss
6

которая не зависит от подчеркивания:

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

неделю! Это было так же раздражает, как и в

2

функция, которая перебирает все свойства объекта, включая массивы.

В этом примере я перебираю простой многоуровневый объект:

    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,'$'))
1

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)

1

Я использую в случае, когда элемент управления / виджет автоматически обновляется в зависимости от действий пользователя. Например, при использовании твиттера typeahead.js после того, как вы сфокусировались в окне, раскрывающийся список исчезает, а предложения удаляются из DOM.

В инструментах разработчика щелкните правой кнопкой мыши узел, который вы хотите развернуть, включитеbreak on ... -> модификации поддерева, это отправит вас к отладчику. Продолжайте нажимать F10 или Shift + F11 пока ты не мутируешь. Как только это мутирует, вы можете проверить. Поскольку отладчик активен, пользовательский интерфейс Chrome заблокирован и не закрывает раскрывающийся список, а предложения все еще находятся в DOM.

Очень удобно при устранении неполадок в макете динамически вставленных узлов, которые начинают вставляться и постоянно удаляться.

1

Я только что попробовал alt + щелкнуть левой кнопкой мыши на самом высоком узле, который я хочу расширить (в моем случае,), и он расширяет все, что находится внутри этого тега.

0

Используйте JSON.stringify (jsonObject) Скопируйте и вставьте результат в код Visual Studio Используйте Ctrl + K и Ctrl + F, чтобы отформатировать результат Вы увидите отформатированный развернутый объект

Я пробовал это для простых объектов.

-1

открыв document.getElementsBy ... и затем щелкните правой кнопкой мыши и скопируйте полученный объект. Например

document.getElementsByTagName('ion-app') возвращает объект javascript, который можно скопировать и вставить в текстовый редактор, и он делает это полностью.

Еще лучше: щелкните правой кнопкой мыши по полученному элементу - «Редактировать как HTML» - «Выбрать все» - «Копировать» - «Вставить»

Похожие вопросы