Letysite.ru

IT Новости с интернет пространства
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Отладка JavaScript с помощью инструментов для разработчиков от Google Chrome

Эта статья будет посвящена отладке JavaScript-кода с помощью инструментов для разработчиков от Google Chrome. Мы рассмотрим следующее:

1. Пример реализации проекта;
2. Анализ отчета об ошибках Raygun;
3. Подробное рассмотрение инструментов для разработчиков;
4. Добавление в код точек остановки;
5. Пересмотр кода;
6. Определение состояния приложения;
7. Исправление ошибок.

Шаг 1. Пример реализации проекта

Чтобы продемонстрировать, как отлаживать приложение с помощью инструментов для разработчиков в Chrome, я использую форму «Добавить пользователя». Она позволяет вводить имя, отчество и фамилию. При нажатии кнопки «Сохранить» форма отправляет данные для обработки на сервер.


Код для этой формы включает в себя три функции:

  • Обработчик кликов;
  • Функция преобразования первых букв строк в заглавные;
  • Функция сохранения.

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

Шаг 2. Анализ отчета об ошибках Raygun

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

Информация, необходимая для отладки ошибки, находится в модуле Stacktrace . Это краткий обзор того, что работает не так. В этом случае метод toUpperCase вызывается с неопределенным значением.
Stacktrace сообщает, где именно произошла ошибка: в функции capitalizeString в строке 20 файла index.js .

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

Шаг 3: Подробное рассмотрение инструментов для разработчиков

Первым делом нужно запустить приложение в Chrome и открыть инструменты для разработчиков. Вы можете сделать это с помощью клавиатуры, используя комбинацию клавиш CMD-OPT-I (в операционной системе OSX) или CTRL-SHIFT-I (в операционной системе Windows).

Теперь инструменты открыты в браузере, активная вкладка — «Console». Она позволяет в любое время выполнить произвольный код JavaScript.

Попробуйте ввести alert (‘Hello!’) ; и нажать Enter — вы сразу увидите сообщение.

Вкладка «Консоль» — это полезный инструмент для отладки. Ее можно использовать для проверки кода и оценки переменных при диагностике.

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

Левая панель этой вкладки содержит древовидное представление всех исходных файлов, загруженных на веб-странице. Вы можете перемещаться по файлам так же, как в IDE. При этом их содержимое будет отображаться в центральной панели. В нижней панели будут представлены все параметры отладки, о которых я расскажу позже.
Если много файлов, можно выполнить поиск, воспользовавшись клавиатурной комбинацией CMD-P (для операционной системы OSX) или CTRL-P (для Windows).
В нашем приложении проблема возникла в файле index.js . Выберите его из списка слева, чтобы просмотреть содержимое файла.

Шаг 4. Добавление в код точек остановки

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

Есть несколько способов добавить точки остановки:

Точки остановки события

Вы можете прервать выполнение кода, когда на странице происходит определенное событие. Используя раздел «Event Listener Breakpoints» в панели отладки, можно развернуть соответствующую группу и найти событие, после которого нужно прекратить выполнения кода. Например, можно отметить событие клика.Это остановит выполнение программы, когда в любом месте страницы будет выполнен клик.

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

Также можно просто найти конкретную строку и добавить для нее контрольную точку. Перейдите к интересующему вас файлу и строке, а затем кликните по номеру строки. Для этой строки будет добавлен синий маркер, и выполнение кода будет останавливаться в этой строке. На скриншоте, приведенном ниже, маркер установлен на строке 7файла index.js .

Программные точки остановки

Также можно добавить точки остановки программно, если будете отлаживать код в среде IDE. Вы можете использовать этот подход для условного введения точек остановки. Например, при определенных итерациях циклов, или если код выполняется при загрузке страницы, и нет времени о, чтобы добавить Event breakpoints в ручную.
Для этого необходимо добавить оператор debugger в позиции, на которой вы хотите прервать выполнение. Приведенный ниже код даст тот же результат.

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

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

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

Шаг 5: Пересмотр кода

Сначала установите точку остановки на строке 7? прямо внутри обработчика клика кнопки «Добавить», чтобы мы могли начать с самого начала.

Ошибка возникла в методе capizeizeString . Он вызывается три раза. Но какой его экземпляр выдает ошибку? Вы можете внимательнее рассмотреть Stacktrace и увидеть, что это был вызов из строки 13.

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

Заполните поля формы «First Name» и «Last Name», но оставьте поле «Middle Name» пустым, чтобы увидеть, вызовет ли это ошибку.

Нажмите кнопку « Save ». Откроется вкладка « Source », на которой видно, что точка остановки активирована. Теперь можно начать выполнять код. Для этого нужно использовать четыре кнопки, доступные в панели отладки.


Вам нужно использовать эти кнопки, чтобы полностью пройти всю функцию capitalizeString . Поэтому, начиная со строки 7, используйте кнопку «Step over Current Line» до тех пор, пока не перейдете к строке 13. Активная строка помечается линиями сверху и снизу.

Теперь можно использовать кнопку «Step into Function», чтобы перейти к вызову функции capitalizeString.

Перемещение в стеке вызовов

Можно вернуться к родительской функции, чтобы проверить, что именно происходит в этот момент. Для этого используйте раздел « Call Stack », в котором перечислены все вызванные функции.


Можно кликнуть по элементу в списке и вернуться к функции. Имейте в виду, что текущая позиция в выполнении не изменяется. Поэтому, используя кнопку « Step Over », мы будем перемещаться дальше от верхней части стека вызовов.

Шаг 6: Определение состояния приложения

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

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

Наведение мыши

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

Наблюдатели

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

Их можно добавить нажав кнопку « + ». А также кликнув по выражению правой кнопкой мыши и выбрав пункт «Add selected text to watches».

Область действия

Панель « Scope » отображает список переменных, находящихся в пределах области действия, а также связанных с ними значений. Она похожа на панель « Watch ». Но она автоматически создается инструментами для разработчиков. Панель «Watch» может использоваться для идентификации локальных переменных и позволяет добавлять их в список « Watch list ».

Консоль

Вкладка «Console» — это инструмент для проверки значений выражений и экспериментов с кодом. Вернитесь на эту вкладку, введите код и нажмите «Enter». Инструменты для разработчиков Chrome выполнят код в контексте и области действия текущей точки остановки.

Шаг 7: Исправьте ошибку

Перейдите на вкладку « Console » и найдите строку, которая вызвала ошибку. Сначала проверьте alue.split(‘’) , чтобы получить первый символ, а затем вызвать функцию toUpperCase .

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

Вы можете проверить это, введя полное выражение в консоль:

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

Заключение

На этом мы завершаем краткое руководство по отладке JavaScript с помощью инструментов для разработчиков от GoogleChrome. Это мощный функционал!

Читать еще:  Подмена ip адреса в браузере chrome

Данная публикация представляет собой перевод статьи « Debug JavaScript in Google Chrome’s Dev Tools in 7 Easy Steps » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

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

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

  • Работая в Chrome, откройте тестовую страницу.
  • Включите инструменты разработчика, нажав F12 (Mac: Cmd + Opt + I ).
  • Щёлкните по панели sources («исходный код»).

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

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

Кликните на неё и выберите hello.js . Вот что появится:

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

  1. В зоне Resources (Ресурсы) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
  2. Зона Source показывает исходный код.
  3. Наконец, зона Information and control (Сведения и контроль) отведена для отладки, вскоре мы к ней вернёмся.

Чтобы скрыть список ресурсов и освободить экранное место для исходного кода, щёлкните по тому же переключателю .

Консоль

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

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

Например, результатом 1+2 будет 3 , а инструкция hello(«debugger») ничего не возвращает, так что получаем undefined :

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

Давайте разберёмся, как работает код нашей тестовой страницы. В файле hello.js щёлкните по строчке номер 4 . Да, щёлкайте именно по самой цифре, не по коду.

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

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

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

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

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

  • Быстро переместиться к любой точке останова в коде – нужно щёлкнуть по точке в правой части экрана.
  • Временно деактивировать точку – в общем списке снимите галочку напротив ненужной в данный момент точки.
  • Удалить точку – щёлкните по ней правой кнопкой мыши и выберите Remove (Удалить).
  • …и так далее.

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

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

Команда Debugger

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

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

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

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

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

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

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

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

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

В нашем примере отладчик работает с функцией hello() , вызванной скриптом из файла index.html (там нет функции, поэтому вызов «анонимный»).

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

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

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

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

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

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

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

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

– продолжить выполнение. Быстрая клавиша – F8 .

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

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

Выполнение кода возобновилось, дошло до другой точки останова внутри say() , и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Мы теперь внутри функции say() .

– сделать шаг (выполнить следующую команду), не заходя в функцию. Быстрая клавиша – F10 .

Если мы нажмём на неё – будет вызван alert . Важно: на месте alert может быть любая другая функция, выполнение просто перешагнёт через неё, полностью игнорируя её содержимое.

– сделать шаг. Быстрая клавиша – F11 .

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

– продолжить выполнение до завершения текущей функции. Быстрая клавиша – Shift + F11 .

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

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

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

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

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

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

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

Логирование

Если нужно что-то вывести в консоль из кода, применяется функция console.log .

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

Обычный пользователь сайта не увидит такой вывод, так как он в консоли. Напомним, что консоль можно открыть через инструменты разработчика – выберите вкладку «Консоль» или нажмите Esc , находясь в другой вкладке – консоль откроется в нижней части интерфейса.

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

Итого

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

  1. Точками останова.
  2. Использованием в коде команды debugger .
  3. При ошибке (если инструменты разработчика открыты и опция включена).

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

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

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

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

Отладка JavaScript в настоящем встроенном отладчике, о котором вы не знали

Дата публикации: 2018-02-19

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

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

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

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

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

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

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

Читать еще:  Основные функции браузеров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

Автор: Dustin Driver

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

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

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

  • Главная &nbsp / &nbspУроки &nbsp / &nbspУроки JavaScript &nbsp / &nbspГлава 2. Основы JavaScript &nbsp / &nbsp
  • Отладка скриптов в браузере Chrome

Отладка скриптов в браузере Chrome

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Быстро перейти на то место кода, где поставлен брейкпойнт простым кликом на текст.
  • Временно отключить точку останова кликом на чекбокс.
  • Быстро удалить точку останова правым кликом на текст и выбором Remove.
  • Точку останова можно инициировать и напрямую из а скрипта, командой debugger:
  • Правый клик на номере строки pow.js позволит вам создать так называемую условную точку останова (conditional breakpoint), т.е. задать условие, при котором точка останова сработает.

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

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

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

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

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

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

Читать еще:  Быстрый мобильный браузер

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы кликните на ссылке pow.js в консоли, справа в строке с ошибкой, то вы перейдете непосредственно к тому месту в скрипте, где эта ошибка произошла.

Итого

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Изучите, как отладить JavaScript с помощью Chrome DevTools

Забудьте об отладке при помощи console.log навсегда! Изучите, как использовать точки останова для отладки кода в инструментах разработчика Chrome

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

Эта статья о правильном пути отладки! Вы узнаете, как использовать инструменты разработчика Chrome для настройки точек останова и исследования кода. Такой подход часто наиболее эффективный способ поиска и исправления ошибок в коде.

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

Шаг 1: Воспроизводим ошибку

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

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

  • Вот веб-страница, с которой мы будем работать в рамках этой статьи. Открывайте её в новой вкладке: ДЕМО.
  • В демо для Number 1 введите 5 .
  • Введите 1 для Number 2.
  • Нажмите Add Number 1 and Number 2.
  • Посмотрите на метку ниже инпутов и кнопки. Она говорит, что 5 + 1 = 51 .

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

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

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

  • Вернитесь к демо и откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux).
  • Перейдите во вкладку Sources.
  • Нажмите Event Listener Breakpoints, чтобы развернуть меню. DevTools раскрывает список категорий событий, таких как Animation и Clipboard.
  • Разверните категорию событий Mouse.
  • Выберите click.
  • Вернувшись к демо, снова нажмите Add Number 1 and Number 2. DevTools приостановит работу и выделит строку кода в панели Sources:

Когда вы выбираете click, вы устанавливаете точку останова на основе всех событий click . Когда происходит клик по любой ноде и эта нода имеет обработчик события click , DevTools автоматически останавливает исполнение на первой строке кода обработчика click для этой ноды.

Шаг 3: Исследуем код

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

  • На панели Sources в DevTools нажмите Step into next function call.

Эта кнопка позволяет вам осуществить выполнение функции onClick() по одной строке за раз. DevTools остановит выполнение и выделит следующую строку кода:

  • Теперь нажмите кнопку Step over next function call.

Это говорит DevTools выполнить функцию inputAreEmpty() , не заходя в неё. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит из-за того, что inputAreEmpty() расценивается как false , поэтому блок кода оператора if не выполняется.

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

Шаг 4: Устанавливаем другую точку останова

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

  • Посмотрите на последнюю строку кода в updateLabel() :

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

  • Нажмите кнопку Resume script execution:

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

  • Посмотрите на уже выполненные строки кода в updateLabel() . DevTools выводит значения addend1 , addend2 и sum .

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

Шаг 5: Проверяем значения переменных

Другая распространенная причина ошибок: переменная или функция генерируют значения, отличные от ожидаемых. Чтобы увидеть, как значения меняются со временем, многие разработчики используют console.log() , но console.log() может утомлять и быть неэффективным по двум причинам. Во-первых, вам может потребоваться вручную отредактировать код с большим количеством вызовов console.log() . Во-вторых, вы можете не знать точно, какая переменная связана с ошибкой, поэтому вам может потребоваться залогировать множество переменных.

Watch Expressions — альтернатива от DevTools для console.log() . Используйте Watch Expressions для отслеживания значения переменных во времени. Как следует из названия, Watch Expressions не ограничиваются только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression. Попробуйте прямо сейчас:

  • На панели Sources DevTools нажмите Watch. Секция раскроется.
  • Нажмите Add Expression.

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

Вторая альтернатива в DevTools для console.log() — это консоль. Используйте консоль для взаимодействия с произвольными операторами JavaScript. При отладке разработчики обычно используют консоль для перезаписи значений переменных. В вашем случае консоль может нам помочь проверить возможные пути исправления обнаруженной ошибки. Попробуйте прямо сейчас:

  • Если у вас не открыта консоль, откройте её нажатием Escape. Она откроется в нижней части окна DevTools.
  • В консоли введите parseInt(addend1) + parseInt(addend2) .
  • Нажмите Enter. DevTools вычислит команду и выведет 6 — ожидаемый результат.

Шаг 6: Исправляем

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

  • В редакторе кода на панели Sources DevTools замените var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2); . Это на одну строку выше места вашей остановки.
  • Нажмите Command+S (Mac) или Control+S (Windows, Linux) для сохранения изменений. Фон кода изменится на красный, сигнализируя, что сценарий был изменен в DevTools.
  • Нажмите Deactivate breakpoints.

Кнопка окрасится синим, указывая, что она активна: DevTools игнорирует любые точки останова.

  • Нажмите Resume script execution

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

Часть этой страницы — модификации, основанные на работе, созданной и распространяемой Google, и используются в соответствии с условиями, описанными в Creative Commons 3.0 Attribution License. Эта статья была адаптирована из Get Started with Debugging JavaScript in Chrome DevTools от Kayce Basques.

Ссылка на основную публикацию
Adblock
detector