Visual Studio для веб-разработки
Microsoft Visual Studio — это интегрированная среда разработки (IDE). Используйте его для редактирования, отладки, сборки и публикации веб-приложений. Visual Studio — это многофункциональная программа, которую можно использовать для многих аспектов веб-разработки.
В дополнение к стандартному редактору и отладчику, которые предоставляются большинством ЕЦД, Visual Studio включает в себя функции, упрощающие процесс разработки, в том числе:
- Компиляторы.
- Средства завершения кода.
- Графические конструкторы.
- И многое другое.
Если вы еще не используете Visual Studio, перейдите к разделу Скачать Visual Studio , чтобы скачать ее.
В настоящее время Visual Studio 2019 поддерживает отладку JavaScript в Microsoft Edge для ASP.NET Framework и приложений ASP.NET Core. Чтобы использовать Visual Studio для отладки Microsoft Edge, выполните следующие действия.
Выполните действия, описанные в этом разделе, чтобы использовать Visual Studio для выполнения следующих действий:
- Создайте приложение ASP.NET и ASP.NET Core.
- Запустите веб-сервер.
- Запустите Microsoft Edge.
- Подключите отладчик Visual Studio с помощью одной кнопки.
Упрощенный рабочий процесс позволяет выполнять отладку JavaScript, который выполняется в Microsoft Edge, непосредственно из интегрированной среды разработки.
Сначала создайте веб-приложение ASP.NET Core следующим образом:
Откройте Visual Studio 2019 и выберите Создать проект.
В поле поиска на следующем экране введите react.
Выберите ASP.NET Core с React.js в списке шаблонов и нажмите кнопку Далее.
Этот шаблон React.js указывает, как интегрировать React.js с приложением ASP.NET Core.
Теперь вы создали проект для веб-приложения ASP.NET Core.
Затем запустите и отладите проект веб-приложения 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
.
Выполните указанные ниже действия.
Вернитесь в 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, выполните следующие действия:
Убедитесь, что нет запущенных экземпляров 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.
Отладка проектов 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 с выбранным инструментом Элементы :
Средство "Сеть" также открыто по умолчанию:
Доступны средства проверки () и переключить экранную трансляцию (), а в меню Дополнительные инструменты (") есть средство "Проблемы" , средство "Сетевые условия " и средство блокировки сетевых запросов :
См. также:
- Поиск и устранение проблем с помощью средства "Проблемы"
- Средство "Состояние сети"
- Средство блокировки сетевых запросов
- Средства разработчика Edge для Visual Studio (предварительная версия) в Visual Studio DevBlogs.
- Расширение Microsoft Edge DevTools для Visual Studio в новых возможностях в средствах разработки (Microsoft Edge 99).
Команды Microsoft Visual Studio и Microsoft Edge хотят узнать больше о работе с JavaScript в Visual Studio. Чтобы отправить отзыв, щелкните значок Отправить отзыв в Visual Studio или в твиттере @VisualStudio and @EdgeDevTools.
- Расширение Microsoft Edge DevTools для Visual Studio в новых возможностях в средствах разработки (Microsoft Edge 99).
- Поиск и устранение проблем с помощью средства "Проблемы"
- Средство "Состояние сети"
- Средство блокировки сетевых запросов
Внешний:
- Visual Studio
- Скачать Visual Studio
- Станьте участником программы предварительной оценки Microsoft Edge
- Средства разработчика Microsoft Edge для Visual Studio (предварительная версия) в Visual Studio Marketplace.
- Средства разработчика Edge для Visual Studio (предварительная версия) в Visual Studio DevBlogs.