14 Visual Studio Web Development Productivity Tips

Visual Studio proposes quite a few handy tools to boost your productivity as a web developer. Here are some tips focused around web code edition and web application starting and debugging.

Short GIF animation is an excellent way to quickly learn Visual Studio productivity tips. See others related posts based also on short GIFs here:

• 10 Visual Studio Solution Explorer Productivity Tips
• 10 Visual Studio Ninja Code Editor Productivity Tips
• 12 Visual Studio Debugging Productivity Tips
• Top 10 Visual Studio Refactoring Tips
• 10 Visual Studio Navigation Productivity Tips
• 10 Visual Studio Files and Layout Productivity Tips
• 14 Visual Studio Web Development Productivity Tips

1) Wrap selection with div

Once you did a selection you can wrap it with a <div>selection</div> element with the hotkey Shift+Alt.W, also available as a right click menu.

2) The Un-minify menu

If you right-click a minified content (js, css, json, html…) you can see a menu Un-minify:

3) Typing colon ‘:’ insert quotation marks around JSON property name

When typing the colon character ‘:’ the quotation marks are automatically added around the preceding JSON property name:

4) Create a C# class from a copied JSON fragment

Once you’ve copied a JSON fragment to the clipboard, you can use the menu Edit > Paste Special > Paste JSON as Class to paste the fragment as a strongly typed C# or VB.NET class.

5) Drag and Drop an Image from the Solution Explorer to HTML Content

You can drag and drop an image from the Visual Studio Solution Explorer to HTML content. The <img> tag is then created with the proper relative path.

6) Encode image in base64

When the editor carret is over an <img> element, a light bulb appears on the left. Type Ctrl+. to open the bulb menu and select the menu Encode image in base64:

7) Insert image width and height attributes

The <img> light bulb menu also proposes the menu Insert width and height attributes. These image size attributes are used by the browser renderer to allocate the necessary area until the image gets loaded. This trick is important because it improves the page loading user experience. Indeed, with this tricks the page elements get their definitive location as soon as they appear.

8) Use Code Snippets

Code snippets are especially useful when editing HTML-like code thanks to the surround with possibility.

Just select the code element to surround then use the hotkey Ctrl+K, Ctrl+X to choose your snippet.

9) Create and Use your Own Code Snippets

You can access the Code Snippets Manager dialog from the menu Visual Studio > Tools > Code Snippets Manager… or with the hotkey Ctrl+K, Ctrl+B.

The easiest way to create your own snippet is to modify an existing one. Suppose that you want a snippet that add target=”_blank” on <a> link: <a href=”$” target=”_blank”>$selected$</a>.

To do so let’s modify the <a href=”$”>$selected$</a> default snippet just shown in the previous section. You can obtain the path to the a.snippet file from the Code Snippets Manager dialog.

The content of this file is:

Our new snippet shortcut will be atb (a target equals blank). Just modify the content of a.snippet this way and save it to a file named atb.snippet.

Then import the atb.snippet file:

Et voilà!

10) Start Chrome in Incognito Mode to Execute and Debug your Web Application

Starting Chrome in Incognito mode to execute Ctrl+F5 and debug F5 your web applications is quite useful. This way when testing your web application you avoid inheriting cookies from past sessions.

To start Chrome in Incognito mode you’ll need to add a new web browser entry. Click the menu Start > Browse with….

Then get the absolute path to chrome.exe by selecting the Chrome row: (it is C:\Program Files (x86)\Google\Chrome\Application\chrome.exe on my system)

Add Chrome Incognito in the list of browser. For that put the chrome.exe absolute path with the –incognito argument:

Finally set Chrome Incognito as the default browser et voilà!

11) Start Several Browsers to Execute and Debug your Web Application

In the Browse With dialog you can select more than one browser to start. This is pretty useful to test your application on several browsers:

12) Don’t Stop the Debugger when the Browser Window Is Closed

The default behavior of stopping the debugger when your test browser window is closed can be quite annoying. Yo might just want to re-use your existing debug session by opening a new browser window. To do so just uncheck Tools > Options > Projects and Solutions > Web Projects > Stop debugger when browser window is closed:

13) Don’t Start a New Browser Window When Starting Debug

Often we don’t need a new a new browser window when starting a new browser debugging session. If you run an ASP .NET Core Application you can disable this behavior by unchecking Project properties > Debug > Launch browser:

If you run an ASP.NET application un check  Project Properties > Web> Don’t open a page. Wait for a request from an external application.

Take care: disabling this behavior can be quite surprising for your colleagues so make sure to spread the word.

14) Install the Visual Studio Extension HTML Tools 2019 from Mads Kristensen

The extension HTML Tools 2019 from Mads Kristensen proposes quite a few handy tools that will improve your productivity as a web developer!