Время от времени разработчики совершают ошибки при кодировании. Ошибка в программе или скрипте называется ошибкой.

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

Сообщения об ошибках в IE

Самый простой способ отслеживания ошибок - включить информацию об ошибках в вашем браузере. По умолчанию Internet Explorer показывает значок ошибки в строке состояния при возникновении ошибки на странице.

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

Поскольку этот значок легко упускать из вида, Internet Explorer дает вам возможность автоматически отображать диалоговое окно «Ошибка» всякий раз, когда возникает ошибка.

Чтобы включить эту опцию, выберите « Инструменты» → « Свойства обозревателя» → вкладка «Дополнительно». а затем, наконец, установите флажок «Показать уведомление о каждом скрипте», как показано ниже -

Сообщения об ошибках в Firefox или Mozilla

Другие браузеры, такие как Firefox, Netscape и Mozilla, отправляют сообщения об ошибках в специальное окно, называемое Консоль JavaScript или Консоль ошибок. Чтобы просмотреть консоль, выберите « Инструменты» → « Консоль ошибок» или «Веб-разработка».

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

Уведомления об ошибках

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

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

Как отлаживать скрипт

Существуют различные способы отладки вашего JavaScript - Использовать JavaScript Validator

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

Наиболее удобным валидатором для JavaScript является JavaScript Lint Дугласа Крокфорда, который доступен бесплатно в JavaScript Lint Дугласа Крокфорда.

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

Добавить код отладки в ваши программы

Вы можете использовать методы alert() или document.write() в своей программе для отладки вашего кода. Например, вы можете написать что-то следующее:

var debugging = true; var whichImage = "widget"; if(debugging) alert("Calls swapImage() with argument: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Exits swapImage() with swapStatus=" + swapStatus);

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

Как использовать отладчик JavaScript

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

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

Используйте много комментариев. Комментарии позволяют вам объяснить, почему вы написали сценарий так, как вы это делали, и объяснить особенно сложные разделы кода.
Всегда используйте отступы, чтобы ваш код был легко читаемым. Отступы также облегчают вам сопоставление начальных и конечных тегов, фигурных скобок и других элементов HTML и скрипта.
Напишите модульный код. По возможности группируйте свои заявления в функции. Функции позволяют группировать связанные операторы, а также тестировать и повторно использовать части кода с минимальными усилиями.
Будьте последовательны в том, как вы называете свои переменные и функции. Попробуйте использовать имена, которые достаточно длинны, чтобы быть значимыми и описывать содержимое переменной или назначение функции.
Используйте согласованный синтаксис при именовании переменных и функций. Другими словами, держите их в нижнем регистре или в верхнем регистре; если вы предпочитаете нотацию Camel-Back, используйте ее последовательно.
Проверять длинные скрипты модульным способом. Другими словами, не пытайтесь написать весь скрипт перед тестированием любой его части. Напишите часть и запустите ее, прежде чем добавлять следующую часть кода.
Используйте описательные имена переменных и функций и избегайте использования односимвольных имен.
Следите за кавычками. Помните, что кавычки используются парами вокруг строк и что оба кавычки должны быть одного и того же стиля (одного или двух).
Следите за своими равными знаками. Вы не должны использовать один = для целей сравнения.
Явным образом объявляю переменные с помощью ключевого слова var.

От автора: console.log может много сказать о приложении, но с его помощью нельзя по-настоящему заниматься отладкой кода. Новый JS дебагер в Firefox поможет вам писать код быстрее и без багов. Статья про принцип работы этого отладчика.

В этом примере мы откроем очень простое приложение, с помощью которого легко делается отладка JavaScript. Само приложение работает на базовых open source JS фреймворках. Откройте его в последней версии Firefox Developer Edition и запустите debugger.html с помощью комбинации клавиш Option + Cmd + S на Mac или Shift + Ctrl + S на Windows. Отладчик разделен на 3 панели: панель со списком файлов, панель кода и панель инструментов.

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

Прекратите использовать console.log

Нам хочется использовать console.log для отладки кода. Просто добавляем вызов в код, чтобы узнать значение переменной, и все, так ведь? Такой подход будет работать, но он громоздкий и долгий. В этом пример мы будем пошагово выполнять приложение с помощью debugger.html для поиска значения переменной.

С помощью debugger.html можно погружаться вглубь код, просто добавив точку останова на строке. Точки останова ставят отладчик на паузу, чтобы вы могли посмотреть код. В этом примере мы добавим точку останова на строку 13 файла app.js.

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

Эту же информацию можно найти на панели Области.

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

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

Вы пошагово выполняете код и следите за изменением значения;

Вы отлаживаете один и тот же код много раз и хотите увидеть общие значения;

Вы пытаетесь понять, почему эта чертова кнопка не работает.

С помощью debugger.html также можно проводить отладку приложений React/Redux. Как это работает:

Перейдите к компоненту, который хотите отладить.

Смотрите схему компонента слева (функции в классе).

Добавьте точки останова в подходящие функции.

Нажмите паузу и следите за свойствами и состояниями компонента.

Стек вызова упрощен, поэтому вы видите код приложения в перемешку с фреймворком.

debugger.html позволяет смотреть запутанный или минифицированый код, который может вызывать ошибки. Особенно полезно при работе с общими фреймворками типа React/Redux. Дебагер знает о компоненте, на котором вы нажали паузу, и покажет упрощенный стек вызова, схему компонента и свойства. Ниже разработчик, Amit Zur объясняет, как он использует отладчик кода в Firefox на JS Kongress:

Если хотите подробно изучить новый debugger.html, зайдите на Mozilla Developer Playground . Мы создали серию уроков, чтобы помочь разработчикам научиться эффективно использовать инструмент для отладки кода.

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

Проект debugger.html был запущен примерно 2 года назад вместе с полным пересмотром Firefox DevTools. Мы хотели перевести DevTools на современные технологии, открыть их разработчикам по всему миру. А так как технология открыта, она может свободно вырасти в то, что маленькая группа в Mozilla и не могла себе представить.

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

debugger.html написан на React, Redux и Babel. Компоненты React легкие, тестируемые и легко проектируемые. Для быстрого прототипирования UI и документации общих компонентов мы используем React Storybook. Это упрощает работу с разными JS фреймворкам (типа React). Babel front-end позволяет делать такие вещи, как показывать класс Component и его функции в левом сайдбаре. Мы также можем устанавливать точки останова на функции, и они не сдвинутся, если вы измените код.

Действия Redux – это чистый API для UI. Однако их также можно использовать для создания независимого CLI JS Debugger. В хранилище Redux есть селекторы для запроса текущего состояния отладки. Наши юнит тесты запускают действия Redux и имитируют ответы браузера. Интеграционные тесты приводят браузер в действие с Redux действиями отладчика. Сама функциональная архитектура спроектирована для тестирования.

Мы полагались на сообщество разработчиков Mozilla на каждом шаге. Проект был выложен на GitHub , и наша команда достучалась до разработчиков по всему миру, и они откликнулись. В самом начале для сообщества были критичны автоматические тесты. Тесты проводили регресс и документировали поведение, которое легко можно не доглядеть. Именно поэтому один из первых шагов был – написание юнит тестов для действий Redux и типов Flow для хранилища Redux. Фактически, сообщество обеспечило, что покрытие Flow и Jest помогло убедиться в том, что каждый файл был написан и протестирован.

Как разработчики, мы считаем, что инструменты тем сильнее, чем больше вовлечено разработчиков. Наша основная команда всегда была маленькая (2 человека), но в среднем за неделю было 15 помощников. Сообщество дало нам разные точки зрения, что помогло нам предвидеть сложности и написать функции, о которых мы и не могли мечтать. Сейчас мы форматируем стеки вызовов под 24 библиотеки. О многих мы даже не знали. Мы также показываем карты Webpack и Angular в дереве исходников.

Мы планируем перенести все Firefox DevTools на GitHub, чтобы их могли использовать и улучшать больше людей. Мы с радостью примем вашу помощь. Можете перейти на страницу нашего проекта debugger.html на GitHub. Мы написали целый список инструкций по запуску отладчика на своей машине, где вы можете менять все, что хотите. Используйте его для отладки JS кода для чего угодно – браузеров, терминалов, серверов, телефонов, роботов. Если видите, что можно улучшить, пишите нам на GitHub.

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

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

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

Консоль - общий взгляд

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

в браузере Chrome и Dragonfly для Opera - Ctrl + Shift + I
Firebug - F12

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

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

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

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

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

Console.log(“Captain’s Log”); // выводит “Captain’s Log” в панель консоли

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

Function calcPhotos() { total_photos_diff = total_photos - prev_total_photos; // Выводим значения переменных в консоль console.log(total_photos_diff); }

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

Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Выводим значения в консоль console.log(total_photos_diff); // Обновляем значения t = t*1.3; p = p*1.1; } setInterval(function() { calcPhotos(t,p); },100);

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

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

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

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

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

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

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

// Первая группа console.group("Photo calculation"); console.info("Total difference is now " + total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // Вторая группа console.group("Incrementing variable"); console.log("Total photos is now: " + t); console.log("Prev total photos is now: " + p); console.groupEnd();

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

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

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

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

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

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

Для установки точки прерывания нужно перейти на закладку "Scripts " и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации - появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:

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

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

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

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

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

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

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

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

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

If (total_photos_diff > 300) { debugger; // запускаем отладчик и прерываем выполнение кода }

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

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

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

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

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

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

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

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

Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Первая группа console.info("Total difference is now " + total_photos_diff); // Обновляем значения t = t+5; p = p+1; // Необрабатываемое исключение if (total_photos_diff > 300) { throw 0; } // Обрабатываемое исключение if (total_photos_diff > 200) { try { $$("#nonexistent-element").hide(); } catch(e) { console.error(e); } } } setInterval(function() { calcPhotos(t,p); },50);

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

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

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

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

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

Заключение

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

Здравствуйте! В продолжении темы поговорим об отладке скриптов силами браузера. Для примера возьмем самый лучший браузер на Земле — Chrome.

В принципе такие инструменты есть в любом браузере, а если учесть, что большая часть браузеров работает на одном движке, что и Chrome, то тут в принципе не будет особых различий. Также еще очень хорош Firefox со своим инструментом Firebug.

Общий вид панели Sources

Запустите браузер Chrome.

Нажмите F12, при этом запустятся Инструменты разработчика.

Перейдите на вкладку Source

Здесь можно выделить 3 зоны:

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

Как правило при отладке область исходных файлов не нужна, поэтому ее можно скрыть кнопкой.

Общие кнопки управления

3 наиболее часто используемые кнопки управления:

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

Точки останова

Рассмотрим на примере файла pow.js. Если клацнуть на любой строке этого файла, то на этой строке будет задана точка останова.

Выглядеть это примерно так:

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

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

Информация о точке останова появляется на вкладке Breakpoints.

Вкладка Breakpoints очень полезна, когда код очень большой, она позволяет:

Быстро перейти на то место кода, где поставлен брейкпойнт простым кликом на текст.
Временно отключить точку останова кликом на чекбокс.
Быстро удалить точку останова правым кликом на текст и выбором Remove.

Некоторые дополнительные возможности

Точку останова можно инициировать и напрямую из а скрипта, командой debugger: function pow(x, n) { ... debugger; // <-- отладчик остановится тут... }

Правый клик на номере строки pow.js позволит вам создать так называемую условную точку останова (conditional breakpoint), т.е. задать условие, при котором точка останова сработает.

Остановиться и осмотреться

Поскольку наша функция выполняется одновременно с загрузкой страницы, то самый простой способ активировать отладчик JavaScript – это перезагрузить её. Для этого нажмите F5. И при этом выполнения скрипта будет остановлено на 6-й строке.

Обратите внимание на информационные вкладки:

Watch Expressions – здесь можно увидеть текущее значение переменных, которые вы отслеживаете в скрипте.
Call Stack – показывает стек вызовов — это все вызовы приведшие к этой строке кода.
Scope Variables – показывает переменные. Причем показывает как глобальные так и локальные переменные.

Управление выполнением

А теперь давайте «погоняем » скрипт и отследим его работу. Обратите внимание на панель сверху там находятся 6 кнопок работу которых мы и рассмотрим.

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

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

– сделать шаг внутрь функции, клавиша F11. Выполняет один шаг скрипта и при этом заходит внутрь функции. – выполнять до выхода из текущей функции, клавиша Shift+F11.

выполняет полностью код, находящийся в функции.

– отключить/включить все точки останова. Эта кнопка просто отключает и при повторном нажатии включает все точки останова. – включить/отключить автоматическую остановку при ошибке. Данная кнопка весьма полезна при отладке и позволяет включать и отключать автоматическую остановку при ошибке.

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

Консоль браузера

При отладке кода скрипта бывает полезным перейти на вкладку Console и посмотреть нет ли там ошибок также можно выводить информацию в консоль с помощью console.log().

Например:

// результат будет виден в консоли for (var i = 0; i < 6; i++) { console.log("значение", i); }

Консоль доступна в любом браузере

Ошибки в консоли

Ошибки JavaScript скриптов можно посмотреть в консоли.

В консоли вы можете увидеть:

Красная строка – это собственно сообщение об ошибке.

Итого

Отладчик вам позволяет:

Останавливаться на отмеченном месте (точка останова) или по команде debugger.
Выполнять код – отлаживать программу по одной строке или до определённого места.
Отслеживать переменные, выполнять команды в консоли и т.п.

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

Рассказываем, как использовать панель Chrome Devtools удобна для отладки.

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

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

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

Шаг 1: Воспроизведите баг

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

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

Вот веб-страница , с которой мы будем работать в этом уроке. Не забудьте открыть её в новой вкладке;
Введите число 5 в поле «Number 1»;
Введите число 1 в поле «Number 2»;
Кликните на кнопку «Add»;
Посмотрите, вам говорят, что 5+1=51;

Упс, очевидно, что это неверно. Результатом должно быть число 6, эту ошибку и нужно исправлять.

Шаг 2: Приостановите выполнение с помощью точки останова

DevTools позволяют остановить выполнение кода в процессе и посмотреть значения всех переменных в этот момент времени. Инструмент для приостановки кода называется брейкпоинтом. Попробуйте:

Вернитесь на нашу тестовую страницу и включите DevTools, нажав Cmd + Option + I (Mac) или Ctrl + Shift + I (Windows, Linux);
Перейдите к вкладке «Sources»;
Разверните «Event Listener». DevTools раскроет список категорий событий, таких как анимация и буфер обмена;
Поставьте флажок в ячейке «click»;

Вернувшись к странице, снова прибавьте «Number 1» и «Number 2». DevTools приостановит демонстрацию и выделит строку кода на панели «Sources». DevTools выделит эту строку кода:
function onClick() {

function onClick () {

Почему так происходит?
Когда вы выбираете «click», вы устанавливаете брейкпоинты, зависящие от событий типа click к каждому элементу, который имеет для него обработчик.

Шаг 3: Выполните пошаговую отладку

Одна из распространенных причин, по которой возникают ошибки заключается в том, что скрипт выполняется не в том порядке, как вы думаете. Избежать этой проблемы можно, понаблюдав за исполнением кода строчка за строчкой. Пробуем:
- На панели «Sources» нажмите «Step into next function call button»
Эта кнопка позволит последовательно отследить выполнение функции onClick. Остановите процесс, когда DevTools выделит следующую строку кода:

if (inputsAreEmpty()) {

if (inputsAreEmpty () ) {
- Теперь нажмите кнопку «Step over next function call button»;
Теперь DevTools знает, что нужно выполнить inputAreEmpty (), без дебаггинга его содержимого. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputAreEmpty () возвращает false, поэтому блок if не выполнялся.

Это и есть суть пошаговой отладки кода. Если вы посмотрите на код в get-started.js, то увидите, что ошибка, вероятно, находится где-то в функции updateLabel(). Вместо того, чтобы переходить через каждую строку кода, вы можете использовать другой тип брейкпоинта, чтобы остановить процесс ближе к месту ошибки.

Шаг 4: Выберите другую точку останова

Тип line-of-code является наиболее популярным брейкпоинтом. Если вы знаете, где может быть ошибка, используйте этот тип:
- Посмотрите на последнюю строку кода в updateLabel (), которая выглядит так:
  label.textContent = addend1 + " + " + addend2 + " = " + sum;
  
  label . textContent = addend1 + " + " + addend2 + " = " + sum ;
- Слева от этого кода вы увидите номер строки: 32. Нажмите 32. Теперь DevTools всегда будет приостанавливаться до выполнения этой строки кода;
- Нажмите кнопку «Resume script execution button». Сценарий продолжит выполняться, до следующей строки кода с брейкпоинтом;
- Посмотрите на строки кода в updateLabel (), которые уже выполнены. DevTools выводит значения addend1, addend2 и sum.

Изучите, как отладить JavaScript с помощью Chrome DevTools. Подробный гайд по отладке кода на JavaScript в Chrome Devtools