Comments 7
Довольно часто использую такой сниппет:
[].forEach.call(document.querySelectorAll('form'), function (input) {
var table = [];
console.group('HTMLForm "' + input.name + '": ' + input.action);
console.log('Element: ', input, '\nName: ' +
input.name + '\nMethod: ' + input.method.toUpperCase() +
'\nAction: ' + input.action || 'null');
['input', 'textarea', 'select'].forEach(function (control) {
[].forEach.call(input.querySelectorAll(control), function (node) {
table.push({
'Element': node,
'Type': node.type,
'Name': node.name,
'Value': node.value,
'Pretty Value': (isNaN(node.value) || node.value === '' ?
node.value : parseFloat(node.value))
});
});
});
console.table(table);
console.groupEnd();
});
И к слову, Firebug сразу нормально показывает массивы и объекты.
Была на Хабре также ещё одна замечательная статья по теме «API консоли Javascript». В этой статье найдёте ссылки ещё на несколько других полезных старых статей с Хабра.
Команда действительно полезная, но стоит помнить, что console.table ничего не говорит о типе.
Время от времени бывает нужно различать Array и Object (например когда нужно выбрать между `forEach` и `Object.keys`).
Одинаковый вывод:
Время от времени бывает нужно различать Array и Object (например когда нужно выбрать между `forEach` и `Object.keys`).
Одинаковый вывод:
var languagesObj = {
0:{ name: "JavaScript", fileExtension: ".js" },
1:{ name: "TypeScript", fileExtension: ".ts" },
2:{ name: "CoffeeScript", fileExtension: ".coffee" }
};
var languagesArr = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languagesObj);
console.table(languagesArr);
Есть реализация этой функции у меня в модуле: console-ultimate.
Sign up to leave a comment.
Продвинутая JavaScript отладка при помощи console.table()