Бөлісу құралы:

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, выполните следующие действия.

Запуск Microsoft Edge

Выполните действия, описанные в этом разделе, чтобы использовать Visual Studio для выполнения следующих действий:

  • Создайте приложение ASP.NET и ASP.NET Core.
  • Запустите веб-сервер.
  • Запустите Microsoft Edge.
  • Подключите отладчик Visual Studio с помощью одной кнопки.

Упрощенный рабочий процесс позволяет выполнять отладку JavaScript, который выполняется в Microsoft Edge, непосредственно из интегрированной среды разработки.

Создание веб-приложения ASP.NET Core

Сначала создайте веб-приложение ASP.NET Core следующим образом:

  1. Откройте Visual Studio 2019 и выберите Создать проект.

  2. В поле поиска на следующем экране введите react.

  3. Выберите ASP.NET Core с React.js в списке шаблонов и нажмите кнопку Далее.

Создание веб-приложения ASP.NET Core с помощью React.js

Этот шаблон React.js указывает, как интегрировать React.js с приложением ASP.NET Core.

Теперь вы создали проект для веб-приложения ASP.NET Core.

Запуск Microsoft Edge из Visual Studio

Затем запустите и отладите проект веб-приложения ASP.NET Core в Visual Studio следующим образом:

  1. Откройте .ClientApp/src/components/Counter.js

  2. Выберите раскрывающийся список рядом с зеленой кнопкой Воспроизведения и IIS Express.

    Раскрывающийся список рядом с зеленой кнопкой Воспроизведения и IIS Express

  3. Выберите Отладка скриптов>включена.

    Включение отладки скриптов в Visual Studio

  4. В том же раскрывающемся списке выберите Веб-браузер> — канал предварительной версии Microsoft Edge, который вы хотите запустить в Visual Studio, например Microsoft Edge Canary, Dev или Beta. Если вы еще не используете один из каналов предварительной версии Microsoft Edge, перейдите к разделу Стать участником программы предварительной оценки Microsoft Edge , чтобы скачать его.

    Выберите канал предварительной версии Microsoft Edge, который вы хотите запустить Visual Studio

  5. Нажмите зеленую кнопку Воспроизвести . Visual Studio создает приложение, запускает веб-сервер, запускает Microsoft Edge и переходит к https://localhost:44362/ порту или к порту, указанному в launchSettings.json.

    Запуск Microsoft Edge из Visual Studio

Выполните указанные ниже действия.

Отладка кода JavaScript, выполняемого в Microsoft Edge

  1. Вернитесь в Visual Studio, чтобы задать точку останова.

  2. В Counter.jsустановите точку останова в строке 13, выбрав желоб рядом со строкой.

    Выберите желоб рядом с строкой 13 в Counter.js, чтобы задать точку останова в Visual Studio.

  3. Вернитесь к экземпляру Microsoft Edge, запущенный Visual Studio.

  4. Выберите Счетчик в меню навигации в верхней части веб-страницы, а затем выберите Шаг приращения.

    Страница счетчика в веб-приложении ASP.NET Core

  5. Отладчик JavaScript в Visual Studio достигает точки останова, заданной в Counter.js. Visual Studio теперь приостанавливает среду выполнения JavaScript, запущенного в Microsoft Edge, и вы можете пошагово выполнить скрипт построчно.

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, выполните следующие действия:

  1. Убедитесь, что нет запущенных экземпляров Microsoft Edge.

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

    start msedge --remote-debugging-port=9222

  3. В Visual Studio выберите Отладка>Присоединение к процессу или CTRL+ALT+P.

    Выбор параметра

  4. В диалоговом окне Присоединение к процессу задайте для параметра Тип подключениязначение Chrome devtools protocol websocket (без проверки подлинности).

  5. В текстовом поле Подключение целевого объекта введите http://localhost:9222/ и нажмите клавишу ВВОД.

  6. Просмотрите список открытых вкладок в Microsoft Edge, перечисленных в разделе Доступные процессы .

    Настройка диалогового окна

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

  8. В диалоговом окне Выбор типа кода выберите 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.

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

  1. Убедитесь, что установлена рабочая нагрузка Visual Studio 2022 и ASP.NET.

  2. Настройте web Live Preview в качестве веб-формы Designer по умолчанию, как описано на странице выше.

  3. Откройте проект ASP.NET.

  4. Откройте веб-страницу проекта в окне конструктора .

  5. В левом верхнем углу окна Конструктор нажмите кнопку Открыть средства разработки Edge (открыть значок DevTools Для Edge):

Проект ASP.NET, открывающий инструменты разработки Edge

Откроется edge DevTools для Visual Studio с выбранным инструментом Элементы :

Инструменты разработчика Microsoft Edge для Visual Studio: элементы средства devTools

Средство "Сеть" также открыто по умолчанию:

Средства разработчика Microsoft Edge для Visual Studio: сетевой инструмент devTools

Доступны средства проверки (значок средства проверки) и переключить экранную трансляцию (значок переключить экранную трансляцию), а в меню Дополнительные инструменты (значок ") есть средство "Проблемы" , средство "Сетевые условия " и средство блокировки сетевых запросов :

Окно edge DevTools в Visual Studio, отстыкованы

См. также:

Связь с командой Microsoft Visual Studio

Команды Microsoft Visual Studio и Microsoft Edge хотят узнать больше о работе с JavaScript в Visual Studio. Чтобы отправить отзыв, щелкните значок Отправить отзыв в Visual Studio или в твиттере @VisualStudio and @EdgeDevTools.

Значок

См. также

Внешний: