КАЖДОЕ ОДИНОЧНОЕ ВРЕМЯ Я просматриваю объект в консоли, я собираюсь его расширить, поэтому становится утомительным, чтобы щелкнуть стрелку, чтобы сделать это КАЖДОЕ ВРЕМЯ:) Есть ли ярлык или настройка, чтобы это сделать автоматически?
Есть ли способ автоматического расширения объектов в Chrome Dev Tools?
Ответ 1
Хотя решение, в котором упоминается JSON.stringify, в большинстве случаев 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 является нестандартной.
Ответ 2
Рассмотрите возможность использования console.table().
Ответ 3
Чтобы развернуть/свернуть a node и все его дочерние элементы,
Ctrl + Alt + Click или Выбрать и нажать на значок стрелки
(обратите внимание, что хотя dev tools doc отображает Ctrl + Alt + Click, для Windows все, что нужно, это Alt + Click).
Ответ 4
Не лучший ответ, но я делал это где-то в своем коде.
Обновление
Используйте 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
Не лучшее решение, но хорошо работает для моего использования. Более глубокие объекты не будут работать так, чтобы что-то можно было улучшить.
Ответ 5
+ Нажмите на Mac. Просто открыл это сейчас и сделал свою неделю! Это было так же неприятно, как и все
Ответ 6
Вот измененная версия lorefnon ответа, которая не зависит от 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);
Ответ 7
Вот мое решение, функция, которая выполняет итерации всех свойств объекта, включая массивы.
В этом примере я повторяю простой многоуровневый объект:
var point = {
x: 5,
y: 2,
innerobj : { innerVal : 1,innerVal2 : 2 },
$excludedInnerProperties : { test: 1},
includedInnerProperties : { test: 1}
};
У вас также есть возможность исключить итерацию, если свойства начинаются с определенного суффикса (т.е. $для объектов angular)
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>");Ответ 8
Его работа вокруг, но она работает для меня.
Я использую в случае автоматического обновления элемента управления/виджета в зависимости от действий пользователя. Например, при использовании twitter typeahead.js, как только вы фокусируетесь из окна, выпадающее меню исчезает, и предложения удаляются из DOM.
В инструментальных средствах dev щелкните правой кнопкой мыши по node, который вы хотите включить, включите break on... → модификации поддерева, после чего вы отправите вас в отладчик. Нажимайте F10 или Shift + F11, пока вы не сработаете. Как только это мутирует, вы можете проверить. Поскольку активный отладчик активен, пользовательский интерфейс Chrome заблокирован и не закрывает раскрывающийся список, и предложения все еще находятся в DOM.
Очень удобно при поиске неисправностей размещения динамически вставленных узлов, которые начинают вставлять и удалять постоянно.
Ответ 9
@Hady Ваше решение Mac обратило меня на правильное решение Windows! Я просто попробовал alt + левый клик на самом высоком node, я хотел бы расширить (в моем случае), и он расширяет все внутри этого тега.
Ответ 10
если у вас большой объект, 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)
Ответ 11
Другой более простой способ будет
- Использовать JSON.stringify(jsonObject)
- Скопируйте и вставьте результат в код Visual Studio
- Используйте Ctrl + K и Ctrl + F, чтобы отформатировать результат
- Вы увидите отформатированный развернутый объект
Я пробовал это для простых объектов.
Ответ 12
Я действительно не фанат того, как Chrome и Safari утешают объекты (чрезмерно спроектированные). Консоль по умолчанию уплотняет объект, сортирует ключи объекта при расширении объекта и показывает внутренние функции из цепочки прототипов. Эти функции должны быть настроены. Разработчики по умолчанию, вероятно, заинтересованы в необработанных результатах, чтобы они могли проверить, правильно ли работает их код; и эти функции замедляют разработку и дают неверные результаты сортировки.
Как развернуть объекты в консоли
рекомендуемые
-
console.log(JSON.stringify({}, undefined, 2));Можно также использовать как функцию:
console.json = object => console.log(JSON.stringify(object, undefined, 2)); console.json({}); - "Option + Click" (Chrome на Mac) и "Alt + Click" (Chrome на Windows)
Однако он поддерживается не всеми браузерами (например, Safari), и Console по-прежнему печатает цепочки прототипов, ключи объектов автоматически сортируются при развертывании и т.д.
Не рекомендуется
Я не рекомендовал бы ни один из лучших ответов
-
console.table()- это только поверхностное расширение и не расширяет вложенные объекты -
Написать собственную функцию underscore.js - слишком много накладных расходов для того, что должно быть простым решением
Ответ 13
Вы можете увидеть здесь:
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... } }
Я не претендую на это, просто ссылаюсь на полезный источник.
Ответ 14
Вы можете просмотреть свой элемент, обратившись к document.getElementsBy..., а затем щелкните правой кнопкой мыши и скопируйте полученный объект. Например:
document.getElementsByTagName('ion-app') возвращает объект javascript, который можно скопировать в текстовый редактор, и он делает это полностью.
Еще лучше: щелкните правой кнопкой мыши по приведенному элементу - "Изменить как html" - "Выбрать все" - "Копировать" - "Вставить"