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

Содержание

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

Причины ошибок JavaScript

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

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

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

Консоль браузера и проверка ошибок JavaScript?

Если вы считаете, что проблема на вашем сайте вызвана ошибкой JavaScript, ваш браузер Chrome может легко это проверить. Вот как.

Шаг 1. Откройте консоль либо в виде отдельной панели, либо в виде ящика рядом с другой панелью.

У вас есть два варианта открытия панели консоли:

У вас также есть два варианта открытия консоли в виде ящика рядом с другой панелью:

Шаг 2: Теперь вы увидите данные, отображаемые в консоли. Вот пример на скриншоте.

Поиск распространенных ошибок JavaScript

Теперь, когда у вас есть открытая консоль, пришло время выяснить, какого черта мы смотрим, и посмотреть, есть ли какие-либо ошибки JavaScript.

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

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

Топ 10 самых распространенных ошибок JavaScript

Теперь давайте углубимся и обсудим некоторые наиболее распространенные ошибки JavaScript, с которыми вы можете столкнуться в Chrome, Safari и Internet Explorer.

1. Uncaught TypeError: Cannot read property. Невозможно прочитать свойство.

Эта ошибка возникает в Chrome при вызове метода или при чтении свойства для неопределенного объекта.

2. TypeError: ‘undefined’ is not an object (evaluating). ‘undefined’ не является объектом (оценка).

Эта ошибка возникает в Safari при вызове метода или при чтении свойства для неопределенного объекта.

3. TypeError: null is not an object (evaluating). null не является объектом (оценка).

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

4. (unknown): Script error. Ошибка скрипта.

Вы увидите эту ошибку, когда ошибка JavaScript, которая не была обнаружена, нарушает политику перекрестного происхождения и пересекает границы домена.

5. TypeError: Object doesn’t support property. Объект не поддерживает свойство.

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

6. TypeError: ‘undefined’ is not a function. «undefined» не является функцией.

Эта ошибка возникает в Chrome, когда вызывается неопределенная функция.

7. Uncaught RangeError: Maximum call stack. Максимальный стек вызовов.

Это еще одна ошибка Chrome, которая может быть вызвана рядом сценариев.

8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство ‘length’.

Эта ошибка Chrome срабатывает, когда свойство длины чтения неопределенной переменной.

9. Uncaught TypeError: Cannot set property. Невозможно установить свойство.

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

10. ReferenceError: event is not defined. Событие не определено.

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

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

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

Как решить проблему с javaScript

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

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

То есть по сути перед вами выбор: изучить и сделать самому или нанимать специалиста, который сделает исправление ошибок и решит вашу проблему.

Если вам критически нужна помощь в поиске и исправлении ошибок JavaScript или поддержке вашего сайта, свяжитесь с нами и я постараюсь помочь вам решить проблему.

Как найти ошибки в коде JavaScript с помощью отладчика

От автора: знаете ли вы, что в JavaScript встроен отладчик? Отладчик полезен, когда дело доходит до поиска ошибок и обхода вложенных обратных вызовов, promise и т. д. Этот отладчик работает как с отрисованным кодом на стороне клиента, так и на стороне сервера.

Синтаксис

Объявление debugger позволяет остановить выполнение кода и проверить любые переменные, значения и т. д. По сути, он выступает в качестве ключевого слова return и останавливает выполнение функции.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Когда мы выполним код выше, вот, что мы должны увидеть. Обратите внимание на текст «paused in debugger» и кнопки resume и loop-over справа. В левой панели мы видим вкладку «источники» и функцию debugThis со значениями, которые мы передали. Если вы навете курсор на переменные a и b — вы увидите их значения.

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

Для возобновления выполнения в обычном режиме нажмите кнопку «resume»

Объявление debugger вызывает весь доступный функционал для отладки, такой как установка точек прерывания. Если функции отладки недоступны, оператор не даст никакого эффекта.

Несколько отладчиков

Отладчики на самом деле работают, когда у нас есть более одного объявления debugger и множество обратных вызовов или promise. Рассмотрим пример, когда у нас есть функция замыкания. Мы берем значение внешней функции a и передаем его внутренней функции:

Отладчик дает нам гибкий способ проверки всех значений функции. Внутри замыкания, мы можем проверить значения аргументов a, b и c. Наведите указатель мыши на аргументы функции и убедитесь сами.

Отладчик внутри замыкания

Теперь, когда мы освоили debugger, давайте перейдем к более сложному примеру. Сначала мы проверяем, передаем ли мы аргумент name функции createPerson. Если нет, мы прекращаем выполнение всего кода и выдаем предупреждение на консоль. Если есть name, создаем объект person с переданными ему аргументами.

После того, как мы вызовем функцию createPerson с заданными аргументами, должен появиться отладчик. Давайте посмотрим, что это говорит нам.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Запуск первого отладчика

Первый debugger действительно срабатывает и дает нам доступ для проверки аргументов createPerson. Можете ли вы сказать, что произойдет, если мы осмотрим объект person?

Объект person не определен

Не определено? Почему не person определено? Просто — потому что мы еще не выполнили эту часть кода. Мы остановили выполнение кода в первой строке функции. У нас нет доступа к объекту person, так как он не существует.

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

Второй отладчик отключается

Теперь мы внутри функции hasName — эта функция быстро проверяет, передано ли name функции person или нет. Не имеет особого смысла размещать его в отдельной функции, поскольку мы можем проверить одно свойство внутри createPerson — но для демонстрационных целей отладчика это поможет получить представление о том, как применить отладчик практически. Наш объект person все еще undefined, так как мы выполняем функцию hasName, и не достигли той части, где мы создаем объект person.

Наконец, нажмите кнопку возобновления и запустите третий отладчик:

Запуск третьего отладчика

Вуаля! Мы должны иметь возможность видеть все значения переменных и объектов, поскольку мы достигли конца исполнения кода. Что произойдет, если мы не передадим name в функцию createPerson?

Что произойдет, если мы не передадим имя функции createPerson

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

В следующий раз, прежде чем писать console. log, попытайтесь найти основания для использования отладчика. На бумаге вы можете настроить свой веб-упаковщик, например, webpack или parcel, для удаления операторов debugger в производстве по умолчанию. Отладчик также работает в среде Node.

Заключение

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

Автор: Indrek Lasn

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения