Как проверить javascript на ошибки
Перейти к содержимому

Как проверить javascript на ошибки

  • автор:

Исправление ошибок JavaScript, сообщаемых в консоли

В этой статье рассматриваются шесть демонстрационных страниц для демонстрации устранения ошибок JavaScript, о которых сообщается в консоли.

Исправление ошибок JavaScript

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

Демонстрационная страница: ошибка JavaScript, сообщаемая в средстве консоли

  1. Откройте демонстрационную веб-страницу с ошибкой JavaScript, сообщаемой в средстве консоли в новом окне или вкладке.
  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей.
  3. Нажмите кнопку Консоль на панели действий. В средствах разработки консоль предоставляет дополнительные сведения об ошибке: DevTools предоставляет подробные сведения об ошибке в консолиВо многих сообщениях об ошибках в консоли отображается кнопка Поиск этого сообщения на веб-кнопке , показанная в виде лупы. Дополнительные сведения см. в разделе Поиск в Интернете строки сообщения об ошибке консоли. Сведения в этом сообщении об ошибке показывают, что ошибка находится в строке error.html 16 файла.
  4. Щелкните ссылку error.html:16 справа от сообщения об ошибке в консоли. Откроется средство «Источники «, в котором выделена строка кода с ошибкой: Средство Скрипт пытается получить первый h2 элемент в документе и закрасить вокруг него красную границу. Но элемент не h2 существует, поэтому скрипт завершается сбоем.

Поиск и отладка проблем с сетью

Консоль также сообщает об ошибках сети.

Демонстрационная страница: сообщение об ошибке сети в консоли

  1. Откройте демонстрационную веб-страницу Ошибка сети в консоли в новом окне или вкладке.
  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей. Консоль отображает ошибку Таблица отображает loading , но на веб-странице ничего не меняется, так как данные никогда не извлекаются. В консоли произошли две следующие ошибки:
    • Ошибка сети, которая начинается с GET метода HTTP, за которым следует URI.
    • Ошибка Uncaught (in promise) TypeError: data.forEach is not a function .
  3. Щелкните ссылку на веб-страницу и строку кода, где возникает ошибка, чтобы открыть средство Источники. То есть щелкните ссылку network-error.html:40 в консоли: Выберите ссылку на веб-страницу и строку кода, в которой возникает ошибка, чтобы открыть средство Откроется средство Источники . Проблемная строка кода выделяется, за которой следует error кнопка ( x ).
  4. Нажмите кнопку ошибки ( x ). Появится сообщение Failed to load resource: the server responded with a status of 404 () . Чтобы найти ошибку в JavaScript, используйте средство Эта ошибка сообщает, что запрошенный URL-адрес не найден.
  5. Откройте средство «Сеть » следующим образом: откройте консоль и щелкните URI, связанный с ошибкой. После загрузки ресурса в консоли отображается код состояния HTTP ошибки: Консоль отображает код состояния HTTP ошибки после загрузки ресурса.В средстве «Сеть» отображаются дополнительные сведения о сбое запроса: Средство
  6. Проверьте заголовки в средстве «Сеть» , чтобы получить дополнительные сведения: Проверка заголовков в средстве В чем проблема? Два символа косой черты ( // ) имеются в запрошенном URI после слова repos .
  7. Откройте инструмент Источники и проверьте строку 26. Символ косой черты ( / ) возникает в конце базового URI. Средство «Источники » отображает строку кода с ошибкой: Средство

Просмотр итоговой страницы при отсутствии ошибок в консоли

Далее мы посмотрим на итоговую страницу, когда в консоли нет ошибок.

Демонстрационная страница: исправлена ошибка сети, сообщаемая в консоли

Пример без ошибок загружает информацию из GitHub и отображает ее

  1. Открытие демонстрационной веб-страницы Исправлена ошибка сети, сообщаемая в консоли в новом окне или вкладке. Пример без ошибок загружает информацию из GitHub и отображает ее:
Демонстрационная страница: Отчеты об ошибках сети в консоли и пользовательском интерфейсе

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

  1. Откройте демонстрационную веб-страницу Отчеты об ошибках сети в консоли и пользовательском интерфейсе в новом окне или вкладке.
  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей. Пример веб-страницы демонстрирует следующие методики:
    • Предоставьте пользователю пользовательский интерфейс, чтобы указать, что что-то пошло не так.
    • В консоли укажите полезные сведения об ошибке сети из кода.

В этом примере перехватывается и выводится сообщение об ошибках:

Пример перехвата ошибок и сообщения об ошибках

Следующий код в демонстрации перехватывает и сообщает об ошибках с помощью handleErrors метода , в частности throw Error строки:

const handleErrors = (response) => < if (!response.ok) < let message = 'Could not load the information' document.querySelector('tbody').innerHTML = ` Error $ `; throw Error(response.status + ' ' + response.statusText); > return response; >; 

Создание ошибок и трассировок в консоли

throw Error Помимо примера в предыдущем разделе, вы также можете создавать различные ошибки и проблемы трассировки в консоли.

Демонстрационная страница: создание отчетов об ошибках и утверждений в консоли

Чтобы отобразить два созданных сообщения об ошибках в консоли, выполните следующие действия:

Сообщения об ошибках отображаются в консоли

  1. Откройте демонстрационную страницу Создание отчетов об ошибках и утверждений в консоли в новом окне или вкладке.
  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей. В консоли отображаются сообщения об ошибках: На демонстрационной странице используется следующий код:

function first(name) < second(name); >function second(name) < third(name); >function third(name) < if (!name) < console.error(`Name isn't defined :(`) >else < console.assert( name.length is not less than eight letters"` ); > > first(); first('Console'); first('Microsoft Edge Canary'); 
  • first()
  • second()
  • third()

Каждая функция отправляет name аргумент в другую. third() В функции вы проверка, существует ли name аргумент, и если он не существует, регистрируется ошибка о том, что имя не определено. Если name задано значение , метод используется assert() для проверка, если аргумент имеет длину name менее восьми букв.

Вы запрашиваете функцию first() три раза со следующими параметрами:

  • Нет аргумента, активировающего console.error() метод в third() функции.
  • Термин Console в качестве параметра first() функции не вызывает ошибку, так как name аргумент существует и короче восьми букв.
  • Фраза Microsoft Edge Canary в качестве параметра функции приводит к first() тому, что console.assert() метод сообщает об ошибке, так как параметр длиннее восьми букв.

Демонстрация использует метод для создания условных console.assert() отчетов об ошибках. Следующие два примера имеют одинаковый результат, но для одного требуется дополнительная if<> инструкция:

let x = 20; if (x < 40) < console.error(`$is too small`) >; console.assert(x >= 40, `$ is too small`) 

Вторая и третья строки кода выполняют один и тот же тест. Так как утверждение должно записывать отрицательный результат:

  • Вы протестируете if в x < 40 случае.
  • Вы проверяете наличие x >= 40 утверждения.

Демонстрационная страница: создание трассировок в консоли

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

Чтобы отобразить трассировку в консоли, выполните следующие действия:

  1. Откройте демонстрационную страницу Создание трассировок в консоли в новом окне или вкладке.
  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей. На странице используется следующий код:

function here() function there() function everywhere() < console.trace(); >here(); there(); 

Трассировка, отображаемая в консоли

Результатом является трассировка, которая here() отображается с именем there() , а затем everywhere() , а во втором примере отображается, что она называется everywhere() . Ниже приведена трассировка, созданная в консоли:

См. также

  • Общие сведения о консоли . Общее использование консоли для отображения и устранения сообщений об ошибках.

Валидация, минификация и форматирование JavaScript

Инструмент для проверки и обработки исходного кода на JavaScript пригодится всем программистам. Операция форматирования позволяет привести «сырой» js-код к единой графической структуре, в результате чего он становится четким и читабельным. Удобный для разработчика вид скрипта занимает больший объем памяти, вследствие чего увеличивает время его обработки. Минификация джава скрипт за несколько секунд убирает все лишние пробелы, знаки табуляции и элементы, не влияющие на работоспособность. Кнопка «Валидировать» запускает процесс проверки синтаксиса валидатором js и подсвечивает все ошибки, незакрытые теги и опечатки.

2010- 2023 © Инвольта

Все права защищены.

Где мы находимся

Москва: Варшавское ш.,1 стр. 6

Юр. адрес: 153000, г. Иваново, ул.

Парижской Коммуны, д. 3а, офис 510

Валидатор Javascript

Сделает CSS код уменьшенным, сжатым путем удаления новых строк, пробелов, комментариев и отступов.

Украшатель HTML

Украшает, форматирует и сделает HTML код более читаемым.

Уменьшитель HTML

Сделает HTML код уменьшенным, сжатым путем удаления новых строк, пробелов, комментариев и отступов.

Украшатель Javascript

Украшает, форматирует и сделает Javascript код более читаемым.

Уменьшитель Javascript

Сделает Javascript код уменьшенным, сжатым путем удаления новых строк, пробелов, комментариев и отступов.

Обфускатор Javascript

Сделает Javascript код более сложным для понимания или чтения для защиты.

Украшатель JSON

Украшает, форматирует и сделает JSON код более читаемым.

Уменьшитель JSON

Сделает JSON код уменьшенным, сжатым путем удаления новых строк, пробелов, комментариев и отступов.

Украшатель XML

Украшает, форматирует и сделает XML код более читаемым.

Уменьшитель XML

Сделает XML код уменьшенным, сжатым путем удаления новых строк, пробелов, комментариев и отступов.

Украшатель OPML

Украшает, форматирует и сделает OPML код более читаемым.

Уменьшитель OPML

Сделает OPML код уменьшенным, сжатым путем удаления новых строк, пробелов, комментариев и отступов.

Украшатель SQL

Украшает, форматирует и сделает SQL код более читаемым.

Уменьшитель SQL

Сделает SQL код уменьшенным, сжатым путем удаления новых строк, пробелов, комментариев и отступов.

Что пошло не так? Устранение ошибок JavaScript

Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.

Нужно: базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель получить способность и уверенность в том, чтобы приступить к исправлению простых проблем в вашем собственном коде.

Типы ошибок

Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнётесь:

  • Синтаксические ошибки: Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!
  • Логические ошибки: Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но даёт неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.

Ладно, все не так просто — есть и другие отличия, которые вы поймёте, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.

Ошибочный пример

Чтобы начать работу, давайте вернёмся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию number-game-errors.html (см. здесь как это работает).

  1. Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.
  2. Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!

Примечание: Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьёй с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаём. Затем вы можете вернуться и попытаться исправить ваш пример.

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

Исправление синтаксических ошибок

Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в консоль разработчика JavaScript (если вы не можете вспомнить, как открыть это в своём браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что ещё более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подаётся в механизм JavaScript браузера. Теперь пойдём на охоту.

  1. Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках:
  2. Это довольно простая ошибка для отслеживания, и браузер даёт вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть:
    • Красный «x» означает, что это ошибка.
    • Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»
    • Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.
    • Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдёте по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.
    • Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.
  3. Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку:

.addeventListener("click", checkGuess); 

**Примечание:**См. наш TypeError: «x» не является справочной страницей функций для получения дополнительной информации об этой ошибке.

Синтаксические ошибки: второй раунд

Примечание: console.log() это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение lowOrHi в консоли, как только мы попытаемся установить его в строке 48.

  1. Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.
  2. Теперь, если вы попробуете ввести значение и нажать кнопку «Submit guess», вы увидите . другую ошибку!
  3. На этот раз сообщается об ошибке: «TypeError: lowOrHi is null», в строке 78.

Примечание: Null — это специальное значение, которое означает «ничего» или «не значение». Поэтому lowOrHi был объявлен и инициализирован без значения — у него нет типа или значения.

Примечание: Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри checkGuess() < . >блока). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция checkGuess() не была запущена строкой 86.

.textContent = "Last guess was too high!"; 
const lowOrHi = document.querySelector("lowOrHi"); 
.log(lowOrHi); 

  • Сохраните и обновите, и вы должны увидеть результат работы console.log() в консоли браузера. Разумеется, значение lowOrHi на данный момент равно null , поэтому определённо существует проблема в строке 48.
  • Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод document.querySelector() для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент

    :

    p class="lowOrHi">/p> 

    Примечание: Загляните на справочную страницу TypeError: «x» is (not) «y», чтобы узнать больше об этой ошибке.

    Синтаксические ошибки: третий раунд

    1. Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.
    2. На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — «TypeError: resetButton.addeventListener is not a function»! Однако, теперь она происходит из-за строки 94.
    3. Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить addeventListener на addEventListener .

    Логическая ошибка

    На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определённо не совсем так, как мы хотим, чтобы игра была разыграна!

    Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.

      Найдём переменную randomNumber , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44:

    let randomNumber = Math.floor(Math.random()) + 1; 

    И на строке 113, где мы генерируем случайное число, каждый раз после окончания игры:

    = Math.floor(Math.random()) + 1; 
    .log(randomNumber); 

    Работаем через логику

    Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем Math.random() , который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.

    .random(); 

    Дальше, мы передаём результат вызова Math.random() через Math.floor() , который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:

    Math.floor(Math.random()) + 1;

    Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1. Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернёт нам случайное число между 0 и 99:

    .floor(Math.random() * 100); 

    поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:

    .floor(Math.random() * 100) + 1; 

    А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!

    Другие распространённые ошибки

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

    SyntaxError: отсутствует ; перед постановкой

    Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции checkGuess() :

    var userGuess = Number(guessField.value); 
    var userGuess === Number(guessField.value); 

    Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания ( = ), который присваивает значение переменной — с оператором сравнения ( === ), который строго сравнивает операнды, и возвращает true / false .

    Примечание: Загляните на справочную страницу Синтаксическая ошибка: пропущен символ ; до объявления инструкции для получения дополнительной информации об этой ошибке.

    В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели

    Причиной этому является все то же перепутывание оператора присваивания ( = ) со строгим сравнением ( === ). Например, если мы изменим внутри checkGuess() эту строку кода:

    if (userGuess === randomNumber)  
    if (userGuess = randomNumber)  

    мы всегда будем получать true , заставляя программу сообщать, что игра была выиграна. Будьте осторожны!

    SyntaxError: отсутствует ) после списка аргументов

    Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.

    Примечание: Загляните на справочную страницу SyntaxError: missing ) after argument list для получения дополнительной информации об этой ошибке.

    SyntaxError: missing : after property id

    Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив

    function checkGuess()  
    function checkGuess(  

    Это заставило браузер думать, что мы пытаемся передать содержимое функции в функцию в качестве аргумента. Будьте осторожны с этими скобками!

    SyntaxError: missing > after function body

    Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции checkGuess() .

    SyntaxError: expected expression, got ‘string‘ or SyntaxError: unterminated string literal

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

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

    Примечание: : Смотрите наш SyntaxError: Неожиданный токен и SyntaxError: незавершённая строка эталонных страниц для получения более подробной информации об этих ошибках.

    Резюме

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

    Смотрите также

    • Есть много других типов ошибок, которые не перечислены здесь; мы составляем ссылку , которая объясняет , что они означают подробно — см. ссылку ошибки JavaScript .
    • Если вы столкнётесь с любыми ошибками в коде, которые вы не знаете , как исправить после прочтения этой статьи, вы можете получить помощь! Спросите на нить обучения Область дискурсе , или в #mdn IRC канал на Mozilla IRC. Расскажите нам, какая у вас ошибка, и мы постараемся вам помочь. Приложите пример своего кода для большей ясности проблемы.
    • Назад
    • Обзор: Первые шаги
    • Далее

    Found a content problem with this page?

    • Edit the page on GitHub.
    • Report the content issue.
    • View the source on GitHub.

    This page was last modified on 3 авг. 2023 г. by MDN contributors.

    Your blueprint for a better internet.

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *