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

http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable
  • Перевод
Вчера узнал об одной изящной возможности отладки в «Инструментах разработчика 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 — консоль там просто по косточкам разобрана…
Метки:
  • +116
  • 33,9k
  • 7
Поделиться публикацией
Похожие публикации
Комментарии 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.

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