Bazaprogram.ru

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

Visual studio code отладка javascript

Отладка JavaScript в Google Chrome и Visual Studio Code

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

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

В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code.

Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.

Предустановки

В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:

У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:

Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».

Вы можете запустить приложение из-под Node.js ( как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.

Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.

Примечание переводчика: видео на английском языке.

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

С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .

Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью — вы попали по адресу и правильно делаете, что читаете эту статью!

Основы отладки

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

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

После установки точки останова ( breakpoint) в коде, как правило, есть несколько вариантов дальнейших действий:

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

У вас также будет доступ к просмотру стека вызовов ( call stack). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.

Читать еще:  Как выйти из автоматического восстановления windows 10

Отладка в Google Chrome

Чтобы начать отладку приложения в браузере ​​Google Chrome, добавьте в обработчике события кнопки clickBtn оператор debugger , как показано ниже:

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

Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:

Давайте разберемся, что мы видим на вкладке Sources .

Вкладка Sources

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

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

Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова.

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

Точка останова — преднамеренная остановка или приостановка выполнения программы

Чтобы добавить точку останова, нужно выполнить клик мыши на gutter — поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:

Вкладка Scope

На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости ( Local), глобальная область видимости ( Global) и раздел сценариев ( Script).

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

Большую часть времени процесса отладки приложения вы будете проводить именно в этой вкладке. Это гораздо более эффективная альтернатива использованию многочисленным console.log() .

Вкладка Watch

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

Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).

Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput :

Пошаговое выполнение, стек вызовов и список точек останова

Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов ( call stack) и т. д.

Читать еще:  Java nio channels closedchannelexception

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

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

Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова ( conditional breakpoint), которая будет срабатывать только при выполнении определенного условия.

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

Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием — usernameInput.text === » :

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

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

Отладка в Visual Studio Code

Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.

Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.

Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.

Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome :

Давайте познакомимся с вкладкой Debug . По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок ( bug).

Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome — переменные, стек вызовов, точки останова:

Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.

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

VS Code хранит конфигурацию отладки в файле launch.json внутри папки .vscode . Чтобы VS Code создал этот файл для нас, в меню редактора откройте выпадающий список «Нет конфигураций» («No Configurations») и выберите «Добавить конфигурацию» («Add Configuration»).

VS Code хранит конфигурацию отладки в файле с именем launch.json внутри папки .vscode

Затем из этого списка выберите пункт «Chrome»:

Читать еще:  Как восстановить данные whatsapp из резервной копии

Как настроить отладчик для Chrome extension в Visual Studio Code

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

Начало установки

Для начала установите расширение Debugger for Chrome. Затем создайте файл запуска для отладчика Visual Studio Code. Этот файл содержит различные конфигурации отладчика для проекта.

Создать файл запуска можно, перейдя в раздел debug в Activity Bar и щелкнув на значок шестеренки.

В списке опций будет предложено выбрать «Chrome».

После этого появится директория .vscode с файлом launch.json .

Конфигурации

Есть два типа конфигураций отладки Chrome: launch и attach . Их можно установить в опции request внутри каждого объекта конфигурации.

Launch

Конфигурация launch запускает экземпляр Chrome, на котором выполняется указанный файл или URL-адрес. При указании URL нужно установить webRoot в директорию, из которой извлекаются файлы. Можно использовать как абсолютный путь, так и путь с резолвером $ . Это папка, открытая в рабочей области Visual Studio Code.

Примечание: будьте внимательны при установке webRoot , он используется для просмотра URL-адресов файлов на компьютере.

В примере используются две конфигураций launch : одна запускается на локальном сервере, а другая — на локальном файле.

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

Примечание: при остановке отладчика окно Chrome закрывается.

Attach

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

Windows

Есть два способа запуска Chrome с удаленной отладкой в Windows. Первый — щелкните правой кнопкой мыши на ярлык Google Chrome. Выберите свойства и добавьте следующую команду в поле «объект».

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

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

macOS

Откройте терминал и выполните следующую команду:

Linux

Запустите терминал и выполните данную команду:

Независимо от ОС откроется Chrome с флагом. В данном случае: —remote-debugging-port , который будет установлен на 9222 . Узнать об этом подробнее можно здесь.

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

Пример конфигурации attach :

Примечание: при отсутствии опции «url» появится список с открытыми вкладками.

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

Заключение

Поздравляем! Мы узнали, как установить и настроить отладчик для Chrome в Visual Studio Code. Также мы узнали, как запустить Google Chrome с удаленной отладкой. Настоятельно рекомендую взглянуть на репозиторий расширения.

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