ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JavaScript Учебник

JavaScript Старт Введение в JavaScript Справочники Редакторы кода Консоль разработчика Привет, Мир! Структура кода Строгий режим Переменные Типы данных Alert. Prompt. Confirm Преобразование типов Базовые Операторы Операторы сравнения If... Else Логические операторы Оператор объединения Циклы While и For Switch Базовые функции Функции-выражения Функции-стрелки Особенности JavaScript Дебаггинг в Chrome Стиль кода Комментарии Ниндзя-код Тестирование с Mocha Полифилы Объекты Копирование объектов Уборка мусора Методы объекта Конструктор, New Опциональная цепочка Тип данных Symbol Преобразование объектов Методы примитивов Числа Строки Массивы Методы массивов Перебираемые объекты Map и Set WeakMap и WeakSet Object.keys, values, entries Деструктурирующее присваивание Дата и время Формат JSON Рекурсия и стек Остаточные параметры и оператор расширения Замыкание Ключевое слово var Глобальный объект Объект функции, NFE Синтаксис "new Function" Планирование: setTimeout и setInterval Декораторы и переадресация вызова, call/apply Привязка контекста к функции Повторяем стрелочные функции Флаги и дескрипторы свойств Свойства - геттеры и сеттеры Прототипное наследование F.prototype Встроенные прототипы Методы прототипов Класс: базовый синтаксис Наследование классов Статические свойства и методы Приватные и защищённые методы и свойства Расширение встроенных классов Проверка класса: "instanceof" Примеси Обработка ошибок, "try..catch" Пользовательские ошибки Введение: кэлбэки Промисы Цепочка промисов Промисы: обработка ошибок Promise API Промисификация Микрозадачи Async/await Генераторы Асинхронные итераторы и генераторы Модули. Введение Экспорт и импорт Динамические импорты Proxy и Reflect Eval: выполнение строки кода Каррирование Побитовые операторы BigInt Intl: интернационализация в JavaScript

Браузер: документ, события, интерфейсы

Браузерное окружение, спецификации DOM-дерево Навигация по DOM-элементам Поиск: getElement*, querySelector* Свойства узлов: тип, тег и содержимое Атрибуты и свойства Изменение документа Стили и классы Размеры и прокрутка элементов Размеры и прокрутка окна Координаты Введение в браузерные события Всплытие и погружение Делегирование событий Действия браузера по умолчанию Генерация пользовательских событий Основы событий мыши Движение мыши: mouseover/out, mouseenter/leave Drag'n'Drop с событиями мыши Клавиатура: keydown и keyup События указателя Прокрутка Свойства и методы формы Фокусировка: focus/blur События: change, input, cut, copy, paste Отправка формы: событие и метод submit Страница: DOMContentLoaded, load, beforeunload, unload Скрипты: async, defer Загрузка ресурсов: onload и onerror MutationObserver: наблюдатель за изменениями Selection и Range Событийный цикл: микрозадачи и макрозадачи

JavaScript. Уроки для начинающих

JavaScript Консоль разработчика


Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде…

Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.


Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).

Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но все же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.

Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.


Google Chrome

Откройте страницу bug.html.

В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.

Нажмите F12 или, если вы используете Mac, Cmd+Opt+J.

По умолчанию в инструментах разработчика откроется вкладка Console (консоль).

Она выглядит приблизительно следующим образом:

Инструмент разработчика в Chrome

Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.

  • В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
  • Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.

Под сообщением об ошибке находится синий символ >. Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter.


Многострочный ввод

Обычно при нажатии Enter введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите Shift+Enter. Так можно вводить более длинный JS-код.

Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере Chrome.


Firefox, Edge и другие

Инструменты разработчика в большинстве браузеров открываются при нажатии на F12.

Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.


Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Инструмент разработчика в Safari

Теперь консоль можно активировать нажатием клавиш Cmd+Opt+C. Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нём содержится большое количество команд и настроек.


Резюме

  • Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
  • В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12. В Chrome для Mac используйте комбинацию Cmd+Opt+J, Safari: Cmd+Opt+C (необходимо предварительное включение «Меню разработчика»).

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.