Отладка кода Javascript

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

Отладка кода

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

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

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

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

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

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

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

Обычно, чтобы начать отладку, достаточно в браузере активировать встроенный отладчик нажав клавишу F12 и в меню отладчика выбрать пункт "Консоль" ("Console"). Ниже будут показаны другие способы включения отладчика в разных браузерах.

Метод console.log()

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


<!DOCTYPE html>
<html>
<body>

<h1>Моя первая веб-страница</h1>

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

</body>
</html>

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

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

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

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

Ключевое слово debugger

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

У этого ключевого слова то же действие, что и у точек остановки в окне отладчика.

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

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


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

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

Обычно, чтобы начать отладку, достаточно в браузере нажать клавишу F12 и в меню отладчика выбрать пункт "Консоль" ("Console").

Иначе, чтобы начать отладку, проделайте следующее:

Chrome

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

Firefox Firebug

  • Запустите браузер.
  • Перейдите на страницу http://www.getfirebug.com
  • В соответствии с инструкцией установите Firebug

Internet Explorer

  • Запустите браузер.
  • В меню, выберите Средства разработчика.
  • Наконец, выберите Консоль.

Opera

  • Запустите браузер.
  • Перейдите на страницу http://dev.opera.com
  • В соответствии с инструкцией установите кнопку Консоль разработчика (Developer Console) на панель инструментов.

Safari Firebug

  • Запустите браузер.
  • Перейдите на страницу http://safari-extensions.apple.com
  • В соответствии с инструкцией установите Firebug Lite.