Thursday, November 28, 2013

Web Essentials Browser Link Integration

Last week I discovered a new feature of the Web Essentials:

When you start debugging your web application, you get an extra toolbar by hitting ctrl:

image

This toolbar gives you the following options:

  • Design: Click on any element and edit its text directly in the browser, the results of the edit are reflected in source code
  • Inspect: Click on any element to jump to the corresponding source code in Visual Studio
  • Save F12 changes: Saves the changes that you did in the IE Developer tools back to the source code
  • F12 auto-sync: Any change to CSS properties in the browser dev tools is reflected in your CSS files in Visual Studio
  • Unused CSS detector: Audit your CSS selectors and see which ones don’t match anything in the page

All these features are based on the new Browser Link feature in Visual Studio 2013.

image

1 comment:

Priya Kannan said...

Wonderful bloggers like yourself who would positively reply encouraged me to be more open and engaging in commenting.So know it's helpful.
PHP Training in Chennai