как отладить код javascript

Отладка Javascript

(Примечание: наверное эта статья больше для новичков. Так что не судите строго)

Казалось бы — да что тут рассказывать? Всё же очевидно. Но вопрос этот мне задают с завидной частотой. Да и мне есть, что рассказать.

Приведу конкретные примеры и расскажу, как я их решаю.

Видим цель, не видим препятствий

JavaScript вывалил ошибку? Замечательно! Нет, это конечно плохо, но гораздо лучше, чем если бы он промолчал (да, бывает и такое!) в случае ошибки.

Наша цель — понять, что же, чёрт побери, произошло? Но сначала — рекламная пауза лирическое отступление: средства JavaScript Debug’а в основных браузерах.

Debuggers

Как «тормознуть» поток

А вот вариант с условной остановкой:

Мне так нравится гораздо больше, чем ставить «бряку»: так я пишу код и дебажу его по сути в одном месте, а не в двух.

Debug через alert()

Это наименее информативный debug, который к тому же останавливает поток JavaScript. Да к тому же модальный по отношению к браузеру. Забудьте, что он вообще существует.

Особенность breakpoint’ов

Рассмотренные варианты все, как один, тормозят поток JavaScript. Это плохо!

Почему? Если в момент остановки скрипта у вас был запущен AJAX-запрос или Timeout, и ответ не успел вернутся — он может уже не вернутся никогда. Согласитесь, в современных web-проектах этого добра хватает. Поэтому в момент «экстренной остановки» скрипта мы уже не сможем адекватно debug’ать дальше — часть логики будет безвозвратно утеряна.

Поэтому я стараюсь избегать на практике debug с остановкой.

«Debugging JavaScript with breakpoints is bad, mmkay?» © Mr. Mackey, South Park

Однако: breakpoint есть breakpoint, и если вы исследуете ну очень запущенный баг — тут без остановки не обойтись (надо будет сделать watch текущим переменным и т.д.)

«Правильный» debug

Пример №1

JavaScript показал ошибку. Надо понять — что к чему.
Включаем в debugger’е режим «Break On Error»:

Воспроизводим ошибку снова. JavaScript останавливается. Видим место ошибки, делаем watch и точно определяем, в чём же дело.

Пример №2

CASE:
JavaScript не показал ошибку. Но вы знаете, что она есть (как суслик). Да, такое иногда бывает.

CASE:
Надо просто продебажить некий код. Скажем, посмотреть, что происходит по нажатию кнопки или после AJAX-загрузки данных.

Тут сложней — надо найти, с чего начать.

Немного искусства

// условная остановка
if (allowBreakpoints == true )
debugger;

Конечно данный способ не идеален. Бывает, что даёт промашки. Но это хороший способ, мне он сильно помагает в работе.

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

Пример №3

Тот же случай: надо продебажить некий код. Скажем, посмотреть, что происходит по нажатию кнопки или после AJAX-загрузки данных. Но в этот раз мы не можем тормозить поток JavaScript по описанным мной причинам.

CASE UNO

variable_to_watch — объект, который изменился с момента вывода в консоль. А хочется увидить его состояние именно на момент вызова.

CASE DUO

Нет консоли? Пишем в адресной строке: javascript:alert(temp_var.objMethod()); void 0;

Пример №4

Ещё один пример. Возможно, немного странный. Хочется продебажить метод 3d-party-framework’а (например, ExtJS), но вот беда — нельзя тормозить JavaScript и нет доступа к исходному коду (правда странный пример? 🙂

Что же делать? Я делаю так:

Создаём файл с патчем: my-ext-patch.js, и подключаем его после ext-all.js
Внутри пишем что-то вроде:

Ext.form.Form.render = function (container) < // Wrap'им метод
// А вот и дебаг
console.log(container);

// Возможны варианты:
// console.dir(container);
// console.log(window.t = container);
// debugger;

Извращение? Возможно. Но мне нравится >:)

Эпилог

Источник

Отладка кода Javascript

Ошибки могут (будут) возникать, всякий раз, когда вы пишите новый программный код.

Отладка кода

Программный код может содержать синтаксические или логические ошибки.

Многие ошибки трудно диагностировать.

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

Процесс поиска (и исправления) ошибок в программном коде называется отладкой кода.

Отладка — непростой процесс. К счастью, у всех современных браузеров есть встроенный отладчик JavaScript скриптов.

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

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

Обычно, чтобы начать отладку, достаточно в браузере активировать встроенный отладчик нажав клавишу F12 и в меню отладчика выбрать пункт «Консоль» («Console»). Ниже будут показаны другие способы включения отладчика в разных браузерах.

Метод console.log()

Если ваш браузер поддерживает отладку кода, то вы можете использовать команду console.log(), чтобы вывести отслеживаемые значения в окне отладчика:

Установка точек остановки

В окне отладчика можно задавать точки остановки в коде JavaScript.

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

Когда проверка значений будет закончена, вы можете продолжить выполнение скрипта (обычно при помощи кнопки Продолжить).

Ключевое слово debugger

Ключевое слово debugger останавливает выполнение скрипта JavaScript и вызывает (если есть) функцию отладки.

У этого ключевого слова то же действие, что и у точек остановки в окне отладчика.

Если отладка не доступна, то выражение debugger ничего не делает.

В следующем примере, если отладчик включен, то выполнение кода будет остановлено перед выполнением третьей строки:

Инструменты отладки основных браузеров

Обычно, чтобы начать отладку, достаточно в браузере нажать клавишу F12 и в меню отладчика выбрать пункт «Консоль» («Console»).

Иначе, чтобы начать отладку, проделайте следующее:

Источник

Отладка JavaScript для начинающих

В последние несколько лет благодаря появлению различных библиотек, таких как jQuery и Prototype, JavaScript завоевал лидирующее место среди языков для создания скриптов для веб проектов. Растущая популярность и простота использования привела к появлению полноценных приложений, например, Gmail, которые содержат тысячи строк JavaScript, выдвигающих к команде разработчиков повышенные требования к уровню владения инструментарием.

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

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

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

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().

При разработке кода формы очень полезно знать значения переменных, чтобы проверять правильность работы кода. Обычной практикой является использование функции alert() для визуального контроля. Однако, использование такого метода блокирует выполнение остальной части кода до нажатия кнопки в окне диалога.

Современным решением является использование метода console.log, который выводит значения переменных на панель консоли:

Метод можно использовать для вывода вычисленных значений:

Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.

Выделение сообщений

В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info(): выводит иконку «информация» и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn(): выводит иконку «предупреждение» и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error(): выводит иконку «ошибка» и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group():

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

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug.

Прерывание хода выполнения скрипта

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

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

Работаем с точками прерывания

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

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

Условные точки прерывания

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

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

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт ‘Edit Breakpoint’ для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

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

Другие способы прервать выполнение кода

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

Остановка при изменении DOM

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

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки ‘ Pause ‘ в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

Введение в стек вызовов

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

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

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

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

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.netmagazine.com/tutorials/javascript-debugging-beginners
Перевел: Сергей Фастунов
Урок создан: 26 Марта 2012
Просмотров: 208151
Правила перепечатки

5 последних уроков рубрики «Разное»

Как выбрать хороший хостинг для своего сайта?

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

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Источник

Рекомендации по отладке Javascript

Дата публикации: 2020-09-21

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

Лучшие практики

Лучше не допускать, чтобы наш код стал подверженным ошибкам. Один код / логику можно написать разными способами. Здесь играет роль то, насколько хорошо программисты и новички пишут код. Нам также нужен хорошо структурированный код, что поможет в отладке в дальнейшем.

Красивый код для отладки

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

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

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

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

Методы отладки

Консольный метод

Мы можем использовать API консоли для отладки кода JavaScript. Существуют различные варианты API консоли.

console.log(): мы можем использовать console.log() для вывода любой строки значений или объекта в окне отладчика браузера.

console.table(data, obj): эта функция принимает один обязательный аргумент data, который должен быть массивом или объектом, и один дополнительный столбец необязательного параметра, массив строки. Она выводит данные в виде таблицы.

Мы можем использовать необязательный параметр columns, чтобы выбрать подмножество столбцов для отображения:

console.trace(): показывает путь вызова для достижения точки, в которой вы вызвали console.trace().

console.assert(expression,object): этот метод записывает сообщение об ошибке в консоль, если утверждение ложно. Если утверждение верно, ничего не происходит.

Использование отладчика

Debugger — зарезервированное ключевое слово в EcmaScript, начиная с ES5. Когда мы помещаем отладчик в код, это останавливает выполнение Javascript. Если у нас открыт инструмент инспектора, он может сработать, и мы сможем начать отладку.

Контрольные точки

Есть несколько способов отладки кода. В каждой контрольной точке JavaScript останавливает выполнение и позволяет нам исследовать значения внутри кода.

Безусловные контрольные точки

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

Вот простой пример кода, в котором мы установили безусловную контрольную точку на строку номер 5. И мы можем продолжить процесс отладки с этой точки.

Использование списка контрольных точек

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

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

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

Добавление точек регистрации

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

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

Мы также можем взглянуть на точку регистрации в правой панели контрольных точек. При нажатии на точку регистрации определенное нами сообщение будет выведено прямо в консоли.

На выходе получаем:

Снятие контрольных точек

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

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

Использование отслеживания

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

В этом примере мы отслеживаем две переменные: одна — minute, а другая — second. Мы можем оценить любое выражение, используя отслеживание.

Использование стека вызовов

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

Взглянем, например, на код. Здесь у нас есть три основных вызова, расположенных один за другим. Тот, что внизу, выполняется первым.

Инструменты отладки

Rookout

Rookout — это платформа отладки, которая позволяет разработчикам устанавливать правила и условия для того, когда и как срабатывает контрольная точка. Чтобы увидеть это в действии, вы можете попробовать их среду песочницы.

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

Инспектор NodeJS

Разработчики, которые пишут код для серверной части с помощью JS, также имеют отладчик на основе графического интерфейса для Node. Его можно активировать введя команду в терминал:

Источник

Отладка в браузере Chrome

Давайте отвлечёмся от написания кода и поговорим о его отладке.

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

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

Панель «Исходный код» («Sources»)

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

При первом запуске получаем следующее:

Кнопка-переключатель откроет вкладку со списком файлов.

Интерфейс состоит из трёх зон:

Консоль

Результат выполнения инструкций сразу же отображается в консоли.

Точки останова (breakpoints)

Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии. Номер строки будет окрашен в синий цвет.

Вот что в итоге должно получиться:

Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.

Пока исполнение поставлено «на паузу», мы можем просмотреть текущие значения переменных, выполнить команды в консоли, одним словом, мы выполняем отладку кода.

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

Можно задать и так называемую условную точку останова – щёлкните правой кнопкой мыши по номеру строки в коде. Если задать выражение, то именно при его истинности выполнение кода будет приостановлено.

Этот метод используется, когда выполнение кода нужно остановить при присвоении определённого выражения какой-либо переменной или при определённых параметрах функции.

Команда Debugger

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

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

Остановимся и оглядимся

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение прервётся на четвёртой строчке:

Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:

Watch показывает текущие значения выражений.

Нажмите на + и введите выражение. В процессе выполнения отладчик автоматически пересчитывает и выводит его значение.

Call Stack показывает последовательность вызовов функций.

При нажатии на элемент списка (например, на «anonymous») отладчик переходит к соответствующему коду, и нам представляется возможность его проанализировать.

Scope показывает текущие переменные.

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

В Global перечисляются глобальные переменные (т.е. объявленные за пределами функций).

Не обращайте пока внимание на ключевое слово this – его мы изучим чуть позже.

Пошаговое выполнение скрипта

А теперь давайте пошагаем по нашему коду.

В правой части панели для этого есть несколько кнопок. Рассмотрим их.

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

Вот, что мы увидим, кликнув на неё:

В отличие от предыдущего примера, здесь мы «заходим» во вложенные функции и шаг за шагом проходим по скрипту.

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

– активировать/деактивировать все точки останова.

Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.

– разрешить/запретить остановку выполнения в случае возникновения ошибки.

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

Если щёлкнуть правой кнопкой мыши по строчке кода, в контекстном меню можно выбрать опцию «Continue to here» («продолжить до этого места»).

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

Логирование

К примеру, выведем в консоль значения от нуля до четырёх:

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

Итого

Приостановить выполнение скрипта можно тремя способами:

При остановке мы можем отлаживать – проанализировать переменные и пошагово пройти по процессу, что поможет отыскать проблему.

Нами описаны далеко не все инструменты разработчика. С полным руководством можно ознакомиться здесь: https://developers.google.com/web/tools/chrome-devtools.

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

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

Источник