JS30. Задание 9 Dev Tools Domination


Не очень интересное занятие и вовсе не проект. Некоторые возможности консоли разработчика 

Логи

 В консоль можно вывести сообщение
console.log( 'message' );

console.log ()

Заполнители

Можно вывести сообщение с заполнителями для произвольных данных:
console.log( 'message with a %s', 'placeholder' );

console.log () с заполнителями

Стилизация сообщений

Если в качестве заполнителя использовать css-стили, сообщение в консоли будет отформатировано:
console.log( '%cmessage with style', 'color: red; font-size: 24px; font-weight: 600' );

console.log () с моделированием

Предупреждения

Вы можете войти предупреждающее сообщение: (на самом деле нельзя, будет сообщение об ошибке)
console.warning( 'warning message' );

console.warn ()

Уведомления об ошибках

Помимо обычных сообщений и предупреждений, есть также сообщения об ошибках:
console.error( 'error message' );

console.error ()

Информационные сообщения

Вы можете также войти некоторые информационные сообщения: (которые никак не отличаются от обычных)
console.info( 'info message' );

console.info ()

Утверждения

В случае, если вы хотите войти сообщение об ошибке, если какое-либо условие не удается, вы можете использовать утверждение. Вот глупый пример: (здесь не поняла что это такое)
console.assert( false, 'expected false to be true' );

console.assert ()

Очистка консоли

Очистка консоли: (но проще для очистки использовать кнопку слева вверху)
console.clear();

Вывести в консоль элемент DOM

console.log() может обрабатывать почти все элементы DOM:
console.log( document.querySelector( 'p' ) );

console.log () элемент DOM

Вывести в консоль элемент DOM способ№2

Еще один способ вывести элемент DOM в консоль, console.dir(). Вот так:
console.dir( document.querySelector( 'p' ) );

console.dir ()

Вывести в консоль группу элементов

Это 
является
должно быть можно выводить группы в консоли, и такой группой может быть либо развернут или свернут по умолчанию.
dogs.forEach( ( dog ) => {
    console.groupCollapsed( dog.name );
    console.log( `This is ${dog.name}.` );
    console.log( `${dog.name} is ${dog.age} years old.` );
    console.log( `${dog.name} is ${Math.min( 2, dog.age ) * 10.5 + Math.max( 0, dog.age - 2 ) * 4} years old.` );
    console.groupEnd( dog.name );
} );

console.group [Свернутые] ()

Счетчики

Можно создать несколько независимых счетчиков

console.count( 'counter' );
console.count( 'counter' );
console.count( 'counter' );

console.count ()

Это может быть полезно при отладке что-то. Если вы хотите знать, как часто что-то вызывается, итерация и т.д. только увеличивает выделенный счетчик, и вам не нужен реальный отладчик вообще.

Тайминг

Также возможно ко времени выполнения конкретной функции или задачи.
console.time( 'fetching' );
setTimeout( () => console.timeEnd( 'fetching' ), 1234 );

console.time () и console.timeEnd ()

Таблицы

Последнее, но не менее, вы можете также отображать любые табличные данные в макете реальной таблицы:
console.table( dogs );

console.table ()

Демо

Хотите увидеть это в действии? Ну, вот это демо .🙂