Ссылка браузера в ASP.NET Core

Примечание

Это не последняя версия этой статьи. В текущей версии см. версию .NET 10 этой статьи.

Предупреждение

Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в политике поддержки .NET и .NET Core. В текущей версии см. версию .NET 10 этой статьи.

Авторы: Николо Карандини (Nicolò Carandini) и Том Дайкстра (Tom Dykstra)

Browser Link — это функция Visual Studio. Он создает канал связи между Development средой и одним или несколькими веб-браузерами. Используйте ссылку в браузере для:

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

Компиляция среды выполнения vs. горячая перезагрузка

Используйте Link в браузере с компиляцией во время выполнения или горячей перезагрузкой, чтобы увидеть влияние изменений во время выполнения в Razor (.cshtml) файлах. Мы рекомендуем горячую загрузку.

При открытии проекта ASP.NET Core Visual Studio отображает элемент управления панели инструментов ссылок браузера рядом с элементом управления панели инструментов Тип отладки:

раскрывающееся меню ссылки в браузере

В элементе управления панели инструментов ссылок браузера можно:

  • Обновите веб-приложение одновременно в нескольких браузерах.
  • Откройте Browser Link Dashboard.
  • Включить или отключить Browser Link.
  • Включите или отключите горячую перезагрузку CSS.

Обновите веб-приложение сразу в нескольких браузерах

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

Раскрывающееся меню F5

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

Одновременное открытие нескольких браузеров

На следующем снимке экрана показана Visual Studio с открытым представлением Index и двумя открытыми браузерами:

Пример синхронизации с двумя браузерами

Наведите указатель мыши на элемент управления Browser Link на панели инструментов, чтобы просмотреть браузеры, подключенные к проекту:

Подсказка при наведении

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

Браузеры синхронизируются с изменениями

Ссылка браузера также работает с браузерами, которые вы запускаете извне Visual Studio и переходите по URL-адресу приложения.

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

как-открыть-панель-browserlink

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

Панель ссылок браузера: два подключения

Можно также щелкнуть имя отдельного браузера, чтобы обновить только его.

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

Включение или отключение горячей перезагрузки CSS

Если включена горячая перезагрузка CSS, подключенные браузеры автоматически обновляются при внесении изменений в CSS-файлы.

Принцип работы

Браузерная связь использует SignalR для создания канала связи между Visual Studio и браузером. Если Browser Link включён, Visual Studio выступает в качестве SignalR сервера, к которому могут подключаться несколько клиентов (браузеров). Browser Link также регистрирует компонент промежуточного ПО в конвейере запросов ASP.NET Core. Этот компонент внедряет специальные указатели <script> в каждый запрос страницы, поступающий с сервера. Чтобы просмотреть ссылки на скрипты, выберите Просмотр кода страницы в браузере и прокрутите до конца содержимого тега, обозначенного <body>:

    <!-- Visual Studio browser link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
    </script>
    <script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
    <!-- End browser link -->
</body>

Исходные файлы не изменены. Компонент ПО промежуточного слоя динамически вставляет ссылки на скрипты.

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

Николо Карандини и Том Дайкстра

Browser Link является функцией Visual Studio. Он создает канал связи между Development средой и одним или несколькими веб-браузерами. Используйте Browser Link, чтобы:

  • Обновите свое веб-приложение сразу в нескольких браузерах.
  • Проверьте в нескольких браузерах с определенными настройками, такими как размер экрана.
  • Выберите элементы пользовательского интерфейса в браузерах в режиме реального времени и просмотрите, с какой разметкой и исходным кодом они соотносятся в Visual Studio.
  • выполнять автоматизацию тестирования браузера в реальном времени. Browser Link также является расширяемым.

Добавьте пакет Microsoft.VisualStudio.Web.BrowserLink в проект. Для проектов ASP.NET Core Razor Pages или MVC также включите компиляцию в среде выполнения файлов Razor (.cshtml), как описано в статье Компиляция файлов Razor в ASP.NET Core. Изменения синтаксиса Razor применяются только при включенной компиляции среды выполнения.

При преобразовании проекта ASP.NET Core 2.0 в ASP.NET Core 2.1 и переходе к метапакету Microsoft.AspNetCore.App установите пакет Microsoft.VisualStudio.Web.BrowserLink для функциональности Browser Link. Шаблоны проектов ASP.NET Core 2.1 по умолчанию используют метапакет Microsoft.AspNetCore.App.

Шаблоны проектов ASP.NET Core 2.0 Веб-приложение, Пустой и Веб-API используют метапакет Microsoft.AspNetCore.All, который содержит ссылку на пакет Microsoft.VisualStudio.Web.BrowserLink. Поэтому использование метапакета Microsoft.AspNetCore.All не требует дальнейших действий, чтобы сделать Browser Link доступным для использования.

Шаблон проекта ASP.NET Core 1.x Веб-приложение содержит ссылку на пакет Microsoft.VisualStudio.Web.BrowserLink. Для других типов проектов требуется добавить ссылку на пакет Microsoft.VisualStudio.Web.BrowserLink.

Конфигурация

Вызовите UseBrowserLink в методе Startup.Configure:

app.UseBrowserLink();

Вызов UseBrowserLink обычно помещается в if блок, который активирует только Browser Link в Development среде. Например:

if (env.IsDevelopment())
{
    app.UseDeveloperExceptionPage();
    app.UseBrowserLink();
}

Дополнительные сведения см. в ASP.NET средах выполнения Core.

При открытии проекта ASP.NET Core в Visual Studio элемент управления панели инструментов "Browser Link" отображается рядом с элементом управления Целевой объект отладки:

Раскрывающееся меню

С помощью элемента управления панели инструментов Browser Link можно:

  • Одновременно обновить веб-приложение в нескольких браузерах.
  • Откройте панель Browser Link.
  • Включить или отключить Browser Link. Примечание. Browser Link по умолчанию отключен в Visual Studio.
  • Включить или отключить автосинхронизацию CSS.

Одновременное обновление веб-приложения в нескольких браузерах

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

меню, вызываемое клавишей F5

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

Одновременное открытие нескольких браузеров

На следующем снимке экрана показана Visual Studio с открытым представлением Index и двумя открытыми браузерами:

Пример синхронизации с двумя браузерами

Наведите указатель мыши на элемент управления панели инструментов "Browser Link", чтобы просмотреть браузеры, подключенные к проекту:

Подсказка при наведении

Измените представление индекса, и все подключенные браузеры будут обновлены при нажатии кнопки обновления Browser Link:

Браузеры синхронизируются с изменениями

Browser Link также работает с браузерами, которые вы запускаете не в Visual Studio и используете для перехода по URL-адресу приложения.

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

open-browserslink-dashboard

Если ни один браузер не подключен, можно запустить сеанс без отладки, выбрав ссылку View in Browser:

Панель мониторинга Browserlink: нет подключений

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

Панель Browserlink: два подключения

Можно также щелкнуть имя отдельного браузера, чтобы обновить только его.

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

Включить или отключить автосинхронизацию CSS

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

Принцип работы

Для создания канала связи между Visual Studio и браузером Browser Link использует SignalR. Если Browser Link включен, Visual Studio выступает в качестве сервера SignalR, к которому могут подключаться несколько клиентов (браузеров). Browser Link также регистрирует компонент промежуточного ПО в конвейере запросов ASP.NET Core. Этот компонент внедряет специальные ссылки-идентификаторы <script> в каждый запрос страницы с сервера. Чтобы просмотреть ссылки на скрипты, выберите Просмотреть источник в браузере и прокрутите до конца содержимого элемента, обозначенного тегом <body>:

    <!-- Visual Studio Browser Link -->
    <script type="application/json" id="__browserLink_initializationData">
        {"requestId":"a717d5a07c1741949a7cefd6fa2bad08","requestMappingFromServer":false}
    </script>
    <script type="text/javascript" src="http://localhost:54139/b6e36e429d034f578ebccd6a79bf19bf/browserLink" async="async"></script>
    <!-- End Browser Link -->
</body>

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

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

  • Последнее обновление: