Browser Link в Visual Studio 2013

В Visual Studio 2013 появился новый инструмент, помогающий при разработке веб-приложений — Browser Link. Идея Browser Link заключается в том, что Visual Studio и браузер имеют постоянный канал связи. Это позволяет централизованно управлять браузерами из Visual Studio. Чтобы лучше понять как работает Browser Link, давайте подключим этот инструмент к веб-сайту.

Чтобы использовать Browser Link должны быть соблюдены следующие условия:

  • Приложение должно быть запущено на localhost.
  • Приложение должно работать под управлением .NET версии 4 или более поздней.
  • Для приложения должен быть включен режим отладки (свойство debug=true в секции <compilation> в конфигурационном файле).

Для включения Browser Link в Visual Studio 2013 появилась специальная кнопка на панели управления:

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

Теперь, когда мы включили Browser Link в Visual Studio, можно запустить веб-сайт. Если мы заглянем в исходный код страницы, то там можно увидеть, что в нее встроен код, который обеспечивает поддержку работы Browser Link на стороне браузера.

Этот код добавляется автоматически и только в том случае, если проект запущен локально. При развертывании на удаленном сервере этого кода не будет. Более того, если для конкретного проекта требуется запретить использование Browser Link, то это можно сделать в файле конфигурации, добавив параметр vs:EnableBrowserLink:

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

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

Если мы теперь откроем нужную страницу в браузерах, а затем изменим её в Visual Studio, то нам не нужно открывать каждый браузер и нажимать F5. Теперь достаточно выбрать пункт меню Refresh Linked Browsers (или просто Ctrl+Alt+Enter) и страница будет обновлена во всех браузерах.

Если взглянуть на то, как это устроено, то работает это очень просто — при запуске веб-сайта при помощи SignalR устанавливается соединения клиентской части веб-сайта и Visual Studio. По этому каналу и происходит взаимодействие. Минусом такого подхода, кстати, будет то, что если у вас в приложении так же имеется SignalR-подключение, то они будут конфликтовать.

На первый взгляд может показаться, что это очень незначительная возможность Visual Studio, которая к тому же требует определенной предварительно настройки. На самом же деле Browser Link — это своего рода базовый API, поверх которого можно реализовать собственные сценарии управления клиентским кодом из Visual Studio. Например, некоторые такие сценарии реализованы в популярном плагине Web Essentials.

О том, как создать свой плагин для Browser Link можно почитать, например, здесь.