Skip to content
A Visual Studio extension
C# JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
art
src
.gitattributes
.gitignore
BrowserSync.sln
CONTRIBUTING.md
LICENSE
README.md
appveyor.yml

README.md

Browser Sync

Build status

Download the extension at the VS Gallery or get the nightly build


A Visual Studio extension for ASP.NET projects that leverages Browser Link to synchronize form field entry, page navigation and scroll position.

Browser Sync demo

Feature list

  • Supports all browsers and emulators
  • Typing in input fields is synced across browsers
  • Supports the Web Essentials Chrome extension
  • Keyboard hotkey to navigate all browsers to same URL
  • Keyboard hotkey to synchronize scroll position
  • Settings to enable/disable it all

For Browser Sync to work, make sure that Visual Studio's Browser Link is up and running. Do that by running an ASP.NET application from Visual Studio in one or more browsers.

Hovering over the Browser Link button on the Standard toolbar lets you know if Browser Link is connected.

Browser Link Tooltip

Form field sync

This extension registers when typing occurs in these HTML elements:

Input

<input value="" id="email" />

Works for all input types including range, number and password, checkbox, datetime, color and radio to the extend browsers do.

The file type isn't supported due to browser security constaints.

Textarea

<textarea name="text"></textarea>

Select

<select name="text">
  <option>First</option>
  <option>Second</option>
  <optgroup>
    <option>Third</option>
    <option>Fourth</option>
  </optgroup>
</select>

Multi select

<select id="multiple" multiple>
  <option>First</option>
  <option>Second</option>
  <option>Third</option>
</select>

contenteditable="true"

<div contenteditable="true" id="article" />

The elements MUST have either an id and/or name attribute for the sync to work.

Navigation and scroll position

When you have multiple browser windows open onto the website your building in Visual Studio, it is handy to be able to navigate all the browsers to the same page on your site.

Browser Sync makes that easy. Simply navigate to a page on your site and hit CTRL+ALT+Enter in the browser.

That will navigate all the other browses to that same page.

Hit CTRL+Alt+Enter again and all browsers will move to the same scroll position.

Welcome message

The first time after installing this extension, a modal overlay will be shown in all connected browser as you run your website.

Browser overlay

This is to advertize the otherwise hidden feature of navigational synchronization which is only available through a keyboard shortcut in the browser and have no UI of their own.

Hitting the Thanks, got it button or simply hitting the ESC key will dismiss the modal for the duration of the current Visual Studio session. It will dismiss the modal in all the connected browsers.

By checking the checkbox, the modal will never be shown again.

Settings

You can disable Browser Sync very easily from the Browser Link dropdown on the Standard toolbar.

Browser Link Menu

This will disable both the navigational sync using hotkeys as well as the form field sync.

Both of those settings can be individually set in the Tools -> Options -> Web -> Browser Sync dialog.

Settings

License

Apache 2.0

You can’t perform that action at this time.