Отладка в Javascript

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

Ошибки в Javascript

1️⃣ Ошибка синтаксиса

Ошибка в том, как написан код, вызывает синтаксическую ошибку. Эта ошибка возникает, когда движок Javascript интерпретирует код во время выполнения.

2️⃣ TypeError

Эта ошибка возникает при использовании неправильного типа данных. Например, при применении метода string.substring к переменной, которая является числом.

3️⃣ RangeError

Когда код пытается использовать число, которое находится за пределами диапазона возможных значений, Javascript обнаруживает ошибку RangeError

4️⃣ URIError

Некоторые буквенно-цифровые символы запрещено использовать в URL. Ошибка URlError возникает, когда возникает проблема с кодированием или декодированием URI из-за использования зарезервированного символа.

5️⃣ Ошибка ссылки

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

6️⃣ EvalError

Эта ошибка возникает, когда возникает проблема с функцией eval(). Более новые версии Javascript не выдают эту ошибку.

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

Все современные браузеры содержат набор инструментов разработчика, которые помогают программистам работать с HTML, CSS и Javascript. Инструменты разработчика содержат функции для отладки Javascript и просмотра состояния элементов HTML в браузере. Чтобы открыть инструменты разработчика для браузера Google Chrome, нажмите Command+Option+I (Mac) & Control+Shift+I (Windows, Linux).

Консоль

Веб-разработчики могут выводить сообщения в консольный журнал, чтобы убедиться, что их код выполняется так, как ожидалось. Вкладка «Консоль» содержит две области:

1️⃣ Журнал вывода консоли: Отображает системные и пользовательские сообщения от выполнения Javascript.

2️⃣ Интерфейс командной строки консоли: Принимает любые инструкции Javascript и немедленно выполняет их.

Отладчик Javascript

Отладчик Javascript можно найти на вкладке Исходники. Отладчик позволяет просматривать код строка за строкой, чтобы увидеть, что происходит с переменными во время выполнения кода. Слева находится список всех исходных файлов, используемых в HTML-документе. Выберите файл для отладки из этого списка.

Область действия

На вкладке «Исходники» окно справа содержит область видимости. Локальная и глобальная секции под ней показывают переменные, которые определены в текущей области видимости. Область видимости заполняется переменными только во время отладки скрипта.

Точки останова

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

1️⃣ Возобновить выполнение сценария: Возобновляет выполнение до тех пор, пока программа не достигнет другой точки останова или пока программа не завершится.

2️⃣ Step-Over: Выполняет следующую строку кода за один шаг, а затем делает паузу на следующей строке. При этом выполняется переход к функции без отладки отдельных шагов функции.

3️⃣ Step into: Выполняет следующую строку кода, а затем делает паузу на следующей строке. Это позволяет переходить от строки к строке функции.

4️⃣ Step out: Выполняет оставшийся код в текущей функции и делает паузу, когда время выполнения возвращается к строке кода после вызова функции.

Обработка ошибок

В Javascript оператор try…catch позволяет программистам обрабатывать ошибки в коде. Обычно выполнение программы останавливается, когда движок Javascript выдает ошибку. Однако если код обернут в блок try, то при возникновении исключения выполнение перейдет в блок catch, и программа продолжит работу в обычном режиме. Также можно вручную вызвать ошибку с помощью оператора «throw».

Заявление Try…Catch

try{
     noSuchCommand(); // This function does not exist
}
catch (err) {  // The code jumps to the catch block instead of stopping the program execution
           console.error(err.message)
}
console.log("Script continues to run after the exception"); // The error message displayed in the console
Вход в полноэкранный режим Выйти из полноэкранного режима

Оператор броска

throw("Oops there was an error"); // The throw operator generates an error
Вход в полноэкранный режим Выйти из полноэкранного режима

Спасибо за чтение

Если вам понравилась эта статья, подпишитесь на мою рассылку
чтобы никогда не пропустить мои блоги, презентации продуктов и новости технологий, а также следите за мной в Twitter, чтобы ежедневно получать информацию о ресурсах для веб-разработчиков.

Оцените статью
Procodings.ru
Добавить комментарий