Использование ссылки браузера в 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.

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

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

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

Когда я щелкнул кнопку "Обновить" , в обоих окнах браузера появилось изменение:

Снимок экрана проекта ASP.NET с изменениями, отображаемыми в окнах браузера, расположенных рядом друг с другом, и проекта, который отображается ниже в Visual Studio.

Примечания

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

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

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

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

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

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

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

Чтобы включить ссылку браузера для статических 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>

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

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

  • В раскрывающемся меню "Browser Link" снимите флажок Enable Browser Link.

    Скриншот 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>

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

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

Снимок экрана: окно источника представления в браузере, отображающее специальные ссылки на скрипты, внедренные модулем h t t p.

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

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

  • Last updated on