Getting Started With Browser Link Dashboard in VS RC 2013

Introduction

This article explains the browser integration in the latest version of Visual Studio, in other words Visual Studio 2013 RC. There is a new option available in this latest version named Browser Link Dashboard. It helps you to connect your application with the various browsers that are connected to the Visual Studio. As I had described in my earlier article I introduced you to the many other features released in this version. Here, I am developing an application in which I'll show you the use of the Browser Link Dashboard.

In that context, you can see in the following image that there are no browser link options available in my application:

NoBrowser-in-RC2013.jpg

So, as you can see there are no browsers connected in my MVC application. Now for connecting to the various browsers so that we can see them in the Browser Link Dashboard have a look at the following options.

Step 1: Create an application. I am working on a MVC application. Open the Browser Link Dashboard.

BrowserDashoard-in-RC2013.jpg

Step 2: Now debug your application.

Chrome-in-BLD.jpg

As you can see that the Browser Link Dashboard shows that Chrome is connected to the Visual Studio.

Working with Multiple Browsers

Let's open the application in the multiple browsers. But you can see in my Browser Link Dashboard that only Chrome is selected. For connecting multiple browsers see the images given below:

Connectedbrowser.jpg

  • Open the "Browse With" option:

    BrowseWith.jpg
     
  • Select the browsers by pressing and holding the Ctrl Key and click "Set as Default".

    Browsers.jpg
     
  • Now the Multiple Browsers option is produced automatically. Have a look:

    MultiBrowser.jpg

Multiple Connections in Browser Link Dashboard

Debug your application by "Ctrl + F5". It will open in multiple browsers. This connects two browsers in the Browser Link Dashboard. Have a look:

MultiConnections.jpg

Now change some code and click on the "Refresh" link. It will change in the browsers also.

MultiConnections2.jpg

Various Modes

The connected browsers in the Browser Link Dashboard have various modes as in the following:

Modes-in-BrowserLinkDashboard.jpg

  • Design Mode

    Press "Ctrl + F5" to open a browser. Design Mode helps you to show the area in the page, while you move your cursor in the browser.

    DesignMode-in-Rc2013.jpg
     
  • Inspect Mode

    Press "Ctrl + F5" to open your application in the browser. It helps you to inspect your page.

    Inspectmode-in-RC2013.jpg

Summary

In this article I introduced the new features released in the Visual Studio 2013 RC. This Browser Link Dashboard feature helps to develop applications in an elegant way. So keep using this. Thanks for reading.