Отладка JavaScript в браузере Microsoft Edge

карта JavaScript Программирование и разработка

Работая с JavaScript, мы часто сталкиваемся с несколькими ошибками, но найти их — действительно непростая задача. Итак, в этой статье мы узнаем, как отлаживать JavaScript в Microsoft Edge.

Действия по отладке JavaScript в Microsoft Edge

  1. Обнаружение ошибки
  2. Знание пользовательского интерфейса инструмента источников.
  3. Используйте точку останова, чтобы приостановить код
  4. Установка точки останова на строке кода
  5. Проверьте значения переменных
  6. Исправьте код

Шаг 1: Найдите ошибку

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

Javascript

//get-started.js file
function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = "Error: one or both inputs are empty.";
    return;
  }
  /* <!-- # throw "whoops"; -->  */
  updateLabel();
}
function inputsAreEmpty() {
  if (getNumber1() === "" || getNumber2() === "") {
    return true;
  } else {
    return false;
  }
}
function updateLabel() {
  var addend1 = getNumber1();
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
  return inputs[0].value;
}
function getNumber2() {
  return inputs[1].value;
}
var inputs = document.querySelectorAll("input");
var label = document.querySelector("p");
var button = document.querySelector("button");
button.addEventListener("click", onClick);

Выход:

Теперь, как вы можете видеть, он не дает правильного резул

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

Шаг 2. Знакомство с пользовательским интерфейсом инструмента источников

Microsoft Edge предоставляет нам различные инструменты разработчика для выполнения разных задач. Чтобы открыть инструменты разработчика, щелкните правой кнопкой мыши в любом месте веб-страницы и выберите «Проверить».

Читайте также:  Основы программирования для начинающих

Microsoft Edge предоставляет нам различные инструме

Выберите инструмент «Источники». Он состоит из трех частей:

  • Панель в левом верхнем углу называется вкладкой «Навигатор». В нем перечислены все файлы, запрошенные веб-страницей. Ее еще называют вкладкой страницы.
  • После того как вы выбрали файл на панели навигатора, все его содержимое появится на правой панели, эта вкладка называется вкладкой «Редактор».
  • Нижняя вкладка, предоставляющая широкий набор инструментов для отладки кода, называется вкладкой «Отладчик».

Для отладки кода на вкладке навигатора выберите файл JavaScript. Здесь мы выберем файл get-started.js.

Для отладки кода на вкладке навигатора выберит

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

Шаг 3. Используйте точку останова, чтобы приостановить выполнение кода

  • Теперь переходим к самой части, т. е. отладке кода, нам нужно увидеть, где находится ошибка. Распространенный подход к поиску ошибки — это маркировка точек останова. Это альтернатива оператору log(), но она занимает немного меньше времени.
  • Итак, давайте применим точки останова к нашему коду и проверим, где ошибка. Как показано на изображении выше, наш вывод отображается при нажатии кнопки. его рассказывает нам о возникновении события. Следовательно, мы будем использовать точку останова прослушивателя событий.

Чтобы применить его, на вкладке отладчика:

  • Прокрутите немного и нажмите «Точки останова прослушивателя событий».
  • Затем щелкните правой кнопкой мыши «мышь», поскольку это событие происходит при щелчке мыши. Затем щелкните правой кнопкой мыши «мышь», поскольку это собы
  • Теперь поставьте галочку «щелкнуть». При этом ваши инструменты разработки будут автоматически приостанавливать работу при каждом щелчке мыши.
  • Теперь, когда вы перезапустите код и нажмете кнопку «ДОБАВИТЬ», ваш код автоматически приостановится, как только произойдет щелчок мыши.

Шаг 4. Пройдите по коду

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

Нажмите «Перейти к следующему вызову функции». DevTools запустит следующий код, не входя в него.
В инструменте «Источники» в DevTools нажмите «Перейти к следующему вызову функции», чтобы просмотреть время выполнения функции updateLabel()по одной строке за раз.

Шаг 5. Установка точки останова на строке кода

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

Точки останова на строке кода — это еще один распростра

Как вы можете видеть на скриншоте выше, в строке номер 20 рядом с кодом стоит красный кружок. Это указывает на строку точки останова кода. Devtools всегда будет делать паузу перед этой строкой кода, как это можно было видеть выше.

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

огда вы нажмете кнопку «Возобновить выполнение сцена

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

Шаг 6. Проверьте значения переменных

Теперь значения переменных, возвращенные на предыдущем шаге, кажутся неверными. Глядя на код, мы видим, что числа записаны в кавычках («„), что повышает вероятность того, что числа обрабатываются как строка. Мы могли бы попытаться получить больше информации об этих переменных.

Для этого нажмите вкладку просмотра, выберите кнопку “+» и введите «typeof sum», чтобы узнать тип переменной, и она вернет ее тип данных, как показано.

ля этого нажмите вкладку просмотра, выберите кнопк

Теперь мы можем признать свою ошибку и должны ее исправить.

Шаг 7. Исправьте код

Переходя к последнему шагу, нам нужно, чтобы числа анализировались как целые числа, поэтому мы заменим строку 19 на «var sum = parseInt(addend1) + parseInt(addend2);» в панели редактора. Таким образом, вы можете исправить свой код с помощью Devtools.

Удалите точки останова и затем запустите код.

Удалите точки останова и затем запустите к

Теперь вы успешно исправили код. Убедитесь, что вы исправляете исходный код после тестирования его в панели редактора, поскольку он не будет работать после обновления страницы.

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