Работа с консолью: полезные скрипты для разработчика

Раздел: Разработка -> Инструменты разработчика

Основы работы с консолью JavaScript

Консоль инструментов разработчика позволяет выполнять произвольный JavaScript в контексте текущей страницы. Для открытия консоли используется клавиша F12 или сочетание Ctrl+Shift+I (Windows/Linux) или Cmd+Option+I (Mac). После этого следует перейти на вкладку Console.

Простой пример команды:

console.log("Привет, мир!");

Js консоль (консоль javascript)

Результат: в консоли появится текст "Привет, мир!", а затем вернется значение undefined (так как console.log не возвращает значение).

Типичные ошибки: синтаксическая ошибка (SyntaxError) при пропуске кавычек или скобок. Например, console.log(Привет) вызовет ошибку. Кавычки в JavaScript обязательны для строк. Точку с запятой ставить необязательно, но это хорошая привычка.

Если сообщение не отображается, проверьте фильтр уровней логов (All, Errors, Warnings, Info).

Как вывести сообщение с уровнем предупреждения?

Используется метод console.warn(). Вывод окрашивается желтым цветом и может содержать значок предупреждения.

console.warn("Это предупреждение");

Js команда (команды javascript в консоли браузера)

(отображается желтое сообщение)

Предупреждения могут быть скрыты, если в фильтре выбран только уровень Errors.

Как вывести данные в виде таблицы?

Метод console.table() отображает массивы и объекты в виде таблицы с колонками.

console.table([{a:1,b:2},{a:3,b:4}]);

(таблица с колонками a и b)

Для вложенных объектов глубже одного уровня таблица может не раскрывать структуру.

Как измерить время выполнения кода?

Команды console.time('метка') и console.timeEnd('метка') позволяют замерить время между вызовами.

console.time('loop');
for(let i=0;i<10000;i++){}
console.timeEnd('loop');

loop: 0.123 ms

Метка в time и timeEnd должна совпадать, иначе возникнет ошибка "Timer 'метка' does not exist".

Как получить элемент на странице?

Используется document.querySelector() или $0 (для элемента, выбранного на вкладке Elements).

let el = document.querySelector('h1');
console.log(el.textContent);

(текст заголовка)

Если элемент не найден, возвращается null. Обращение к свойству null вызовет ошибку. Следует проверять наличие элемента.

Как изменить стиль элемента?

Через свойство style. Изменения видны сразу.

document.querySelector('h1').style.color = 'red';

Цвет заголовка станет красным.

Изменения применяются только для текущей загрузки страницы и исчезают после перезагрузки.

Как выполнить асинхронный запрос (fetch) прямо в консоли?

В современных браузерах поддерживается top-level await. Команда выполняется с ключевым словом await.

await fetch('https://jsonplaceholder.typicode.com/posts/1').then(r=>r.json())

(объект с данными поста)

В старых браузерах top-level await не работает. В таком случае код оборачивается в асинхронную функцию: (async () => { ... })()

Как сохранить данные в localStorage?

Методы localStorage.setItem() и localStorage.getItem().

localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme'));

dark

localStorage хранит только строки. Для хранения объектов необходимо использовать JSON.stringify() и JSON.parse().

Как поставить точку останова в коде?

Команда debugger; при выполнении останавливает выполнение и открывает вкладку Sources.

for(let i=0;i<5;i++){debugger; console.log(i);}

При каждой итерации выполнение приостановится.

Если инструменты разработчика закрыты, debugger может быть проигнорирован.

Расширенные примеры команд JavaScript в консоли

Ниже приведены примеры, демонстрирующие более сложные сценарии использования консоли.

Пример 1: Манипуляции с массивом

Пример

let nums = [1,2,3,4,5];
let squared = nums.map(n=>n*n);
console.log(squared);

[1, 4, 9, 16, 25]

Пояснение: метод map создает новый массив, применяя функцию к каждому элементу.

Пример 2: Создание и добавление DOM-элемента

Пример

let newDiv = document.createElement('div');
newDiv.textContent = 'Создано в консоли';
newDiv.style.cssText = 'border:1px solid red; padding:10px;';
document.body.appendChild(newDiv);

Результат: на странице появляется красный блок с текстом.

При добавлении элемента убедитесь, что body существует (не внутри iframe).

Пример 3: Отправка POST-запроса с JSON

Пример

await fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({title:'foo', body:'bar', userId:1}),
  headers: {'Content-Type':'application/json'}
}).then(r=>r.json())

{
  "title": "foo",
  "body": "bar",
  "userId": 1,
  "id": 101
}

Пояснение: отправка данных на сервер с указанием метода, заголовков и тела.

Пример 4: Использование console.group для структурирования вывода

Пример

console.group('Группа 1');
console.log('Элемент 1');
console.log('Элемент 2');
console.groupEnd();
console.group('Группа 2');
console.log('Элемент A');
console.groupCollapsed('Подгруппа');
console.log('Скрытый элемент');
console.groupEnd();

Результат: в консоли отображаются сворачиваемые группы.

Пример 5: Обработка ошибок с try...catch в консоли

Пример

try {
  let x = JSON.parse('некорректный JSON');
  console.log(x);
} catch(e) {
  console.error('Ошибка парсинга:', e.message);
}

Ошибка парсинга: Unexpected token

Пояснение: перехват исключений предотвращает остановку выполнения.

Пример 6: Использование reduce для подсчета суммы

Пример

[10,20,30].reduce((acc,val)=>acc+val,0)

С помощью reduce можно агрегировать данные.

Пример 7: Вывод свойств объекта с console.dir

Пример

console.dir(document.location)

Отображает интерактивный список свойств объекта.

Пример 8: Подсчет вызовов функции с console.count

Пример

function test(){console.count('вызов');}
test(); test();

вызов: 1
вызов: 2

Полезно для отладки циклов и обработчиков.

Пример 9: Условный вывод с console.assert

Пример

let value = 5;
console.assert(value > 10, 'Значение меньше или равно 10');

(только если условие ложно, появляется сообщение об ошибке)

Метод выводит сообщение, только когда условие ложно.

Команды JavaScript в консоли браузера - comments

Js команда (javascript)