JavaScript
Приставка

Вступление

Синтаксис

• void console.log (obj1 [, obj2, ..., objN]);
• void console.log (msg [, sub1, ..., subN]);

параметры

замечания

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

Табличные значения - console.table ()

В большинстве сред console.table() может использоваться для отображения объектов и массивов в табличном формате.

Например:

console.table(['Hello', 'world']);

отображает как:

console.table({foo: 'bar', bar: 'baz'});

отображает как:

var personArr = [{"personId": 123, "name": "Jhon", "city": "Melbourne", "phoneNo": "1234567890"}, {"personId": 124, "name": "Amelia" , «город»: «Сидней», «phoneNo»: «1234567890»}, {«personId»: 125, «имя»: «Эмили», «город»: «Перт», «phoneNo»: «1234567890»} {«personId»: 126, «name»: «Авраам», «город»: «Перт», «phoneNo»: «1234567890»}];

console.table (personArr, ['name', 'personId']);

отображает как:

Включение трассировки стека при ведении журнала - console.trace ()

function foo() {
  console.trace('My log statement');
}

foo();

Отобразит это в консоли:

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

Примечание. Там, где это доступно, полезно также знать, что одна и та же трассировка стека доступна как свойство объекта Error. Это может быть полезно для последующей обработки и сбора автоматизированной обратной связи.

var e = new Error('foo');
console.log(e.stack);

Печать в консоли отладки браузера

Консоль отладки браузера может использоваться для печати простых сообщений. Эта отладка или веб - log console консоль может быть непосредственно открыта в браузере (клавише F12 в большинстве браузеров - см Примечания ниже для получения дополнительной информации) и log метод console Javascript объект может быть вызван с помощью следующей команды:

console.log('My message');

Затем, нажав « Ввод» , на дисплее появится My message в консоли отладки.

console.log() может вызываться с любым количеством аргументов и переменных, доступных в текущей области. Несколько аргументов будут напечатаны в одной строке с небольшим промежутком между ними.

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

Метод log отобразит на консоли отладки следующее:

['string']  1  Object { test: 1 }  Window { /* truncated */ }

Помимо простых строк, console.log() может обрабатывать другие типы, такие как массивы, объекты, даты, функции и т. Д .:

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

Вывод:

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

Вложенные объекты могут быть свернуты:

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

Вывод:

Object { key1: 'val', key2: Array[2], key3: Object }

Некоторые типы, такие как объекты Date и function s, могут отображаться по-разному:

console.log(new Date(0));
console.log(function test(a, b) { return c; });

Вывод:

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

Другие методы печати

В дополнение к методу log современные браузеры также поддерживают похожие методы:

• console.info - небольшая информативная иконка (ⓘ) появляется в левой части отпечатанных строк или объектов (ов).

• console.warn - значок с небольшим предупреждением (!) появляется с левой стороны. В некоторых браузерах фон журнала желтый.

• console.error - маленькая console.error пиктограмма (⊗) появляется с левой стороны. В некоторых браузерах фон журнала красный.

• console.timeStamp - выводит текущее время и указанную строку, но нестандартно:

  console.timeStamp('msg');
  

  Вывод:

  00:00:00.001 msg
  

• console.trace - выводит текущую трассировку стека или отображает тот же результат, что и метод log если он вызван в глобальной области.

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  Вывод:

  first
  sec
  (anonymous function)
  

На приведенном выше рисунке показаны все функции, за исключением timeStamp , в Chrome версии 56.

Эти методы ведут себя аналогично методу log а в разных консолях отладки могут отображаться в разных цветах или форматах.

В некоторых отладчиках информация отдельных объектов может быть дополнительно расширена путем нажатия на напечатанный текст или небольшой треугольник (►), который ссылается на соответствующие свойства объекта. Эти свойства коллапсирующего объекта могут быть открыты или закрыты в журнале. Дополнительную информацию об этом см. В console.dir

Время измерения - console.time ()

console.time() может использоваться для определения того, как долго выполняется задача в вашем коде.

Вызов console.time([label]) запускает новый таймер. Когда console.timeEnd([label]) , прошедшее время в миллисекундах, так как вычисляется и регистрируется вызов .time() . Из-за этого поведения вы можете вызывать .timeEnd() несколько раз с тем же ярлыком, чтобы регистрировать прошедшее время с момента вызова оригинала .time() .

Пример 1:

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

выведет:

response in: 774.967ms
response in: 1402.199ms

Пример 2:

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

выведет:

Loop time: 40.716ms

Подсчет - console.count ()

console.count([obj]) помещает счетчик на значение объекта, предоставленное в качестве аргумента. Каждый раз, когда этот метод вызывается, счетчик увеличивается (за исключением пустой строки '' ). Метка вместе с номером отображается в консоли отладки в соответствии со следующим форматом:

[label]: X

label представляет значение объекта, переданного как аргумент, и X представляет значение счетчика.

Значение объекта всегда рассматривается, даже если переменные представлены в качестве аргументов:

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

Вывод:

1: 1
2: 1
: 1
1: 2
2: 2
: 1

Строки с числами преобразуются в объекты Number :

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

Вывод:

42.3: 1
42.3: 2
42.3: 3

Функции всегда указывают на глобальный объект Function :

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

Вывод:

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

Некоторые объекты получают конкретные счетчики, связанные с типом объекта, к которому они относятся:

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

Вывод:

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

Пустая строка или отсутствие аргумента

Если аргумент не предоставляется при последовательном вводе метода подсчета в консоль отладки , пустая строка считается параметром, то есть:

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

Отладка с утверждениями - console.assert ()

Записывает сообщение об ошибке на консоль, если утверждение false . В противном случае, если утверждение true , это ничего не делает.

console.assert('one' === 1);

После утверждения можно предоставить несколько аргументов - это могут быть строки или другие объекты, которые будут напечатаны только в том случае, если утверждение false :

console.assert не бросает AssertionError (кроме Node.js ), что означает, что этот метод несовместим с большинством тестовых фреймворков и что выполнение кода не будет прерываться при неудачном утверждении.

Форматирование вывода консоли

Многие из методов печати в консоли также могут обрабатывать форматирование строки типа C , используя % токенов:

console.log('%s has %d points', 'Sam', 100);

Диски Sam has 100 points .

Полный список спецификаторов формата в Javascript:

Усовершенствованный стиль

Когда спецификатор формата CSS ( %c ) помещается в левой части строки, метод печати принимает второй параметр с правилами CSS, которые позволяют мелкомасштабный контроль над форматированием этой строки:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

Вывод:

Можно использовать несколько спецификаторов формата %c :

• любая подстрока справа от %c имеет соответствующий параметр в методе печати;
• этот параметр может быть строкой emtpy, если нет необходимости применять правила CSS к той же подстроке;
• если найдены два спецификатора формата %c , то 1- ^я (заключенная в %c ) и 2- ^я подстрока будет иметь свои правила, определенные в 2- ^м и 3- ^м параметрах метода печати соответственно.
• если три %c спецификаторов формата будут найдены, то 1 - ^й, 2 - ^й и 3 - ^й подстроки будут иметь свои правила , определенные во 2 - ^й, 3 - ^й и 4 - ^й параметр , соответственно, и так далее ...

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

Вывод:

Использование групп для вывода отступов

Вывод может быть идентифицирован и заключен в сворачиваемую группу в консоли отладки следующими способами:

• console.groupCollapsed() : создает свернутую группу записей, которая может быть расширена через кнопку раскрытия, чтобы выявить все записи, выполненные после вызова этого метода;
• console.group() : создает расширенную группу записей, которые могут быть свернуты, чтобы скрыть записи после вызова этого метода.

Идентификацию можно удалить для последующих записей, используя следующий метод:

• console.groupEnd () : завершает текущую группу, позволяя печатать новые записи в родительской группе после вызова этого метода.

Группы могут быть каскадированы, чтобы разрешить несколько идентичных выходных или разборных слоев внутри каждого из них:

= Collapsed group expanded =>

Очистка консоли - console.clear ()

Вы можете очистить консольное окно с помощью метода console.clear() . Это удаляет все ранее напечатанные сообщения в консоли и может печатать сообщение, подобное «Консоль была очищена» в некоторых средах.

Отображение объектов и XML в интерактивном режиме - console.dir (), console.dirxml ()

console.dir(object) отображает интерактивный список свойств указанного объекта JavaScript. Результат представлен как иерархический список с раскрывающимися треугольниками, которые позволяют видеть содержимое дочерних объектов.

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

дисплеи:

console.dirxml(object) печатает XML-представление потоковых элементов объекта, если это возможно, или представление JavaScript, если нет. Вызов console.dirxml() для элементов HTML и XML эквивалентен вызову console.log() .

Пример 1:

console.dirxml(document)

дисплеи:

Пример 2:

console.log(document)

дисплеи:

Пример 3:

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

дисплеи: