Привязывание к браузеру в ASP.NET Core

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

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

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

Настройка привязывания к браузеру

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

Настройка

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

app.UseBrowserLink();

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

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

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

Использование привязывания к браузеру

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

С помощью элемента управления панели инструментов "Привязывание к браузеру" можно:

• Одновременно обновить веб-приложение в нескольких браузерах.
• Открыть Панель мониторинга "Привязывание к браузеру".
• Включить или отключить привязывание к браузеру. Примечание. Ссылка на браузер по умолчанию отключена в Visual Studio.
• Включить или отключить Автосинхронизацию в CSS.

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

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

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

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

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

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

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

Панель мониторинга привязывания к браузеру

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

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

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

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

Включение или отключение привязывания к браузеру

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

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

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

Как это работает

Для создания канала связи между Visual Studio и браузером привязывание к браузеру использует SignalR. Если привязывание к браузеру включено, Visual Studio выступает в качестве сервера SignalR, к которому могут подключаться несколько клиентов (браузеров). Привязывание к браузеру также регистрирует компонент ПО промежуточного слоя в конвейере запросов 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, без использования подключаемого модуля браузера.