Пользователь
0,0
рейтинг
17 ноября 2013 в 12:58

Разработка → Продвинутая JavaScript отладка при помощи console.table() перевод

Вчера узнал об одной изящной возможности отладки в «Инструментах разработчика Chrome». На конференции "Web Developer Conference Compact" Маркус Росс (Marcus Ross — @zahlenhelfer) рассказывал о различных инструментах отладки, реализованных в Chrome, об одном из который я хочу рассказать.

Журналирование массива, при помощи console.log


Представим, что у вас есть массив языков программирования с соответствующими им файловыми расширениями:

var languages = [
    { name: "JavaScript", fileExtension: ".js" },
    { name: "TypeScript", fileExtension: ".ts" },
    { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.log(languages);

После console.log вы увидите следующее:

image

Это дерево безусловно полезно для отладки, но оно довольно громоздко, да и не особо удобно разворачивать каждый узел вручную. С console.table можно сделать лучше.

Журналирование массива, при помощи console.table


Вместо console.log воспользуемся console.table:

console.table(languages);

Убедитесь, что консоль открыта, перед тем как обновлять страницу, иначе вы ничего не увидите. Если все сделано правильно, вы увидите следующее:

image

Довольно аккуратно, правда?

Конечно table лучше всего работает с табличными данными. Если у всех объектов будут абсолютно разные поля — вы получите таблицу, в которой большинство ячеек — undefined. Но, не смотря на это, все будет выглядеть аккуратно, давая вам хороший общий обзор.

Журналирование объектов, при помощи console.table


Приятно, что console.table работает так же и с объектами:

var languages = {
    csharp: { name: "C#", paradigm: "object-oriented" },
    fsharp: { name: "F#", paradigm: "functional" }
};

console.table(languages);

image
Нечего добавить…

Фильтруем выводимые свойства


Если нужно выводить только определенные свойства, можно перечислить их во втором параметре console.table:

// Несколько свойств
console.table(languages, ["name", "paradigm"]);

Для одного свойства достаточно использовать строку:

// Одно свойство
console.table(languages, "name");

Подведем итог


Я думал, что знаю большинство функционала «Инструментов разработчика Chrome» — я ошибался. «Инструменты» переполнены полезными штуками, которые только и ждут, чтобы ими воспользовались. Серьезно, зайдите на страницу с официальной документаций, уверен, вы обязательно найдете для себя что-то новое.

От переводчика: надеюсь не я один не знал об этой возможности. В любом случае, порывшись на хабре, нашел офигенную статью по теме — FireBug* Console API — консоль там просто по косточкам разобрана…
Перевод: Marius Schulz
Артур Заяц @zag2art
карма
186,7
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (7)

  • +8
    Довольно часто использую такой сниппет:

    [].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();
    });
    
    
  • +6
    И к слову, Firebug сразу нормально показывает массивы и объекты.
    • +2
      Мало того в Firebug уже мильен лет есть этот же table
      • +1
        Если бы он ещё так не тормозил, цены бы ему не было. Но я всё равно пользуюсь Firebug — привычка дело суровое.
  • +1
    Была на Хабре также ещё одна замечательная статья по теме «API консоли Javascript». В этой статье найдёте ссылки ещё на несколько других полезных старых статей с Хабра.
  • +1
    Команда действительно полезная, но стоит помнить, что console.table ничего не говорит о типе.
    Время от времени бывает нужно различать 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);
    
  • 0
    Есть реализация этой функции у меня в модуле: console-ultimate.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.