Microsoft Visual Studio — это интегрированная среда разработки (IDE). Используйте его для редактирования, отладки, сборки и публикации веб-приложений. Visual Studio — это многофункциональная программа, которую можно использовать для многих аспектов веб-разработки.
В дополнение к стандартному редактору и отладчику, которые предоставляются большинством ЕЦД, Visual Studio включает в себя функции, упрощающие процесс разработки, в том числе:
В настоящее время Visual Studio 2019 поддерживает отладку JavaScript в Microsoft Edge для ASP.NET Framework и приложений ASP.NET Core. Чтобы использовать Visual Studio для отладки Microsoft Edge, выполните следующие действия.
Запуск Microsoft Edge
Выполните действия, описанные в этом разделе, чтобы использовать Visual Studio для выполнения следующих действий:
Создайте приложение ASP.NET и ASP.NET Core.
Запустите веб-сервер.
Запустите Microsoft Edge.
Подключите отладчик Visual Studio с помощью одной кнопки.
Упрощенный рабочий процесс позволяет выполнять отладку JavaScript, который выполняется в Microsoft Edge, непосредственно из интегрированной среды разработки.
Создание веб-приложения ASP.NET Core
Сначала создайте веб-приложение ASP.NET Core следующим образом:
Откройте Visual Studio 2019 и выберите Создать проект.
В поле поиска на следующем экране введите react.
Выберите ASP.NET Core с React.js в списке шаблонов и нажмите кнопку Далее.
Этот шаблон React.js указывает, как интегрировать React.js с приложением ASP.NET Core.
Теперь вы создали проект для веб-приложения ASP.NET Core.
Запуск Microsoft Edge из Visual Studio
Затем запустите и отладите проект веб-приложения ASP.NET Core в Visual Studio следующим образом:
Откройте .ClientApp/src/components/Counter.js
Выберите раскрывающийся список рядом с зеленой кнопкой Воспроизведения и IIS Express.
Выберите Отладка скриптов>включена.
В том же раскрывающемся списке выберите Веб-браузер> — канал предварительной версии Microsoft Edge, который вы хотите запустить в Visual Studio, например Microsoft Edge Canary, Dev или Beta. Если вы еще не используете один из каналов предварительной версии Microsoft Edge, перейдите к разделу Стать участником программы предварительной оценки Microsoft Edge , чтобы скачать его.
Нажмите зеленую кнопку Воспроизвести . Visual Studio создает приложение, запускает веб-сервер, запускает Microsoft Edge и переходит к https://localhost:44362/ порту или к порту, указанному в launchSettings.json.
Выполните указанные ниже действия.
Отладка кода JavaScript, выполняемого в Microsoft Edge
Вернитесь в Visual Studio, чтобы задать точку останова.
В Counter.jsустановите точку останова в строке 13, выбрав желоб рядом со строкой.
Вернитесь к экземпляру Microsoft Edge, запущенный Visual Studio.
Выберите Счетчик в меню навигации в верхней части веб-страницы, а затем выберите Шаг приращения.
Отладчик JavaScript в Visual Studio достигает точки останова, заданной в Counter.js. Visual Studio теперь приостанавливает среду выполнения JavaScript, запущенного в Microsoft Edge, и вы можете пошагово выполнить скрипт построчно.
В приведенном выше подходе вы запустили Microsoft Edge из Visual Studio. Кроме того, можно подключить отладчик Visual Studio к уже работающему экземпляру Microsoft Edge, как описано ниже.
В этом примере показана лишь небольшая демонстрация функциональных возможностей, доступных в Visual Studio. Дополнительные сведения о функциональных возможностях Visual Studio 2019 см. в документации по Visual Studio.
Подключение отладчика Visual Studio к работающему экземпляру Microsoft Edge
Чтобы подключить отладчик Visual Studio к уже работающему экземпляру Microsoft Edge, выполните следующие действия:
Убедитесь, что нет запущенных экземпляров Microsoft Edge.
В командной строке выполните следующую команду:
start msedge --remote-debugging-port=9222
В Visual Studio выберите Отладка>Присоединение к процессу или CTRL+ALT+P.
В диалоговом окне Присоединение к процессу задайте для параметра Тип подключениязначение Chrome devtools protocol websocket (без проверки подлинности).
В текстовом поле Подключение целевого объекта введите http://localhost:9222/ и нажмите клавишу ВВОД.
Просмотрите список открытых вкладок в Microsoft Edge, перечисленных в разделе Доступные процессы .
Выберите вкладку, которую требуется отладить, в списке, а затем нажмите кнопку Присоединить.
В диалоговом окне Выбор типа кода выберите JavaScript (Microsoft Edge — Chromium) и нажмите кнопку ОК.
Отладчик Visual Studio теперь подключен к Microsoft Edge. Вы можете приостановить выполнение JavaScript, задать точки останова и просмотреть console.log() инструкции непосредственно в окне Выходные данные отладки в Visual Studio.
Расширение Edge DevTools для Visual Studio
Отладка проектов ASP.NET в Visual Studio с помощью средств разработчика Edge. Вы можете внедрить средства разработчика Microsoft Edge в Microsoft Visual Studio для отладки ASP.NET проектов в реальном времени. Скачайте средства разработчика Microsoft Edge для Visual Studio (предварительная версия) из Visual Studio Marketplace.
Чтобы использовать расширение, выполните следующие действия:
Убедитесь, что установлена рабочая нагрузка Visual Studio 2022 и ASP.NET.
Настройте web Live Preview в качестве веб-формы Designer по умолчанию, как описано на странице выше.
Откройте проект ASP.NET.
Откройте веб-страницу проекта в окне конструктора .
В левом верхнем углу окна Конструктор нажмите кнопку Открыть средства разработки Edge ():
Откроется edge DevTools для Visual Studio с выбранным инструментом Элементы :
Средство "Сеть" также открыто по умолчанию:
Доступны средства проверки () и переключить экранную трансляцию (), а в меню Дополнительные инструменты (") есть средство "Проблемы" , средство "Сетевые условия " и средство блокировки сетевых запросов :
Команды Microsoft Visual Studio и Microsoft Edge хотят узнать больше о работе с JavaScript в Visual Studio. Чтобы отправить отзыв, щелкните значок Отправить отзыв в Visual Studio или в твиттере @VisualStudio and @EdgeDevTools.