Отладка JavaScript в Google Chrome

Обновлено: 01.07.2024

WebStorm предоставляет встроенный отладчик для клиентского кода JavaScript.

Отладка кода JavaScript поддерживается только в Google Chrome и других браузерах на основе Chromium.

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

Прежде чем начать

Убедитесь, что необходимые подключаемые модули JavaScript, TypeScript и JavaScript Debugger включены в меню «Настройки/Настройки | Страница «Плагины», вкладка «Установлено» , подробности см. в разделе «Управление плагинами».

Настройте встроенный отладчик, как описано в разделе Настройка отладчика JavaScript.

Чтобы изменения, которые вы вносите в код HTML, CSS или JavaScript, немедленно отображались в браузере без перезагрузки страницы, активируйте функцию интерактивного редактирования. Дополнительные сведения см. в разделе «Интерактивное редактирование в HTML, CSS и JavaScript».

Отладка приложения, работающего на встроенном сервере

Начать отладку

При необходимости установите точки останова в коде JavaScript.

Откройте файл HTML, который ссылается на JavaScript для отладки, или выберите файл HTML в окне инструмента "Проект".

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

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

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

Пример

Предположим, у вас есть простое приложение, состоящее из файла index.html и файла index.js, где index.html ссылается на index.js . Чтобы начать отладку этого приложения с помощью встроенного сервера, откройте index.html в редакторе и выберите в контекстном меню Отладка 'index.html':

WebStorm автоматически создает конфигурацию запуска/отладки, и начинается сеанс отладки:

Чтобы перезапустить новую конфигурацию запуска/отладки, щелкните в правом верхнем углу окна WebStorm или выберите «Выполнить | Отладка из главного меню:

Обновить текущую страницу в браузере

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

В приведенном ниже примере показано простое приложение, состоящее из двух HTML-страниц и сценария JavaScript. На стартовой странице home.html есть кнопка «Отправить», при нажатии на которую открывается страница calculate.html с результатами выполнения скрипта Calculator.js.

Во время сеанса отладки нажатие кнопки home.html перезагрузит страницу с кнопкой "Отправить". Щелчок перезагружает страницу calculate.html, поэтому все предыдущие выходные данные скрипта удаляются, а отладчик возвращается к строке 1 в Calculator.js .

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

Если ваше приложение работает в режиме разработки на локальном хосте, вы можете начать его отладку из встроенного терминала ( Alt+F12 ), из окна инструмента "Выполнить" или из окна инструмента "Отладка". Просто удерживайте Ctrl+Shift и щелкните URL-адрес, по которому запущено приложение.

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

Запустите приложение в режиме разработки, например, с помощью скрипта npm.

В окне инструмента "Выполнить" или в терминале отображается URL-адрес, по которому запущено ваше приложение. Удерживая Ctrl+Shift, щелкните эту URL-ссылку. WebStorm запускает сеанс отладки с автоматически сгенерированной конфигурацией типа Отладка JavaScript.

Это также работает для отладки приложений Vue.js, Angular, React и Node.js.

Отладка приложения, работающего на внешнем веб-сервере

Часто может потребоваться отладка клиентского JavaScript приложения, работающего на внешнем веб-сервере разработки, например, на базе Node.js.

При необходимости установите точки останова в коде JavaScript.

Запустите приложение в режиме разработки. Часто для этого нужно запустить npm start.

Когда сервер разработки будет готов, скопируйте URL-адрес, по которому запущено приложение, в браузере — вам нужно будет указать этот URL-адрес в конфигурации запуска/отладки.

Создайте конфигурацию отладки типа Отладка JavaScript: в главном меню выберите Выполнить | Отредактируйте конфигурации, нажмите на панель инструментов и выберите «Отладка JavaScript» из списка. В открывшемся диалоговом окне «Конфигурация запуска/отладки: Отладка JavaScript» укажите URL-адрес, по которому запущено приложение. Этот URL-адрес можно скопировать из адресной строки браузера, как описано в шаге 2 выше. Нажмите OK, чтобы сохранить настройки конфигурации.

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

Отладка асинхронного кода

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

На изображении ниже показан пример сеанса отладки JavaScript.

Отладчик останавливается на строке 3 (точка останова), затем на строке 5 (точка останова). При нажатии Step into отладчик остановится на строке 5 (в функции ), а затем перейдет к строке 6.

Режим асинхронной отладки включен по умолчанию. Чтобы отключить асинхронную трассировку стека, установите js.debugger.async.call.stack.depth в реестре на 0 .

Отладка рабочих процессов

WebStorm поддерживает отладку Service Workers и Web Workers. WebStorm распознает точки останова в каждом рабочем потоке и отображает данные отладки для него в виде отдельного потока на панели "Фреймы" на вкладке "Отладчик" окна инструмента "Отладка".

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

Установите точки останова в Workers для отладки.

Если вы используете Service Workers , убедитесь, что флажок Разрешить неподписанные запросы установлен на странице отладчика ( Настройки/Предпочтения | Сборка, выполнение, развертывание | Отладчик ). В противном случае ваши сервис-воркеры могут быть недоступны во время сеанса отладки.

Создайте конфигурацию отладки типа Отладка JavaScript, как описано выше в разделе Отладка клиентского JavaScript, работающего на внешнем веб-сервере.

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

Файл HTML, указанный в конфигурации запуска, откроется в браузере, а окно инструмента отладки откроется со списком фреймов, показывающим все рабочие процессы:

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

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

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

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

Панель «Источники»

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

Откройте пример страницы в Chrome.
Включите инструменты разработчика, нажав F12 (Mac: Cmd + Opt + I).
Выберите панель «Источники».

Вот что вы должны увидеть, если делаете это впервые:

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

Давайте нажмем на него и выберем hello.js в дереве. Вот что должно появиться:

Панель "Источники" состоит из трех частей:

На панели File Navigator перечислены HTML, JavaScript, CSS и другие файлы, включая изображения, прикрепленные к странице. Здесь также могут отображаться расширения Chrome.
На панели редактора кода отображается исходный код.
Панель "Отладка JavaScript" предназначена для отладки, мы скоро рассмотрим ее.

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

Консоль

Если мы нажмем Esc , то внизу откроется консоль. Мы можем вводить там команды и нажимать Enter для выполнения.

После выполнения оператора его результат показан ниже.

Например, здесь 1+2 приводит к 3 , а hello("debugger") ничего не возвращает, поэтому результат не определен:

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

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

Поздравляем! Вы установили точку останова. Также нажмите на номер строки 8 .

Это должно выглядеть так (синее место, где вы должны щелкнуть):

точка останова — это точка кода, в которой отладчик автоматически приостанавливает выполнение JavaScript.

Пока код приостановлен, мы можем проверить текущие переменные, выполнить команды в консоли и т. д. Другими словами, мы можем отладить его.

Мы всегда можем найти список точек останова на правой панели. Это полезно, когда у нас много точек останова в разных файлах. Это позволяет нам:

Быстро перейдите к точке останова в коде (щелкнув ее на правой панели).
Временно отключите точку останова, сняв с нее флажок.
Удалите точку останова, щелкнув правой кнопкой мыши и выбрав Удалить.
…И так далее.

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

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

Команда отладчика

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

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

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

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

Поскольку точка останова установлена, выполнение приостанавливается на 4-й строке:

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

Watch — показывает текущие значения для любых выражений.

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

Стек вызовов — показывает цепочку вложенных вызовов.

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

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

Область действия — текущие переменные.

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

Global содержит глобальные переменные (из любых функций).

Там также есть это ключевое слово, которое мы еще не изучали, но скоро займемся этим.

Отслеживание выполнения

Теперь пришло время отследить сценарий.

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

– «Возобновить»: продолжить выполнение, горячая клавиша F8.

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

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

Выполнение возобновилось, достигло другой точки останова внутри say() и остановилось там. Взгляните на «Стек вызовов» справа. Он увеличился еще на один звонок. Сейчас мы внутри say().

– «Шаг»: выполнить следующую команду, горячая клавиша F9.

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

Нажимая эту кнопку снова и снова, вы будете последовательно выполнять все операторы скрипта.

– «Перешагнуть»: запустить следующую команду, но не заходить в функцию, горячая клавиша F10 .

Аналогична предыдущей команде «Шаг», но ведет себя по-другому, если следующим оператором является вызов функции. То есть: не встроенная, как alert , а наша собственная функция.

Команда «Шаг» входит в нее и приостанавливает выполнение на первой строке, а «Шаг через» невидимо выполняет вызов вложенной функции, пропуская внутренности функции.

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

Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.

– «Войти», горячая клавиша F11 .

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

В будущем просто обратите внимание, что команда «Шаг» игнорирует асинхронные действия, такие как setTimeout (запланированный вызов функции), которые выполняются позже. «Шаг внутрь» входит в их код, ожидая их, если это необходимо. Дополнительные сведения см. в руководстве по DevTools.

– «Выйти»: продолжить выполнение до конца текущей функции, горячая клавиша Shift + F11.

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

– включить/отключить все точки останова.

Эта кнопка не перемещает выполнение. Просто масса вкл/выкл для точек останова.

– включить/отключить автоматическую паузу в случае ошибки.

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

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

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

Ведение журнала

Чтобы вывести что-то на консоль из нашего кода, есть функция console.log.

Например, это выводит значения от 0 до 4 на консоль:

Обычные пользователи не видят этот вывод, он находится в консоли. Чтобы увидеть его, либо откройте панель «Консоль» инструментов разработчика, либо нажмите клавишу ESC, находясь на другой панели: консоль откроется внизу.

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

Обзор

Как мы видим, есть три основных способа приостановить выполнение скрипта:

Точка останова.
Инструкции отладчика.
Ошибка (если инструменты разработчика открыты и кнопка включена).

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

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

О, а еще вы можете нажимать на разные места инструментов разработчика и просто смотреть, что появляется. Вероятно, это самый быстрый способ изучить инструменты разработчика. Не забывайте про правый клик и контекстные меню!

Это руководство научит вас основному рабочему процессу отладки любой проблемы с JavaScript в DevTools. Прочтите или посмотрите видеоверсию этого руководства ниже.

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

Нажмите «Открыть демонстрацию». Демонстрация откроется в новой вкладке.

Введите 5 в текстовом поле "Номер 1".

Введите 1 в текстовое поле Число 2.

Нажмите «Добавить номер 1» и «Добавить номер 2». Надпись под кнопкой гласит: 5 + 1 = 51 . Результат должен быть 6 . Это ошибка, которую вы собираетесь исправить.

Рисунок 1. Результат 5 + 1 равен 51. Должно быть 6.

DevTools предоставляет множество различных инструментов для различных задач, таких как изменение CSS, профилирование производительности загрузки страниц и мониторинг сетевых запросов. На панели «Источники» выполняется отладка JavaScript.

Откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux). Этот ярлык открывает панель консоли.

Рисунок 2. Панель консоли

Перейдите на вкладку "Источники".

Рис. 3. Панель "Источники"

Пользовательский интерфейс панели "Источники" состоит из трех частей:

Рис. 4. Три части пользовательского интерфейса панели "Источники"

Панель файлового навигатора. Здесь перечислены все файлы, запрашиваемые страницей.
Панель редактора кода. После выбора файла на панели File Navigator здесь отображается содержимое этого файла.
Панель отладки JavaScript. Различные инструменты для проверки JavaScript страницы.Если окно DevTools широкое, эта панель отображается справа от панели редактора кода.

Распространенный метод отладки такой проблемы – вставка в код большого количества операторов console.log(), чтобы проверять значения во время выполнения скрипта. Например:

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

С помощью console.log() вам нужно вручную открыть исходный код, найти соответствующий код, вставить операторы console.log(), а затем перезагрузить страницу, чтобы увидеть сообщения в консоли. С помощью точек останова вы можете приостановить соответствующий код, даже не зная, как он структурирован.
В операторах console.log() вам необходимо явно указать каждое значение, которое вы хотите проверить. С помощью точек останова DevTools показывает значения всех переменных в данный момент времени. Иногда на ваш код влияют переменные, о которых вы даже не подозреваете.

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

Если вы сделаете шаг назад и подумаете о том, как работает приложение, вы можете сделать обоснованное предположение, что неверная сумма ( 5 + 1 = 51 ) вычисляется в прослушивателе событий щелчка, связанном с Добавить номер 1 и номер 2 кнопка. Поэтому вы, вероятно, захотите приостановить выполнение кода примерно во время выполнения прослушивателя кликов. Точки останова прослушивателя событий позволяют сделать именно это:

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

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

Установите флажок "Нажать". DevTools теперь настроен на автоматическую паузу при выполнении любого прослушивателя событий щелчка.

Рис. 5. Флажок щелчка включен

Вернитесь к демонстрации, нажмите "Добавить номер 1" и "Добавить номер 2" еще раз. DevTools приостанавливает демонстрацию и выделяет строку кода на панели «Источники». DevTools следует приостановить в этой строке кода:

Если вы остановились на другой строке кода, нажимайте «Возобновить выполнение скрипта», пока не остановитесь на нужной строке.

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

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

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

На панели "Источники" DevTools нажмите Перейти к следующему вызову функции, чтобы выполнить выполнение функции onClick() по одной строке за раз. DevTools выделяет следующую строку кода:

Нажмите "Перейти к следующему вызову функции" . DevTools выполняет inputsAreEmpty(), не заходя в него. Обратите внимание, как DevTools пропускает несколько строк кода. Это связано с тем, что inputsAreEmpty() оценивается как false, поэтому блок кода инструкции if не выполняется.

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

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

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

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

Нажмите Возобновить выполнение скрипта . Сценарий продолжает выполняться, пока не достигнет строки 32. В строках 29, 30 и 31 DevTools выводит значения addend1 , addend2 и суммы справа от точки с запятой в каждой строке.

Рис. 6. DevTools делает паузу в точке останова строки кода в строке 32

Значения addend1 , addend2 и sum выглядят подозрительно. Они заключены в кавычки, что означает, что это строки. Это хорошая гипотеза для объяснения причины бага. Теперь пришло время собрать больше информации. DevTools предоставляет множество инструментов для проверки значений переменных.

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

Рис. 7. Панель "Область"

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

Перейдите на вкладку "Наблюдение".

Нажмите "Добавить выражение" .

Введите typeof sum .

Нажмите Enter. DevTools показывает тип суммы: "string". Значение справа от двоеточия является результатом вашего Watch Expression.

Рис. 8. Панель Watch Expression (внизу справа) после создания контрольного выражения typeof sum. Если окно DevTools большое, панель Watch Expression находится справа над панелью Event Listener Breakpoints.

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

Помимо просмотра сообщений console.log(), вы также можете использовать консоль для оценки произвольных операторов JavaScript. Что касается отладки, вы можете использовать консоль для тестирования потенциальных исправлений ошибок. Попробуйте прямо сейчас:

Если панель консоли не открыта, нажмите Escape, чтобы открыть ее. Он открывается в нижней части окна DevTools.

В консоли введите parseInt(addend1) + parseInt(addend2) . Этот оператор работает, потому что вы остановились на строке кода, где addend1 и addend2 находятся в области действия.

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

Рис. 9. Панель консоли после вычисления parseInt(addend1) + parseInt(addend2) .

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

Нажмите "Возобновить выполнение скрипта".
В редакторе кода замените строку 31, var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2) .
Нажмите Command+S (Mac) или Control+S (Windows, Linux), чтобы сохранить изменения.
Нажмите «Деактивировать точки останова». Он меняет цвет на синий, указывая на то, что он активен.Пока это установлено, DevTools игнорирует любые установленные вами точки останова.
Попробуйте демоверсию с другими значениями. Теперь демо-версия рассчитывается правильно.

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

Поздравляем! Теперь вы знаете, как максимально эффективно использовать Chrome DevTools при отладке JavaScript. Инструменты и методы, которые вы изучили в этом руководстве, помогут вам сэкономить бессчетное количество часов.

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

Условные точки останова, которые запускаются только тогда, когда заданное вами условие истинно.
Точки останова для перехваченных и неперехваченных исключений.
Точки останова XHR, которые срабатывают, когда запрошенный URL-адрес совпадает с предоставленной вами подстрокой.

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

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

При использовании Google Chrome мне нужно отладить некоторый код JavaScript. Как мне это сделать?

15 ответов 15

Попробуйте добавить это в свой источник:

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

Чтобы это работало, у вас должны быть открыты инструменты разработчика Chrome (нажмите F12 на Windwos/Linux, не знаете ключ на Mac или просто проверьте элемент). Если у вас открыты инструменты разработчика, еще одно преимущество заключается в том, что вы можете нажать и удерживать кнопку «Обновить», чтобы очистить кеш.

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

Windows: CTRL – SHIFT – J ИЛИ F12

Также доступно через меню гаечного ключа (Инструменты > Консоль JavaScript):

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

Windows и Linux:

Клавиши Ctrl + Shift + I для открытия инструментов разработчика

Ctrl + Shift + J, чтобы открыть инструменты разработчика и перевести фокус на консоль.

Ctrl + Shift + C для переключения в режим проверки элемента.

Клавиши ⌥ + ⌘ + I для открытия инструментов разработчика

⌥ + ⌘ + J, чтобы открыть инструменты разработчика и перевести фокус на консоль.

⌥ + ⌘ + C, чтобы переключить режим проверки элемента.

Нажмите функциональную клавишу F12 в браузере Chrome, чтобы запустить отладчик JavaScript, а затем нажмите "Сценарии".

Выберите файл JavaScript сверху и поместите точку останова в отладчик для кода JavaScript.

+1 для F12, также работает для IE, FF, Edge. Нет необходимости изучать Emacs, как комбинации клавиш. Кроме Mac.

Ctrl + Shift + J открывает Инструменты разработчика.

В Chrome 8.0.552 на Mac эту функцию можно найти в меню Вид/Разработчик/Консоль JavaScript . или вы можете использовать Alt + CMD + J .

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

Shift + Control + I открывает окно инструментов разработчика. Из нижнего левого второго изображения (выглядящего следующим образом) откроется/спрячется консоль для вас:

Чтобы открыть специальную панель «Консоль», выполните одно из следующих действий:

Используйте сочетания клавиш
- В Windows и Linux: Ctrl + Shift + J.
- На Mac: Cmd + Option + J.
Для пользователей Mac: перейдите в Google Chrome --> меню Вид --> Разработчик --> Консоль JavaScript.

Теперь в Google Chrome появилась новая функция. Используя эту функцию, вы можете редактировать свой код в браузере Chrome. (Постоянное изменение в расположении кода)

Для этого нажмите F12 --> вкладка "Исходный код" -- (справа) --> Файловая система – в ней выберите местонахождение кода. а затем браузер Chrome запросит у вас разрешение, и после этого код будет окрашен зеленым цветом. и вы можете изменить свой код, и это также отразится на вашем местоположении кода (это означает, что это будет постоянное изменение)

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

F12 открывает панель разработчика

CTRL + SHIFT + C. Откроется инструмент проверки при наведении, где он выделяет элементы при наведении курсора, и вы можете щелкнуть, чтобы отобразить его на вкладке "Элементы".

CTRL + SHIFT + I Открывает панель разработчика с вкладкой консоли

ЩЕЛЧОК ПРАВОЙ ЗАМОК > Осмотреть Щелкните правой кнопкой мыши любой элемент и нажмите "проверить", чтобы выбрать его на вкладке "Элементы" панели "Разработчик".

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

Эта статья посвящена отладке кода JavaScript в инструментах разработчика Google Chrome. Инструменты разработчика Chrome чрезвычайно эффективны и почти наверняка ускорят процесс устранения неполадок.

Мы будем использовать Raygun Crash Reporting, чтобы найти трассировку стека и строку кода, в которой произошла ошибка. Вы можете подписаться на бесплатную 14-дневную пробную версию здесь.

Итак, приступим!

Шаг 1. Представление примера проекта

Чтобы продемонстрировать, как отлаживать приложение с помощью Chrome Dev Tools, я воспользуюсь простой формой "Добавить человека". Эта форма позволяет ввести имя, отчество и фамилию. При нажатии кнопки «Сохранить» форма немного обработается, и данные будут отправлены на ваш (воображаемый) сервер.

< /p>
Код этой формы выполняет три функции:
1. Обработчик кликов
2. Строковая функция с заглавной буквы
3. Функция сохранения
К сожалению, после того, как поздно вечером в пятницу вы отправите это в производство, вы начнете видеть отчеты об ошибках, поступающие на вашу панель инструментов. Есть ошибка, и вам нужно быстро ее исправить.

2. Проанализируйте отчет в Raygun Crash Reporting

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

Информация, необходимая для устранения ошибки, находится в модуле «Stacktrace». Часть «Сообщение» в Stacktrace — это краткий обзор того, что не так. В этом случае метод toUpperCase вызывается для неопределенного значения.

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

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

3. Изучение анатомии инструментов разработчика

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

Инструменты разработчика теперь будут открыты на вкладке браузера, а вкладка "Консоль" станет активной. Эта вкладка позволяет в любое время выполнить произвольный код JavaScript или просмотреть любые выходные данные вызовов console.log.

Попробуйте ввести alert('Привет!'); и нажав Enter. Вы должны сразу же увидеть оповещение.

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

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

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

Если у вас много файлов, вы можете найти их, используя сочетание клавиш CMD-P в macOS или CTRL-P в Windows, а затем просто начните вводить имя файла.

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

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

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

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

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

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

Точки разрыва строки

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

Программная точка останова

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

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

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

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

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

Шаг 5. Пройдитесь по коду

Теперь, когда мы знаем, как взломать наш код, мы хотим пройтись по каждой строке, чтобы понять, что происходит не так. Во-первых, поставьте точку останова в строке 7 — прямо внутри обработчика щелчка кнопки «Добавить», чтобы мы могли начать с самого начала.

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

Благодаря этим дополнительным знаниям вы можете заполнить поля "Имя" и "Фамилия", но оставить поле "Отчество" пустым, чтобы проверить, не вызовет ли это ошибку.

Нажмите кнопку "Сохранить". Отсюда откроется вкладка «Источник», где вы можете увидеть активированную точку останова. Теперь вы можете начать пошаговое выполнение кода. Для этого вы используете кнопки на панели отладки. Этот набор кнопок можно использовать для приостановки выполнения, для перехода к следующему вызову функции, для перехода к следующему вызову функции, для выхода из текущего вызова функции, для перехода вперед, полной деактивации точек останова или приостановки при возникновении исключений. .

Вы будете использовать их, чтобы пройти весь путь к функции CapitalizeString. Итак, начиная со строки 7, используйте кнопку «Перейти к текущей строке», пока не дойдете до строки 13. Активная строка отображается с линиями над и под ней.

Теперь вы можете использовать кнопку "Перейти к функции", чтобы перейти к вызову функции capitalizeString, перейдя со строки 13 на строку 20.

Навигация по стеку вызовов

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

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

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

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

Существует множество вариантов для выяснения того, какие значения содержат переменные, и вычисления выражений до того, как код продолжит работу. Мы рассмотрим каждый по очереди:

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

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

Часы

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

Вы можете добавить их, нажав кнопку "+" в верхней части панели или выбрав выражение, щелкнув правой кнопкой мыши и выбрав "Добавить выделенный текст в часы".

Область

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

Консоль

Наконец, вкладка "Консоль" – отличный инструмент для проверки значений выражений и экспериментов с кодом. Просто вернитесь на вкладку «Консоль», введите код и нажмите Enter. Chrome Dev Tools выполнит код в контексте и области действия текущей точки останова.

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

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

Сначала проверьте вывод вызова value.split(''), чтобы получить первый символ, а затем вызвать для него функцию toUpperCase.

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

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

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

Обзор

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

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

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

Производительность имеет значение

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

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

Дополнительная литература

Отладка JavaScript в Mobile Safari (iOS) за 8 простых шагов

Отладка JavaScript в Internet Explorer 11 за 7 простых шагов

Эта статья посвящена отладке кода JavaScript в инструментах разработчика Internet Explorer 11. …

Отладка JavaScript в Firefox за 7 простых шагов

Эта статья посвящена отладке кода JavaScript в инструментах разработчика Firefox. Инструменты разработчика…

Читайте также: