Ошибка JavaScript. Как найти и исправить ошибку JavaScript

Ошибка JavaScript. Как найти и исправить ошибку JavaScript

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Что же поможет найти ошибки JavaScript? Консоль браузера. Здесь мы вкратце пройдемся по этому инструменту в различных браузерах, в частности это будет Firefox и Chrome. В обоих браузерах консоль есть из коробки.

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

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

Итак, в открывшейся панели рядом со вкладкой Инспектор есть вкладка Консоль, она то нас и интересует. Переключимся на нее, еще раз обновим страницу и увидим все ошибки JavaScript. В нашем случае это всего одна синтаксическая ошибка, которая произошла в файле scripts.js на первой строке.

Нам остается лишь перейти в данный файл, заметить, что мы забыли заключить строку в кавычки и исправить эту ошибку:

Вот теперь ошибок нет и код успешно выполнился. Кроме встроенной консоли для Firefox можно отдельно установить расширение Firebug, которое, по сути, является аналогом. После установки Firebug можно вызвать, как и встроенную консоль, из контекстного меню или использовать для этого горячую клавишу F12. Вот таким образом выглядит Firebug:

Ну и консоль Хрома:

Она также вызывается из контекстного меню или клавишей F12.

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

На этом статья подошла к концу, теперь вы знаете, как найти в своем коде ошибки JavaScript и исправить их. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Алексей

    Здравствуйте! Не могу понять, в чём здесь ошибка…
    jQuery("body").append("<a href="https://translate.yandex.ru" rel="nofollow">Переводчик</a>")
    Вот что пишет в ошибке: Uncaught SyntaxError: missing ) after argument list

    • Андрей Кудлай

      Здравствуйте.
      Явная ошибка связана с кавычками, двойные кавычки вложены также в двойные. Так делать нельзя. Используйте либо одинарные вместе с двойными, либо экранируйте вложенные кавычки. Правильно так:
      jQuery("body").append('<a href="https://translate.yandex.ru" rel="nofollow">Переводчик</a>')
      Попробуйте. Если не сработает, значит, в коде есть еще ошибки.

      • Алексей

        Спасибо за ответ) Я уже сам разобрался, методом тыка и различных сочитаний))

  2. Анатолий

    Invoking error handler due to
    Uncaught RangeError: Array buffer allocation failed
    blob:krcdn.plarium.com/6fd07e86-0f45-451a-bdb5-fe6ff3a2bf3b:2 Uncaught RangeError: Array buffer allocation failed
    at new ArrayBuffer ()
    at Object.UnityLoader.2b716d30c2233257b82a30e3bd332477 (blob:krcdn.plarium.com/6fd07e86-0f45-451a-bdb5-fe6ff3a2bf3b:2)
    at UnityLoader.loadCode.Module (UnityLoader.js?v=3:1)
    at HTMLScriptElement.o.onload (UnityLoader.js?v=3:1)
    UnityLoader.2b716d30c2233257b82a30e3bd332477 @ blob:krcdn.plarium.com/6fd07e86-0f45-451a-bdb5-fe6ff3a2bf3b:2
    UnityLoader.loadCode.Module @ UnityLoader.js?v=3:1
    o.onload @ UnityLoader.js?v=3:1
    load (async)
    loadCode @ UnityLoader.js?v=3:1
    processAsmFrameworkJob @ UnityLoader.js?v=3:1
    i.callback @ UnityLoader.js?v=3:1
    a.bugsnag @ bugTracker.js?v=1:1
    (anonymous) @ bugTracker.js?v=1:1
    setTimeout (async)
    (anonymous) @ bugTracker.js?v=1:1
    i.complete @ UnityLoader.js?v=3:1
    UnityLoader.loadCode.Module @ UnityLoader.js?v=3:1
    o.onload @ UnityLoader.js?v=3:1
    load (async)
    loadCode @ UnityLoader.js?v=3:1
    processAsmCodeJob @ UnityLoader.js?v=3:1
    i.callback @ UnityLoader.js?v=3:1
    a.bugsnag @ bugTracker.js?v=1:1
    (anonymous) @ bugTracker.js?v=1:1
    setTimeout (async)
    (anonymous) @ bugTracker.js?v=1:1
    i.complete @ UnityLoader.js?v=3:1
    (anonymous) @ UnityLoader.js?v=3:1
    r.worker.onmessage @ UnityLoader.js?v=3:4

    подскажите что тут не так вообще ни фига не понимаю

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree