Как запустить сеанс отладки в vs code

Отладка React-приложений в VS Code

Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.

Средства отладки VS Code и jest от Facebook

Настройка тестового проекта

Прежде чем мы начнём осваивать отладку React в VS Code, создадим учебное приложение, с которым будем экспериментировать. Я часто пользуюсь create-react-app, так как очень не люблю вручную создавать пустые проекты. Поэтому предлагаю задействовать его и в этом руководстве. Как вариант, если у вас уже есть приложение, вы можете воспользоваться им.

Итак, создадим тестовый проект. Для этого надо сделать следующее:

• Установите create-react-app глобально, выполнив команду npm i -g create-react-app .
• После установки создайте проект командой create-react-app vscode-tutorial .

Настройка VS Code

Теперь установим расширение VS Code, которое позволит редактору взаимодействовать с Chrome. VS Code подключается к Chome с использованием протокола удалённой отладки. Это — тот же протокол, который используют инструменты разработчика Chrome. Но, благодаря такому подходу, вместо того, чтобы работать со стандартными инструментами Chrome, вы можете использовать для отладки браузерного кода VS Code.

Установка расширения Debugger for Chrome

Итак, для того, чтобы наладить взаимодействие VS Code и Chrome, нужно установить расширение, которое называется Debugger for Chrome . Для его установки надо перейти на панель расширений и выполнить поиск по названию расширения. В результате должно получиться примерно следующее:

Поиск расширения Debugger for Chrome

Подключение VS Code к Chrome

Далее, нужно настроить VS Code на подключение к Chrome. Делается это так:

• Щёлкните по значку отладки.
• Откройте выпадающее меню (около кнопки Play ) и выберите пункт Add Configuration… .
• В выпадающем списке Select Environment выберите Chrome .

Настройка связи VS Code и Chrome

В корень проекта будет автоматически добавлена папка .vscode . В ней будет находиться файл launch.json , который используется для настройки отладчика VS Code для текущего проекта. Каждый раз, когда вы создаёте новый проект, вам нужно выполнять ту же последовательность действий для настройки удалённой отладки (ещё можно просто скопировать папку .vscode из одного проекта в другой).

Модифицируйте в этом файле свойство url для того, чтобы оно указывало на сервер, использующийся при разработке. Для create-react-app это http://localhost:3000 . В результате ваш launch.json должен выглядеть так (благодарю Кеннета Аухенберга из команды VS Code за совет по работе с этим файлом):

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

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

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

Запуск отладчика

Запустить отладчик можно, выполнив одно из следующих действий:

• Нажать F5 .
• Щёлкнуть по зелёной кнопке Play на панели отладки.
• Выбрать команду меню Debug → Start Debugger .

Панель инструментов, которая появляется при включении отладчика

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

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

Установим точку останова в тестовом приложении. Откроем файл src/App.js и щёлкнем мышью по полю левее строки 11 . Тут должна появиться красная точка, которая указывает на то, что точка останова была добавлена. Вот, чтобы было понятно, анимированная версия этой инструкции:

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

Запуск сервера разработки

И наконец, для того, чтобы посмотреть как всё это работает, нужно запустить сервер разработки, выполнив команду npm start в терминале. Эта команда запустит новый сервер, доступный по адресу http://localhost:3000/ .

Запуск сервера

Перейдите по адресу http://localhost:3000/ и вы увидите, как страница «застынет». Это происходит из-за того, что сработала точка останова. Если перейти в VS Code, можно заметить, что строка 11 будет выделена, а на панели отладки появятся сведения о стеке вызовов.

Сработавшая точка останова

Если у вас всё заработало — примите поздравления! Вы только что узнали о том, как настроить удалённую отладку в VS Code. Если вы хотите узнать подробности о самом процессе отладки в VS Code — почитайте это.

Непрерывное тестирование с помощью jest

Мне удобно, чтобы в процессе работы над кодом выполнялись модульные тесты. А именно, чтобы они вызывались всякий раз, когда я вношу изменения в программу. Благодаря create-react-app всё, что нужно для реализации такого сценария, настраивается автоматически. Для того, чтобы запустить jest , достаточно ввести в терминале команду npm test . Благодаря этому система будет наблюдать за файлами и автоматически запускать тесты при их сохранении. Выглядит это примерно так:

Непрерывное тестирование в VS Code

Итоги

В этом материале мы рассказали о том, как настроить взаимодействие VS Code и Chrome для организации удалённой отладки React-приложений. Надеемся, эта простая методика поможет сэкономить немного времени, если раньше вам приходилось постоянно переключаться между редактором, браузером и терминалом.

Уважаемые читатели! Пользуетесь ли вы какими-нибудь полезными мелочами, которые повышают производительность труда при разработке веб-приложений?

Учебник. Отладка консольного приложения .NET с помощью Visual Studio Code

В этом учебнике представлены средства отладки, доступные в Visual Studio Code для работы с приложениями .NET.

Предварительные требования

• В этом учебнике используется консольное приложение, созданное в руководстве Создание консольного приложения .NET в Visual Studio Code.

Использование конфигурации отладочной сборки

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

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

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

Запустите Visual Studio Code.

Откройте папку проекта, созданную по инструкциям из статьи Создание консольного приложения .NET в Visual Studio Code.

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

Точка останова приостанавливает выполнение приложения на инструкции, предшествующей той строке, в которой установлена точка останова.

Откройте файл Program.cs.

Установите точку останова в строке, где отображается имя, дата и время, щелкнув в левом поле окна кода. Левое поле находится слева от номеров строк. Или нажмите клавишу F9 либо выберите в меню пункт Запуск>Перейти к следующей точке останова при выбранной строке кода.

Красная точка в левом поле обозначает строку с точкой останова Visual Studio Code.

Настройка входных данных терминала

Точка останова находится после вызова метода Console.ReadLine . Консоль отладки не принимает входные данные терминала для выполняющейся программы. Чтобы использовать выходные данные терминала во время отладки, можно использовать встроенный терминал (одно из окон Visual Studio Code) или внешний терминал. В этом учебнике используется встроенный терминал.

Откройте файл .vscode/launch.json.

Измените значение параметра console с internalConsole на integratedTerminal .

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

Откройте окно отладки, щелкнув значок «Отладка» в меню слева.

Щелкните зеленую стрелку в верхней части панели рядом с элементом .NET Core Launch (console) (Запуск .NET Core (консоль)). Еще один способ запуска программы в режиме отладки — нажать клавишу F5 или выбрать в меню пункт Запуск>Начать отладку.

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

Введите строку в окне Терминал в ответ на запрос имени, а затем нажмите клавишу ВВОД .

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

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

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

Выберите вкладку Консоль отладки.

Введите name = "Gracie" в запросе в нижней части окна Консоль отладки и нажмите клавишу ВВОД .

Введите currentDate = DateTime.Parse("2019-11-16T17:25:00Z").ToUniversalTime() в нижней части окна Консоль отладки и нажмите клавишу ВВОД .

В окне Переменные отображаются новые значения переменных name и currentDate .

Продолжите выполнение программы, нажав кнопку Продолжить на панели инструментов. Еще один способ продолжить — нажать клавишу F5 .

Снова выберите вкладку Терминал.

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

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

Установка условной точки останова

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

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

Выберите Expression в раскрывающемся списке, введите следующее условное выражение и нажмите клавишу ВВОД .

При каждом достижении точки останова отладчик вызывает метод String.IsNullOrEmpty(name) и останавливается на этой строке только в том случае, если вызов метода возвращает true .

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

Запустите отладку программы, нажав клавишу F5 .

Когда на вкладке Терминал появится предложение ввести имя, нажмите клавишу ВВОД .

Так как указанное вами условие соблюдается ( name имеет значение null или String.Empty), выполнение программы будет остановлено при достижении точки останова, то есть перед выполнением метода Console.WriteLine .

В окне Переменные указывается, что значение переменной name "" или String.Empty.

Убедитесь в том, что переменная содержит пустую строку, введя следующий оператор в окне Консоль отладки и нажав клавишу ВВОД . Результат равен true .

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

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

Очистите точку останова. Для этого щелкните красную точку в левом поле окна с кодом. Другие способы очистки точки останова — нажатие клавиши F9 или выбор > точки останова в меню при выборе строки кода.

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

Пошаговое выполнение программы

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

Установите точку останова на открывающей фигурной скобке метода Main .

Нажмите клавишу F5 , чтобы начать отладку.

Visual Studio Code выделит строку точки останова.

На этом этапе в окне Переменные показано, что массив args пуст, а name и currentDate имеют значения по умолчанию.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Будет выделена следующая строка.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio Code выполняет Console.WriteLine для запроса имени и выделяет следующую строку выполнения. Следующая строка — это Console.ReadLine для name . Окно «Переменные» не изменяется, а на вкладке «Терминал » отображается запрос «Что такое ваше имя?».

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio выделит назначение переменной name . В окне Переменные видно, что name по-прежнему null .

Ответьте на этот запрос, введя строку на вкладке «Терминал» и нажав клавишу ВВОД .

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

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio Code выделит назначение переменной currentDate . В окне Переменные отображается значение, полученное в результате вызова метода Console.ReadLine. На вкладке Терминал также отображается строка, указанная в командной строке.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

В окне Переменные отображается значение переменной currentDate , которому было присвоено свойство DateTime.Now.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio Code вызывает метод Console.WriteLine(String, Object, Object). В окне консоли отображается форматированная строка.

Выберите Запуск>Шаг с выходом или нажмите клавиши SHIFT + F11 .

Выберите вкладку Терминал.

В окне терминала отобразится сообщение «Нажмите любую клавишу, чтобы выйти. «

Нажмите любую клавишу для выхода из программы.

Использование конфигурации сборки для выпуска

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

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

Дополнительные ресурсы

(Отладка в Visual Studio Code)

Следующие шаги

В этом учебнике вы использовали средства отладки Visual Studio Code. В следующем руководстве вы опубликуете развертываемую версию приложения.

В этом учебнике представлены средства отладки, доступные в Visual Studio Code для работы с приложениями .NET.

Предварительные требования

• В этом учебнике используется консольное приложение, созданное в руководстве Создание консольного приложения .NET в Visual Studio Code.

Использование конфигурации отладочной сборки

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

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

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

Запустите Visual Studio Code.

Откройте папку проекта, созданную по инструкциям из статьи Создание консольного приложения .NET в Visual Studio Code.

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

Точка останова приостанавливает выполнение приложения на инструкции, предшествующей той строке, в которой установлена точка останова.

Откройте файл Program.cs.

Установите точку останова в строке, где отображается имя, дата и время, щелкнув в левом поле окна кода. Левое поле находится слева от номеров строк. Или нажмите клавишу F9 либо выберите в меню пункт Запуск>Перейти к следующей точке останова при выбранной строке кода.

Красная точка в левом поле обозначает строку с точкой останова Visual Studio Code.

Настройка входных данных терминала

Точка останова находится после вызова метода Console.ReadLine . Консоль отладки не принимает входные данные терминала для выполняющейся программы. Чтобы использовать выходные данные терминала во время отладки, можно использовать встроенный терминал (одно из окон Visual Studio Code) или внешний терминал. В этом учебнике используется встроенный терминал.

Откройте файл .vscode/launch.json.

Измените значение параметра console с internalConsole на integratedTerminal .

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

Откройте окно отладки, щелкнув значок «Отладка» в меню слева.

Щелкните зеленую стрелку в верхней части панели рядом с элементом .NET Core Launch (console) (Запуск .NET Core (консоль)). Еще один способ запуска программы в режиме отладки — нажать клавишу F5 или выбрать в меню пункт Запуск>Начать отладку.

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

Введите строку в окне Терминал в ответ на запрос имени, а затем нажмите клавишу ВВОД .

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

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

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

Выберите вкладку Консоль отладки.

Введите name = "Gracie" в запросе в нижней части окна Консоль отладки и нажмите клавишу ВВОД .

Введите currentDate = DateTime.Parse("2019-11-16T17:25:00Z").ToUniversalTime() в нижней части окна Консоль отладки и нажмите клавишу ВВОД .

В окне Переменные отображаются новые значения переменных name и currentDate .

Продолжите выполнение программы, нажав кнопку Продолжить на панели инструментов. Еще один способ продолжить — нажать клавишу F5 .

Снова выберите вкладку Терминал.

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

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

Установка условной точки останова

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

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

Выберите Expression в раскрывающемся списке, введите следующее условное выражение и нажмите клавишу ВВОД .

При каждом достижении точки останова отладчик вызывает метод String.IsNullOrEmpty(name) и останавливается на этой строке только в том случае, если вызов метода возвращает true .

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

Запустите отладку программы, нажав клавишу F5 .

Когда на вкладке Терминал появится предложение ввести имя, нажмите клавишу ВВОД .

Так как указанное вами условие соблюдается ( name имеет значение null или String.Empty), выполнение программы будет остановлено при достижении точки останова, то есть перед выполнением метода Console.WriteLine .

В окне Переменные указывается, что значение переменной name "" или String.Empty.

Убедитесь в том, что переменная содержит пустую строку, введя следующий оператор в окне Консоль отладки и нажав клавишу ВВОД . Результат равен true .

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

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

Очистите точку останова. Для этого щелкните красную точку в левом поле окна с кодом. Другие способы очистки точки останова — нажатие клавиши F9 или выбор > точки останова в меню при выборе строки кода.

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

Пошаговое выполнение программы

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

Установите точку останова на открывающей фигурной скобке метода Main .

Нажмите клавишу F5 , чтобы начать отладку.

Visual Studio Code выделит строку точки останова.

На этом этапе в окне Переменные показано, что массив args пуст, а name и currentDate имеют значения по умолчанию.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Будет выделена следующая строка.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio Code выполняет Console.WriteLine для запроса имени и выделяет следующую строку выполнения. Следующая строка — это Console.ReadLine для name . Окно «Переменные» не изменяется, а на вкладке «Терминал » отображается запрос «Что такое ваше имя?».

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio выделит назначение переменной name . В окне Переменные видно, что name по-прежнему null .

Ответьте на этот запрос, введя строку на вкладке «Терминал» и нажав клавишу ВВОД .

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

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio Code выделит назначение переменной currentDate . В окне Переменные отображается значение, полученное в результате вызова метода Console.ReadLine. На вкладке Терминал также отображается строка, указанная в командной строке.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

В окне Переменные отображается значение переменной currentDate , которому было присвоено свойство DateTime.Now.

Выберите Запуск>Шаг с заходом или нажмите клавишу F11 .

Visual Studio Code вызывает метод Console.WriteLine(String, Object, Object). В окне консоли отображается форматированная строка.

Выберите Запуск>Шаг с выходом или нажмите клавиши SHIFT + F11 .

Выберите вкладку Терминал.

В окне терминала отобразится сообщение «Нажмите любую клавишу, чтобы выйти. «

Нажмите любую клавишу для выхода из программы.

Использование конфигурации сборки для выпуска

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

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

Дополнительные ресурсы

(Отладка в Visual Studio Code)

Следующие шаги

В этом учебнике вы использовали средства отладки Visual Studio Code. В следующем руководстве вы опубликуете развертываемую версию приложения.

Этот учебник доступен только для .NET 5 и .NET 6. Выберите один из этих вариантов в верхней части страницы.

Отладка проектов JavaScript с помощью VS Code & Chrome Debugger

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

Представьте на мгновение, что функция console.log() не существует в JavaScript. Я уверен, что первый вопрос, который вы себе зададите, будет: «Как я смогу убедиться, что мой код работает правильно?»

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

Чтобы исправить это, нам нужно изменить свои привычки и начать использовать инструменты отладки. Для отладки кода JavaScript доступно множество инструментов, таких как Chrome Dev Tools, Node Debugger , Node Inspect и другие. Фактически, каждый крупный браузер предоставляет свои собственные инструменты.

В этой статье мы рассмотрим, как использовать средства отладки, предоставляемые Visual Studio Code. Мы также рассмотрим, как использовать расширение Debugger for Chrome, которое позволяет интегрировать VS Code с Chrome Dev Tools. Когда мы закончим, вы больше никогда не захотите использовать console.log() .

Предпосылки

Для этого урока вам нужно только иметь прочную основу в современном JavaScript . Мы также посмотрим, как мы можем отладить тест, написанный с использованием Mocha и Chai . Мы будем использовать неработающий проект, пример отладки , чтобы научиться исправлять различные ошибки без использования единого console.log . Вам понадобится следующее:

• Node.js
• Visual Studio Code
• Браузер Chrome

Начните с клонирования проекта -примера отладки в вашу рабочую область. Откройте проект в VS Code и установите зависимости через встроенный терминал:

Теперь мы готовы научиться отлаживать проект JavaScript в VS Code.

Отладка JavaScript в VS Code

Первый файл, на который я хотел бы взглянуть, это src/places.js . Вам нужно открыть папку debug-project в VS Code ( Файл > Открыть папку ) и выбрать файл в редакторе.

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

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

Видите красные точки на стороне? Это точки останова. Точка останова — это просто визуальная индикация, указывающая инструменту отладчика, где приостановить выполнение. Затем на панели действий нажмите кнопку отладки (значок с надписью «Ошибки не разрешены»).

Посмотрите на верхний раздел. Вы заметите значок шестеренки с красной точкой. Просто нажмите на него. Файл конфигурации отладки, launch.json , будет создан для вас. Обновите конфигурацию следующим образом, чтобы вы могли запустить отладчик VS Code на places.js :

Примечание. В зависимости от операционной системы вам может потребоваться заменить двойную обратную косую черту ( \\ ) на одну прямую косую черту ( / ).

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

• нажмите зеленую кнопку Play на панели отладки
• нажмите F5
• нажмите Отладка > Начать отладку в строке меню.

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

Ряд вещей происходит в быстрой последовательности, когда вы нажимаете кнопку отладки. Во-первых, есть панель инструментов, которая появляется в верхней части редактора. Имеет следующие элементы управления:

• Drag Dots anchor : для перемещения панели инструментов туда, где она ничего не блокирует
• Продолжить : продолжить сеанс отладки
• Шаг за шагом : выполнение кода построчно, пропуская функции
• Шаг в : выполнение кода построчно, входя в функции
• Выход : если уже внутри функции, эта команда выведет вас
• Restart : перезапускает сеанс отладки
• Стоп : останавливает сеанс отладки.

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

Давайте начнем процесс отладки снова, нажав F5 . Убедитесь, что две точки останова все еще на месте. Когда вы устанавливаете точку останова, код останавливается на указанной строке. Эта строка не выполняется, если вы не нажмете « Продолжить» ( F5 ) или « Перешагните» ( F10 ). Прежде чем вы нажмете что-нибудь, давайте посмотрим на разделы, которые составляют панель отладки:

• Переменные : отображает локальные и глобальные переменные в текущей области (т. Е. В точке выполнения)
• Смотрите : вы можете вручную добавить выражения переменных, которые вы хотите отслеживать
• Стек вызовов : отображает стек вызовов выделенного кода
• Точки останова : отображает список файлов с точками останова вместе с их номерами строк.

Чтобы добавить выражение в раздел « Watch », просто нажмите знак « +» и добавьте любое допустимое выражение JavaScript — например, places.length . Когда отладчик делает паузу, если ваше выражение находится в области видимости, значение будет напечатано. Вы также можете навести курсор на переменные, которые в настоящее время находятся в области видимости. Появится всплывающее окно с отображением их значений.

В настоящее время массив places пуст. Нажмите любой элемент управления навигацией, чтобы увидеть, как работает отладка. Например, Step over перейдет к следующей строке, а Step into перейдет к функции addPlace . Потратьте немного времени, чтобы ознакомиться с элементами управления.

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

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

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

1. в массиве несколько пробелов, то есть places[0] и places[2] не undefined
2. свойство numType отображается even для нечетных значений id .

А пока просто завершите сеанс отладки. Мы исправим их в следующем разделе.

Отладка тестов с Mocha

Откройте test/placesTest.js и просмотрите код, написанный для проверки кода в places.test . Если вы никогда раньше не использовали Mocha, вам нужно сначала установить его глобально, чтобы запустить тесты.

Вы также можете запустить npm test для выполнения тестов. Вы должны получить следующий вывод:

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

launch.json файл launch.json с всплывающим списком нескольких конфигураций на выбор.

Просто выберите Mocha Tests . Следующая конфигурация будет вставлена ​​для вас:

Настройки по умолчанию в порядке. Вернитесь в выпадающий список и выберите Mocha Tests . Вам нужно будет закомментировать последние три строки, которые вы добавили в places.js ; в противном случае тесты не будут выполняться, как ожидалось. Вернитесь к placesTest.js и добавьте placesTest.js останова на линии непосредственно перед тем, где произойдет первый сбой теста. Это должна быть строка семь, где написано:

Обязательно добавьте выражение places.length в разделе часов. Нажмите кнопку Play , чтобы начать сеанс отладки.

В начале теста places.length должно places.length ноль. Если вы нажмете places.length , places.length 2, но добавлено только одно место Как это может быть?

Перезапустите сеанс отладки, и на этот раз используйте Step into, чтобы перейти к функции addPlace . Отладчик проведет вас по places.js . Значение places.length все еще равно нулю. Нажмите Step over, чтобы выполнить текущую строку.

Ага! Значение places.length просто places.length на 1, но мы ничего не добавили в массив. Проблема вызвана оператором ++ который изменяет длину массива. Чтобы это исправить, просто замените строку на:

Таким образом, мы можем безопасно получить значение id без изменения значения places.length . Пока мы все еще находимся в режиме отладки, давайте попробуем исправить еще одну проблему, когда свойству numType присваивается значение, even когда id равен 1. Проблема, по-видимому, заключается в выражении модуля внутри оператора if:

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

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

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

Начать новый сеанс отладки:

Там! Посмотрите на раздел Переменные . Еще до того, как начинается второй тест, мы обнаруживаем, что в массиве places уже есть данные, созданные в первом тесте. Это явно загрязнило наш текущий тест. Чтобы это исправить, нам нужно реализовать какую-то функцию setup которая сбрасывает массив places для каждого теста. Чтобы сделать это в Mocha, просто добавьте следующий код перед тестами:

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

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

Отладка JavaScript с помощью Chrome Debugger

Теперь, когда вы ознакомились с основами отладки JavaScript в VS Code, мы увидим, как отладить немного более сложный проект с помощью расширения Debugger for Chrome . Просто откройте панель Marketplace через панель действий. Найдите расширение и установите его.

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

Весь код на стороне клиента находится в public папке. Зависимости проекта включают в себя Semantic-UI-CSS, jQuery, Vanilla Router, Axios и Handlebars. Вот как выглядит проект, когда вы запускаете его при npm start . Вам нужно открыть URL localhost: 3000 в вашем браузере, чтобы просмотреть приложение.

Попробуйте добавить новое место. Когда вы это сделаете, вы увидите, что ничего не происходит. Очевидно, что-то идет не так, так что пришло время заглянуть под капот. Сначала мы рассмотрим код, прежде чем мы начнем сеанс отладки. Откройте public/index.html . Наше внимание в настоящее время находится в этом разделе:

Если вы бросите быстрый взгляд, код будет правильным. Так что проблема должна быть в app.js Откройте файл и проанализируйте код там. Ниже приведены разделы кода, на которые следует обратить внимание. Не торопитесь, чтобы прочитать комментарии, чтобы понять код.

Все вроде нормально. Но в чем может быть проблема? Давайте разместим точку останова в строке 53, где написано:

Затем создайте конфигурацию Chrome через панель отладки. Выберите выделенный вариант:

Затем обновите конфигурацию Chrome следующим образом, чтобы она соответствовала нашей среде:

Затем запустите сервер как обычно, используя npm start или node server . Затем выберите « Запустить Chrome» и запустите сеанс отладки. Новый экземпляр Chrome будет запущен в режиме отладки, и выполнение должно быть приостановлено, когда вы установите точку останова. Сейчас самое время расположить код Visual Studio и экземпляр Chrome рядом, чтобы вы могли эффективно работать.

Наведите курсор мыши на константу placesTable . Появляется всплывающее окно, но оно кажется пустым. На панели часов добавьте выражения el и placesTable . Или, в качестве альтернативы, просто прокрутите вверх, где константы были объявлены.

Обратите внимание, что el заполнен, но placesTable пуст. Это означает, что jQuery не смог найти элемент #places-table . Давайте вернемся к public/index.html и выясним, где находится эта #places-table .

Ага! Таблица div, которую мы хотим, находится в строке 55, прямо внутри places-form-template . Это означает, что #places-table div #places-table может быть найдена только после загрузки шаблона places-form-template . Чтобы это исправить, просто вернитесь в app.js и переместите код в строку 52 сразу после комментария «Показать таблицу мест»:

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

Теперь вы можете удалить точку останова. Давайте попробуем добавить новое место — например, Кейптаун, Южная Африка

Хм … это не правильно. Место добавлено, но страна не отображается. Очевидно, что проблема не в коде таблицы HTML, поскольку в первой строке заполняется ячейка страны, поэтому что-то должно происходить на стороне JavaScript. Откройте app.js и добавьте app.js останова в строку 58, где написано:

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

Как видите, переменная country не определена, а переменная city -. Если вы посмотрите на выражения селектора jQuery, которые были настроены на панели просмотра, вы заметите, что селектор #country ничего не возвращает. Это означает, что его не было в DOM. Перейдите на index.html чтобы проверить.

Увы! Если вы посмотрите на строку 59, в которой введены данные о стране, в ней отсутствует атрибут ID. Вы должны добавить один, как это:

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

Теперь это работает! Отличная работа по исправлению еще одной ошибки без console.log . Давайте теперь перейдем к нашей последней ошибке.

Отладка клиентской маршрутизации

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

Это работает нормально. Там нет ошибок.

На самом деле есть, и они не имеют ничего общего с формой. Чтобы найти их, обновите страницу.

Как только вы нажмете перезагрузить, пользователь перейдет обратно в / , корень приложения. Это явно проблема маршрутизации, которую должен решать пакет Vanilla Router. Вернитесь в app.js и найдите эту строку:

Предполагается, что этот фрагмент кода направляет пользователей на правильную страницу на основе предоставленного URL-адреса. Но почему это не работает? Давайте добавим точку останова здесь, затем вернемся к URL-адресу /convert и попробуйте обновить страницу еще раз.

Как только вы обновите, редактор останавливается на точке останова. Наведите курсор на экспресс windows.location.path . Появляется всплывающее окно, которое говорит, что значение не undefined . Давайте перейдем к консоли отладки и начнем набирать выражение ниже:

Задерживать! Консоль отладки просто дала нам правильное выражение. Предполагается прочитать window.location.pathname . Исправьте строку кода, удалите точку останова и перезапустите сеанс отладки.

Перейдите к URL-адресу /convert и обновите его. Страница должна перезагрузить правильный путь. Потрясающие!

Это последняя ошибка, которую мы собираемся устранить, но я рекомендую вам продолжать экспериментировать в сеансе отладки. Установите новые контрольные точки для проверки других переменных. Например, проверьте объект response в функции router(‘/convert’) . Это демонстрирует, как вы можете использовать сеанс отладки, чтобы выяснить структуру данных, возвращаемых запросом API при работе с новыми конечными точками REST.

Резюме

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