Отладка JavaScript кода

Найти ошибку в коде js

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

Неправильно расставить кавычки вообще маловероятно, потому что в текстовых редакторах текст в кавычках обычно выделяется своим цветом.

Найти незакрытую скобку также помогут текстовые редакторы для программирования. В Notepad++ если поставить курсор после открывающей скобки, то она и соответствующая ей закрывающая скобка будут выделены красным цветом. Это работает со всеми видами скобок.

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

Поиск алгоритмических ошибок

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

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

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

Средства отладки JavaScript кода

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

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

Результат будет выглядеть так:

Справа указана строка, которая вывела эту информацию.

В консоли DOM-объект выглядит так:

Вкладка «Отладка» панели инструментов позволяет приостановить выполнение скрипта на любой строке и посмотреть, какие значения имеют переменные на этом этапе. Вкладка разделена на три части. В левой части показаны файлы, в которых содержатся скрипты.

Кликните на нужном файле и в средней части вкладки отобразиться код файла. Строки кода пронумерованы. Можно кликнуть на номерах нужных строк и они будут выделены синим цветом. На этих строках выполнение скрипта будет приостанавливаться. Такие строки называются точки останова. Они перечислены также в правой части вкладки.

Когда вы выбрали нужные строки, запустите страницу заново. Скрипт остановится на первой выбранной строке и можно будет посмотреть, как выглядит страница в этот момент. Также можно узнать какие значения имеют переменные. В правой части вкладки нужно нажать «+», написать имя переменной и нажать Enter. Затем можно добавить другую переменную.

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

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

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

Руководство по обработке ошибок в JavaScript

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

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

Этот материал, посвящённый обработке ошибок в JavaScript, разбит на три части. Сначала мы сделаем общий обзор системы обработки ошибок в JavaScript и поговорим об объектах ошибок. После этого мы поищем ответ на вопрос о том, что делать с ошибками, возникающими в серверном коде (в частности, при использовании связки Node. js + Express. js). Далее — обсудим обработку ошибок в React. js. Фреймворки, которые будут здесь рассматриваться, выбраны по причине их огромной популярности. Однако рассматриваемые здесь принципы работы с ошибками универсальны, поэтому вы, даже если не пользуетесь Express и React, без труда сможете применить то, что узнали, к тем инструментам, с которыми работаете.

Код демонстрационного проекта, используемого в данном материале, можно найти в этом репозитории.

1. Ошибки в JavaScript и универсальные способы работы с ними

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

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

Объект Error

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

Генерирование и обработка ошибок

Конструкция try…catch

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

Блок finally

Асинхронные механизмы — коллбэки

Асинхронные механизмы — промисы

Асинхронные механизмы и try…catch

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

2. Генерирование и обработка ошибок в серверном коде

Теперь, когда у нас есть инструменты для работы с ошибками, посмотрим на то, что мы можем с ними делать в реальных ситуациях. Генерирование и правильная обработка ошибок — это важнейший аспект серверного программирования. Существуют разные подходы к работе с ошибками. Здесь будет продемонстрирован подход с использованием собственного конструктора для экземпляров объекта Error и кодов ошибок, которые удобно передавать во фронтенд или любым механизмам, использующим серверные API. Как структурирован бэкенд конкретного проекта — особого значения не имеет, так как при любом подходе можно использовать одни и те же идеи, касающиеся работы с ошибками.

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

Разработка собственного конструктора объектов ошибок

Маршрутизация

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

Для того чтобы справиться с этой проблемой, мы можем реализовать собственный обработчик маршрутов и определять логику маршрутов в виде обычных функций. Благодаря такому подходу, если функция маршрута (или любая другая функция) выбрасывает ошибку, она попадёт в обработчик маршрутов, который затем может передать её клиентской части приложения. При возникновении ошибки на сервере мы планируем передавать её во фронтенд в следующем формате, полагая, что для этого будет применяться JSON-API:

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

Вот как выглядит код обработчика маршрутов.

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

Теперь взглянем на файл маршрутов.

Как использовать консоль браузера Chrome для поиска и исправления ошибок JavaScript

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

Причины ошибок 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 или поддержке вашего сайта, свяжитесь с нами и я постараюсь помочь вам решить проблему.