Explore Videos MSDN eNews Social
Windows
Web
Phone
Cloud
Visual Studio
Security
ALM
Breakpoint
Canada Does Windows Azure
More
The latest on developer tools and technologies you care about.

Sign Up
Latest Editions
Previous Editions  
Stay connected through on your favourite social network.

Twitter
Facebook
LinkedIn

Browser Link–A Web Developer’s New Best Friend

Browser Link–A Web Developer’s New Best Friend

  • Comments 3

At a conference a few months ago, I was demonstrating the F12 developer tools in Internet Explorer when someone asked me:

Do you think Microsoft will ever make it so we can edit CSS in the browser’s developer tools and have those changes save back to the original CSS files?

That would certainly be a nice feature as it would streamline the design process for a lot of web developers. I spend a lot of time tweaking CSS and HTML in the browser, making sure everything looks just right. It is always a clumsy and manual process to push those changes back into the source files.

Fast forward to the launch of Visual Studio 2013 and this feature is now available. What you might find surprising is that the feature is not limited to Internet Explorer. It actually works with ALL browsers (IE, Chrome, Firefox, etc.)

Meet Browser Link

This magical feature is enabled by Browser Link. Browser Link is a feature in Visual Studio 2013 that allows for 2-way communication between Visual Studio and any number of web browsers. You will notice a Browser Link icon next to the Run button on the toolbar.  You can read more about Browser Link here.

The features that allows you to save changes from F12 developer tools is enabled by a Browser Link extension in Web Essentials. Once you have Web Essentials installed, ensure that the Enable Browser Link and Enable Saving F12 Changes options are both checked.

image

To see Browser Link in action, run your application. Once the main page is loaded, press the Ctrl and you will notice a faint Web Essentials toolbar on the bottom of your browser window.

image

Next, open the browser’s developer tools by pressing F12 and make a change to the CSS.

In this example, I will edit the CSS for a class called important-header. Initially, this class adds a red border around the element.

image

Now, I want to make this header look even more important. Using the Internet Explorer F12 developer tools, I change the background color to Salmon and increasing the border width.

image

To save these changes back to the CSS files, click the Save F12 Changes button on the Web Essentials toolbar.

image

The changes I made are instantly saved back to the originating CSS file. You will notice that if even collapsed the border-width attribute into a single border attribute.

image

If you choose to turn on F12 auto-sync, the changes will save back instantly and you won’t even need to remember to click the Save F12 changes button.

When using this feature, you might notice that some changes do not get saved back to CSS. One example is if you make changes to a class that is defined in bootstrap.css. Web Essentials appears to recognize that bootstrap.css is part of a 3rd party library that my application references and it avoids saving changes to that file. If you want to override bootstrap styles, you will first need to manually override them in your application’s CSS files.

Other Great Features

Web Essentials adds a number of other great Browser Link extensions that are available through the Web Essentials toolbar.

  • Inspect Mode – Allows you to highlight an element in the browser and the corresponding code will be highlighted in Visual Studio.
  • Design Mode – Allows you to edit the content of an element in the browser and the corresponding code will be updated in Visual Studio. This even works if the HTML was generated by Razor code!
  • Track Unused CSS – Enters a CSS tracking mode that helps you find unused CSS.

Summary

Download Web Essentials to try out these great new features. The combination of Web Essentials and Visual Studio 2013 helps to streamline some of the more painful tasks faced by web developers today.

While I demonstrated these features using Internet Explorer, these features also work in other browsers including Chrome and Firefox.

Leave a Comment
  • Please add 8 and 4 and type the answer here:
  • Post
  • What does the 'Start recording' button do? Apparently no one is writing about it, not even the 'Learn more about Browser Link' link in the Browser Link Dashboard in VS 2013.

  • Hi Arun,

    The 'Start Recording' button is related to the Track Unused CSS feature. I will follow up with a blog post on this feature.

  • Arun, Follow post is available here: blogs.msdn.com/.../browser-link-tracking-unused-css.aspx

Page 1 of 1 (3 items)