JavaScript. Тестирование кода в браузере

Тестирование JavaScript прямо в браузере — один из самых быстрых и удобных способов проверить гипотезу, отладить функцию или изучить поведение API.

Содержание

Как тестировать JavaScript в браузере

Современные браузеры предоставляют нам инструменты разработчика (DevTools), включая консоль, которая и является основным инструментом для тестирования кода.

Как открыть инструменты разработчика и перейти в консоль:

Chrome / Edge / Brave: F12 или Ctrl + Shift + I
Firefox: F12 или Ctrl + Shift + K
Safari: сначала включить DevTools в настройках → затем Cmd + Option + C

После открытия инструментов разработчика перейдите на вкладку Console.

Быстрый запуск кода

В консоли можно выполнять JavaScript построчно:

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

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

Или тестировать функции:

function sum(a, b) {
  return a + b;
}

sum(2, 3);

function sum(a, b) {

return a + b;

}

sum(2, 3);

Результат сразу появится ниже.

Тестирование разных способов вывода:

console.log('Обычный вывод');
console.error('Ошибка');
console.warn('Предупреждение');
console.table([{a:1, b:2}, {a:3, b:4}]);

console.log('Обычный вывод');

console.error('Ошибка');

console.warn('Предупреждение');

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

Результат тестирования способов вывода:

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

Вставка кода в консоль

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

“Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Please type “allow pasting” below and press Enter to allow pasting.”

“Внимание: Не вставляйте в консоль инструментов разработчика код, который вы не понимаете или не проверили самостоятельно. Это может позволить злоумышленникам украсть ваши личные данные или получить контроль над вашим компьютером. Пожалуйста, введите «разрешить вставку» ниже и нажмите Enter, чтобы разрешить вставку.”

Запрет вставки скопированного кода — это защита от атак типа self-XSS, когда:

Пользователя убеждают вставить и запустить вредоносный код.
Выполненный скрипт крадёт сессионные файлы cookie, токены авторизации или пересылает конфиденциальные данные злоумышленнику.

Чтобы комфортно использовать консоль для тестирования JavaScript, необходимо разблокировать вставку из буфера обмена.

Как разблокировать вставку кода

Я работаю в Google Chrome и Microsoft Edge, поэтому способ разблокировки вставки кода и обратной блокировки протестировал только в этих браузерах.

Откройте консоль.
Вставьте любой текст — появится предупреждение.
Введите вручную (подсказка уже есть в самом предупреждении):

allow pasting

1	allow pasting

Нажмите Enter.
После этого вставка будет разрешена.

Как снова заблокировать вставку

Чтобы вернуть защиту назад, необходимо сбросить настройки DevTools:

Откройте Инструменты разработчика (F12).
В Google Chrome нажмите иконку Шестеренки (Settings) в верхнем правом углу. В Microsoft Edge нажмите три точки в верхнем правом углу, а затем, в открывшемся списке, иконку Шестеренки (Settings).
Оставайтесь на самой первой вкладке — Preferences (Настройки).
Прокрутите список в самый низ.
Найдите и нажмите кнопку Restore defaults and reload (Восстановить настройки по умолчанию и перезагрузить).

⚠️ Важно: Этот шаг вернет защиту и предупреждение обратно, но также сбросит все остальные ваши пользовательские настройки DevTools (например, тему оформления или измененный порядок вкладок).

Резюме

Консоль браузера — удобный инструмент для тестирования JavaScript, который позволяет быстро проверять код, отлаживать ошибки, даёт доступ к DOM и API браузера.

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