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

  • Статья

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

Обновление браузера

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

Чтобы использовать обновление браузера, сначала создайте приложение ASP.NET, используя любой из шаблонов проектов. Выполните отладку приложения, нажав клавишу F5 или щелкнув значок стрелки на панели инструментов:

Снимок экрана: Visual Studio со значком стрелки, выделенным на панели инструментов для демонстрации процесса отладки приложения.

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

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

Чтобы выполнить отладку в нескольких браузерах, выберите Обзор с помощью. В диалоговом окне Обзор с помощью выберите несколько браузеров, удерживая нажатой клавишу CTRL. Нажмите кнопку Обзор , чтобы выполнить отладку с выбранными браузерами. Ссылка на браузер также работает, если вы запускаете браузер за пределами Visual Studio и переходите по URL-адресу приложения.

Снимок экрана: диалоговое окно

Элементы управления Browser Link находятся в раскрывающемся списке со значком круговой стрелки. Значок стрелки — это кнопка Обновить .

Снимок экрана: Visual Studio с кнопкой

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

Снимок экрана: Visual Studio с выделенной кнопкой

Чтобы обновить подключенные браузеры, нажмите кнопку Обновить или нажмите клавиши CTRL+ALT+ВВОД. Например, на следующем снимку экрана показан проект ASP.NET, созданный с помощью шаблона проекта MVC 5. Приложение работает в двух браузерах в верхней части. В нижней части проекта открыт в Visual Studio.

Снимок экрана: проект A P Dot Net с приложением, работающим в двух браузерах, параллельно, и проектом, показанным ниже в Visual Studio.

В Visual Studio я изменил заголовок <h1> для домашней страницы:

Снимок экрана: Visual Studio с проектом A P dot Net и выделенным заголовком H 1.

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

Снимок экрана: проект A P dot Net с изменениями, отображаемыми в окнах браузера, отображаемыми рядом, и проектом, показанным ниже в Visual Studio.

Примечания

  • Чтобы включить ссылку на браузер, задайте debug=true в элементе <компиляции> в файле Web.config проекта.
  • Приложение должно выполняться на localhost.
  • Приложение должно быть предназначено для .NET 4.0 или более поздней версии.

На панели мониторинга Связь браузера отображаются сведения о подключениях к браузеру. Чтобы просмотреть панель мониторинга, выберите раскрывающееся меню Ссылка на браузер (небольшая стрелка рядом с кнопкой Обновить ). Затем щелкните Панель мониторинга ссылок в браузере.

Снимок экрана: Visual Studio с выделенной кнопкой

На панели мониторинга перечислены подключенные браузеры и URL-адрес, по которым переходил каждый браузер.

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

В разделе Предварительные требования показаны все действия, необходимые для включения ссылки на браузер для этого проекта. Например, на следующем снимке экрана показан проект, в котором для debug задано значение false в файле Web.config.

Снимок экрана: панель мониторинга ссылок в браузере с разделом

Чтобы включить ссылку на браузер для статических HTML-файлов, добавьте следующую команду в файл Web.config.

<configuration>
  <system.webServer>    
    <handlers>
      <add name="Browser Link for HTML" path="*.html" verb="*" 
           type="System.Web.StaticFileHandler, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" 
           resourceType="File" preCondition="integratedMode" />
    </handlers>
  </system.webServer>    
</configuration>

Для повышения производительности удалите этот параметр при публикации проекта.

Ссылка на браузер включена по умолчанию. Отключить его можно несколькими способами.

  • В раскрывающемся меню Ссылка на браузер снимите флажок Включить ссылку на браузер.

    Снимок экрана: Visual Studio с отображением и снятием флажка

  • В файле Web.config добавьте ключ vs:EnableBrowserLink со значением false в разделе appSettings.

    <appSettings>
  <add key="vs:EnableBrowserLink" value="false"/>
</appSettings>

  • В файле Web.config задайте для отладки значение false.

    <system.web>
  <compilation debug="false" targetFramework="4.5" />
</system.web>

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

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

Снимок экрана: окно

Исходные файлы не изменяются. Модуль HTTP динамически внедряет ссылки на скрипт.

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