Отладка кода Visual Studio

Обновлено: 21.11.2024

При разработке приложений Dapr вы обычно используете интерфейс командной строки Dapr, чтобы запустить службу Daprized, как показано ниже:

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

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

Предпосылки

Установите расширение Dapr. Вы будете использовать предлагаемые задачи позже.
При желании можно клонировать краткое руководство "Hello World".

Шаг 1. Настройте файл launch.json

Файл .vscode/launch.json содержит конфигурации запуска для отладки VS Code. Этот файл определяет, что будет запускаться и как это настраивается, когда пользователь начинает отладку. Конфигурации доступны для каждого языка программирования в магазине Visual Studio Code.

Конфигурация отладки шаблона

Расширение Dapr VSCode предлагает встроенные шаблоны для создания файлов launch.json и tasks.json.

В случае с кратким запуском hello world запускаются два приложения, каждое из которых имеет свой дополнительный компонент Dapr. Один написан на Node.JS, а другой на Python. Вы заметите, что каждая конфигурация содержит daprd run preLaunchTask и daprd stop postDebugTask.

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

type определяет используемый язык. В зависимости от языка может потребоваться расширение, которое можно найти в магазине, например расширение Python.
имя — это уникальное имя конфигурации. Это используется для составных конфигураций при вызове нескольких конфигураций в вашем проекте.
$ — это ссылка на переменную VS Code. Это путь к рабочей области, открытой в VS Code.
Параметры preLaunchTask и postDebugTask относятся к конфигурациям программы, выполняемым до и после запуска приложения. См. шаг 2 о том, как их настроить.

Дополнительную информацию о параметрах отладки VSCode см. в разделе Атрибуты запуска VS Code.

Шаг 2. Настройте файл task.json

Для каждой задачи, определенной в .vscode/launch.json , соответствующее определение задачи должно существовать в .vscode/task.json .

Шаг 3. Настройте составной запуск в файле launch.json

Составная конфигурация запуска может быть определена в файле .vscode/launch.json и представляет собой набор из двух или более конфигураций запуска, которые запускаются параллельно. При необходимости можно указать preLaunchTask и запустить его перед запуском отдельных сеансов отладки.

Для этого примера составная конфигурация:

Шаг 4. Запустите сеанс отладки

Теперь вы можете запускать приложения в режиме отладки, найдя имя составной команды, которое вы определили на предыдущем шаге, в отладчике VS Code:

Теперь вы отлаживаете несколько приложений с помощью Dapr!

Таблица параметров Daprd

Ниже приведены поддерживаемые параметры для задач VS Code. Эти параметры эквивалентны аргументам daprd, как подробно описано в этом справочнике:

Visual Studio Code включает встроенный отладчик для Edge и Chrome. Есть несколько способов начать работу с ним.

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

У нас также есть более подробные пошаговые руководства для начала работы с React, Angular, Vue и Ember, а также другие рецепты отладки.

Открыть команду

Самый простой способ отладки веб-страницы — с помощью команды «Отладка: открыть ссылку», которая находится в палитре команд ( ⇧⌘P (Windows, Linux Ctrl+Shift+P )). Когда вы запустите эту команду, вам будет предложено открыть URL-адрес, и отладчик будет подключен.

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

Запустить конфигурацию

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

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

Примечание. Если вы только начинаете работать с VS Code, вы можете узнать об общих функциях отладки и создании файлов конфигурации launch.json в разделе "Отладка".

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

В большинстве случаев вам потребуется запустить новый экземпляр браузера для отладки веб-страницы или файла. Для этого вы можете создать файл с именем .vscode/launch.json, который выглядит следующим образом:

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

Привязка к браузерам

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

Установка параметра --remote-debugging-port указывает браузеру прослушивать этот порт в поисках отладочного соединения. Установка отдельного --user-data-dir приводит к открытию нового экземпляра браузера; если этот флаг не задан, команда откроет новое окно любого запущенного браузера и не войдет в режим отладки.

Затем добавьте новый раздел в файл vscode/launch.json, как показано ниже:

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

Атрибуты конфигурации запуска

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

Ниже приведены общие атрибуты launch.json, относящиеся к отладке браузера. Вы можете просмотреть полный набор параметров в документации по параметрам vscode-js-debug.

webRoot — корневой каталог исходного кода. Чаще всего и по умолчанию папка webRoot является вашей рабочей папкой. Этот параметр используется для разрешения исходной карты.
outFiles — массив шаблонов универсальных объектов для поиска сгенерированных файлов JavaScript. См. раздел "Исходные карты".
smartStep — попробуйте автоматически перешагнуть через исходный код, который не соответствует исходным файлам. См. раздел об интеллектуальном шаге.
skipFiles — автоматически пропускать файлы, на которые распространяются эти шаблоны. См. раздел "Пропуск неинтересного кода".
trace — включить вывод диагностики.

Эти атрибуты доступны только для конфигураций запуска типа запроса launch :

url — URL-адрес, который автоматически открывается при запуске браузера.
runtimeExecutable — либо абсолютный путь к исполняемому файлу браузера, либо используемая версия браузера. К допустимым версиям относятся стабильная (по умолчанию), canary , beta и dev .
runtimeArgs — необязательные аргументы, передаваемые при запуске браузера.

Эти атрибуты доступны только для конфигураций запуска с типом запроса attach :

Если вы отлаживаете JavaScript в Visual Studio Code, вы, вероятно, использовали отладчик Chrome или расширение отладчика Microsoft Edge. Ни то, ни другое больше не требуется для отладки, поскольку отладка JavaScript теперь встроена в Visual Studio Code. Это не только означает, что вы можете удалить эти расширения, но мы также сделали отладку более удобной.

Для отладки любого проекта в Chrome или Microsoft Edge достаточно запустить сеанс, нажав клавишу F5 или активировав значок отладки в строке меню и выбрав «Запустить и отладить». Кроме того, вы также можете использовать палитру команд Visual Studio Code и запустить команду «Отладка: открыть ссылку». Оттуда вы можете выбрать отладку в Chrome, Edge или Node.js без установки каких-либо расширений.

Если вы выберете Edge, вы заметите дополнительную функцию на панели инструментов отладки: кнопку проверки.

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

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

В качестве бонуса вы также можете использовать консоль отладки в редакторе для взаимодействия с документом в браузере, как если бы вы использовали консоль в инструментах разработчика браузера. У вас есть полный доступ к объекту окна и вы можете использовать Console Utilities API.

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

Мы надеемся, что, автоматически включив возможность отладки с помощью браузеров в Visual Studio Code, мы упростили начало процесса, и хотели бы узнать, что еще мы можем сделать, чтобы сделать вашу отладку более эффективной. Отправьте отзыв (Alt-Shift-I с открытым DevTools) или свяжитесь с командой в Твиттере, чтобы сообщить нам, что вы думаете!

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

Установите точку останова и запустите отладчик

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

Для отладки необходимо запустить приложение с отладчиком, подключенным к процессу приложения. F5 (Отладка > Начать отладку) — наиболее распространенный способ сделать это. Однако прямо сейчас вы, возможно, не установили никаких точек останова для проверки кода вашего приложения, поэтому мы сначала сделаем это, а затем начнем отладку. Точки останова — это самая основная и важная функция надежной отладки. Точка останова указывает, где Visual Studio должна приостановить выполнение вашего кода, чтобы вы могли посмотреть на значения переменных, или на поведение памяти, или на то, выполняется ли ветвь кода.

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

Нажмите клавишу F5 ("Отладка" > "Начать отладку") или кнопку "Начать отладку" на панели инструментов отладки, и отладчик запустится до первой обнаруженной точки останова. Если приложение еще не запущено, F5 запускает отладчик и останавливается в первой точке останова.

Перемещайтесь по коду в отладчике с помощью пошаговых команд

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

Чтобы запустить приложение с подключенным отладчиком, нажмите F11 ("Отладка" > "Вступить"). F11 — это команда Step Into, которая продвигает выполнение приложения по одному оператору за раз. Когда вы запускаете приложение с помощью клавиши F11, отладчик останавливается на первом выполненном операторе.

Желтая стрелка обозначает оператор, на котором отладчик остановился, что также приостанавливает выполнение приложения в той же точке (этот оператор еще не выполнен).

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

В управляемом коде вы увидите диалоговое окно с вопросом, хотите ли вы получать уведомления при автоматическом обходе свойств и операторов (поведение по умолчанию). Если вы хотите изменить этот параметр позже, отключите параметр «Переход через свойства и операторы» в меню «Инструменты» > «Параметры» в разделе «Отладка».

Перешагнуть код, чтобы пропустить функции

Когда вы находитесь в строке кода, которая является вызовом функции или метода, вы можете нажать F10 ("Отладка" > "Перешагнуть") вместо F11.

F10 запускает отладчик, не переходя к функциям или методам в коде приложения (код продолжает выполняться). Нажав клавишу F10, вы можете пропустить код, который вас не интересует. Таким образом, вы можете быстро перейти к коду, который вам больше интересен. Дополнительные сведения об использовании пошаговых команд см. в разделе Навигация по коду в отладчике.< /p>

Быстрый переход к точке кода с помощью мыши

Использование кнопки Run to Click похоже на установку временной точки останова. Эта команда также удобна для быстрого обхода видимой области кода приложения. Вы можете использовать Run to Click в любом открытом файле. Дополнительные сведения об этой функции и аналогичных функциях навигации см. в разделе Запуск в определенное место кода.

Находясь в отладчике, наведите указатель мыши на строку кода, пока слева не появится кнопка Run to Click (Выполнить выполнение здесь).

Кнопка Run to Click (Выполнить выполнение здесь) доступна, начиная с Visual Studio 2017.

Нажмите кнопку Run to Click (Выполнить выполнение здесь). Отладчик переходит к строке кода, на которой вы щелкнули.

Вывести отладчик из текущей функции

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

Нажмите Shift + F11 (или "Отладка" > "Выход").

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

Перейти к курсору

Когда вы редактируете код (вместо приостановки в отладчике), щелкните правой кнопкой мыши строку кода в своем приложении и выберите "Выполнить до курсора" (или нажмите Ctrl для F10). Эта команда запускает отладку и устанавливает временную точку останова на текущей строке кода. Дополнительные сведения об этой функции и аналогичных функциях навигации см. в разделе Запуск в определенное место кода.

Если вы установили точки останова, отладчик останавливается на первой встреченной точке останова.

Нажимайте клавишу F5, пока не дойдете до строки кода, где вы выбрали "Выполнить до курсора".

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

Вы можете использовать Run to Cursor в окне стека вызовов во время отладки.

Быстро перезапустите приложение

Нажмите кнопку «Перезапустить» на панели инструментов отладки (или нажмите Ctrl + Shift + F5).

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

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

Редактирование кода в реальном времени

Visual Studio 2022 поддерживает редактирование кода в режиме реального времени во время отладки. Для получения подробной информации см.:

На большинстве языков, поддерживаемых Visual Studio, вы можете редактировать свой код в середине сеанса отладки и продолжать отладку.Чтобы использовать эту функцию, щелкните код курсором, пока он находится в режиме паузы в отладчике, внесите изменения и нажмите F5, F10 или F11, чтобы продолжить отладку. Дополнительные сведения об использовании этой функции и ее ограничениях см. в разделе «Редактировать и продолжить».

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

Проверяйте переменные с помощью советов по данным

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

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

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

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

В большинстве поддерживаемых языков вы можете редактировать код в середине сеанса отладки. Дополнительные сведения см. в разделе «Редактировать и продолжить».

Проверка переменных в окнах Autos и Locals

В окне Autos вы видите переменные вместе с их текущим значением и типом. Окно Autos показывает все переменные, используемые в текущей строке или предыдущей строке (в C++ окно показывает переменные в предыдущих трех строках кода. См. документацию, чтобы узнать о поведении для конкретного языка). Дополнительные сведения об использовании этих окон см. в разделе Проверка переменных в окнах Autos и Locals.

Во время отладки смотрите на окно Autos в нижней части редактора кода.

В JavaScript поддерживается окно Locals, но не окно Autos.

Затем посмотрите на окно Locals. Окно Локальные показывает вам переменные, которые в настоящее время находятся в области действия.

В этом примере объект this и объект f находятся в области видимости. Дополнительные сведения см. в разделе Проверка переменных в окнах Autos и Locals.

Настроить часы

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

Во время отладки щелкните объект правой кнопкой мыши и выберите "Добавить контроль".

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

Изучите стек вызовов

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

Окно "Стек вызовов" похоже на окно "Отладка" в некоторых интегрированных средах разработки, таких как Eclipse.

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

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

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

Проверить исключение

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

В этом примере помощник по исключениям показывает исключение System.NullReferenceException и сообщение об ошибке, в котором говорится, что ссылка на объект не указывает на экземпляр объекта. И это говорит нам о том, что строковое значение было нулевым, когда вы пытались вызвать метод Trim.

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

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

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

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

Настроить отладку

Вы можете настроить проект для сборки в качестве конфигурации отладки или выпуска, настроить свойства проекта для отладки или настроить общие параметры для отладки. Кроме того, вы можете настроить отладчик для отображения пользовательской информации, используя такие функции, как атрибут DebuggerDisplay или, для C/C++, инфраструктуру NatVis.

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

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

Просмотр снимков с возвратом IntelliTrace (Visual Studio Enterprise)

IntelliTrace step-back автоматически делает моментальный снимок вашего приложения в каждой точке останова и событии шага отладчика. Записанные снимки позволяют вернуться к предыдущим точкам останова или шагам и просмотреть состояние приложения, каким оно было в прошлом. Шаг назад IntelliTrace может сэкономить ваше время, когда вы хотите увидеть предыдущее состояние приложения, но не хотите перезапускать отладку или воссоздавать желаемое состояние приложения.

Вы можете перемещаться по снимкам и просматривать их с помощью кнопок "Шаг назад" и "Шаг вперед" на панели инструментов "Отладка". Эти кнопки позволяют перемещаться по событиям, отображаемым на вкладке «События» в окне «Средства диагностики».

Отладка проблем с производительностью

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

Дальнейшие шаги

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

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