Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


Отладка JavaScript


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


Отладка кода

Программный код может содержать синтаксические или логические ошибки.

Многие из этих ошибок трудно диагностировать.

Часто, когда программный код содержит ошибки, ничего не происходит. Сообщений об ошибках нет, и вы не получите указаний, где искать ошибки.

Поиск (и исправление) ошибок в программном коде называется отладкой кода.


Отладчики JavaScript

Отладка не проста. Но, к счастью, все современные браузеры имеют встроенный отладчик JavaScript.

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

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

Обычно, в противном случае следуйте инструкциям внизу этой страницы, вы активируете отладку в своем браузере с помощью клавиши F12 и выбираете «Консоль» в меню отладчика.


Метод console.log()

Если ваш браузер поддерживает отладку, вы можете использовать console.log()для отображения значений JavaScript в окне отладчика:

Пример

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

Совет: подробнее об этом console.log()методе читайте в нашем Справочнике по консоли JavaScript .


Установка точек останова

В окне отладчика вы можете установить точки останова в коде JavaScript.

В каждой точке останова выполнение JavaScript прекращается, и вы можете проверить значения JavaScript.

После проверки значений вы можете возобновить выполнение кода (обычно с помощью кнопки воспроизведения).



Ключевое слово отладчика

Ключевое debuggerслово останавливает выполнение JavaScript и вызывает (если доступно) функцию отладки.

Это имеет ту же функцию, что и установка точки останова в отладчике.

Если отладка недоступна, оператор отладчика не действует.

При включенном отладчике этот код прекратит выполнение до того, как выполнит третью строку.

Пример

let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Инструменты отладки основных браузеров

Обычно вы активируете отладку в своем браузере с помощью F12 и выбираете «Консоль» в меню отладчика.

В противном случае выполните следующие действия:

Хром

  • Откройте браузер.
  • В меню выберите «Дополнительные инструменты».
  • Из инструментов выберите «Инструменты разработчика».
  • Наконец, выберите Консоль.

Fire Fox

  • Откройте браузер.
  • В меню выберите «Веб-разработчик».
  • Наконец, выберите «Веб-консоль».

Край

  • Откройте браузер.
  • В меню выберите «Инструменты разработчика».
  • Наконец, выберите «Консоль».

Опера

  • Откройте браузер.
  • В меню выберите «Разработчик».
  • В разделе «Разработчик» выберите «Инструменты разработчика».
  • Наконец, выберите «Консоль».

Сафари

  • Перейдите в Safari, «Настройки», «Дополнительно» в главном меню.
  • Установите флажок «Включить отображение меню «Разработка» в строке меню».
  • Когда в меню появится новая опция «Разработка»:
    Выберите «Показать консоль ошибок».

Вы знали?

Отладка — это процесс тестирования, поиска и устранения ошибок (ошибок) в компьютерных программах.
Первым известным компьютерным жуком был настоящий жук (насекомое), застрявший в электронике.