My Favorite Features: Improved Tooling in Visual Studio 11 for JavaScript Developers


I’ve been working on some coding projects lately, and spending a lot of time in Visual Studio 11. I wanted to start a series to share some of my favorite features that I’ve enjoyed using in the product. One feature that I ended up using a lot, while working with jquery and jquerymobile, is the new JavaScript tooling support.

IntelliSense

The first thing you’ll notice when doing JavaScript development in Visual Studio 11 is IntelliSense. After using it, you might forget that you’re working in a dynamic language! The JavaScript editor has been completely rewritten on top of the same Chakra runtime that ships in IE10, which means that IntelliSense is more responsive, accurate and scalable than ever before.

The engine was designed to accommodate the development of both web and Metro style apps, so that regardless which platform you’re targeting, you’ll get the same rich IntelliSense experience. You can see examples of this in the table below. 

  Host API

  Sample Screenshot

  WinRT

  WinJS

  JavaScript
  (ES5)

  DOM

  HTML5

Examples of using IntelliSense against various host-provided APIs

Third-Party Libraries

The JavaScript community is extremely active, and as a result, produces an almost constant flow of reusable components and libraries. This strong ecosystem makes it great to be a JavaScript developer, and we appreciate that everyone has their own favorite libraries. To ensure that a developer’s preferences don’t inhibit their IntelliSense experience, the JavaScript editor has been designed to recognize and support modern third-party libraries so that you get a “native”-like experience when consuming their APIs. You can see examples of this below.

  Library

  Sample Screenshot

  jQuery

  RequireJS

  + jQuery

 

  Using the
  RequireJS
  extension

Examples of using IntelliSense against 3rd party libraries

These examples highlight a couple of interesting new features that make the IntelliSense support so compelling in VS11:

1)      IntelliSense is available for parameters within DOM event handlers

2)      Any child scripts that a library requests will be automatically downloaded and made available for IntelliSense

In addition, library authors have the ability to augment the IntelliSense experience (as RequireJS has done in the example above). This way, when a library makes use of a pattern that the IntelliSense engine doesn’t understand the semantics about, the library can provide this information. This ensures that developers continue to get an amazing editing experience while library authors can be as expressive as they want when designing their API.

Enhancing IntelliSense with XML Doc Comments

Despite how accurate IntelliSense is, JavaScript is ultimately a dynamic language. Therefore, there are still times when the value of an object is too ambiguous for the editor to know what you expect to see when accessing it. For those instances, you can provide “hints”, in the form of XML doc comments, which explicitly declare your completion list expectations. This feature has been in Visual Studio for a few releases, and has been enhanced in Visual Studio 11 to make it easier to use.

One neat enhancement is the ability to annotate the value of an object, as opposed to its type (constructor function). Simply provide an example of what the object’s value could be and IntelliSense will take care of the rest. This allows you to define an IntelliSense-only “type” without having to modify your existing API.

options.settingOne being recognized as a Number because of the value annotation

The value attribute can be set to any JavaScript expression which allows you to get as creative as you want in order to ensure you get exactly the IntelliSense you’re looking for.

options.gameCanvas being set to an <canvas> due to the execution of a jQuery selector

Once you get the hang of using doc comments, they can help speed up your development. For more details about how to use them, make sure to read the documentation.

Debugging

Another place where I really felt the difference in Visual Studio 11 was with the JavaScript debugging. It saved me a couple of times!

When you begin debugging your app, you’ll immediately notice a couple of new tool windows: DOM Explorer and JavaScript Console. Both of these windows help you understand the browser’s interpretation of your app and perform quick and iterative updates without having to interrupt your debugging session.

DOM Explorer

Regardless whether you’re developing a web app or a Metro style app, you’re writing your UI in HTML and CSS. Trying to visualize a given page’s DOM, as well as the exact CSS properties needed to style it in the way you want, can become a daunting task for any non-trivial application. With the DOM Explorer, you can easily find an element in the DOM tree (by clicking the Select Element button), view the CSS properties that are applied to it, and tweak them on the fly. I’ve found this makes it a lot easier to perform “guess-and-check” operations on my HTML and CSS that would otherwise have taken a lot of time if I had to keep modifying my code and restarting the debugger.

Viewing a <p> element in the DOM along with the CSS styles that are applied to it

Any change you make will be immediately reflected in your running application. For example, if I change the color property (shown in the Trace Styles tab) of the currently selected <p> tag to “red” and then switch back to my Metro style app, all of the headers will be red.

I can continue to try different colors, experiment with various fonts, or make any other change to my app and get immediate visual feedback on how it would look. Pretty easy!

You can find more information on the DOM Explorer on MSDN.

JavaScript Console

While the DOM Explorer allows visual interaction with your app, the JavaScript Console allows you programmatic access. You can use it to execute any JavaScript expression, which provides a REPL for testing out arbitrary code.

I commonly find myself using the console to test code before adding it to my source. This iterative approach allows me to quickly validate some logic without having to worry about restarting the debugger in between revisions. Like the DOM Explorer, the console’s effects are reflected immediately, so you can view your changes in the running app as you make them.

For more information on the JavaScript Console, including custom console commands, please visit MSDN.

I also recommend visiting the Visual Studio blog for a great post on additional JavaScript debugging enhancements.

Conclusion

Whether you’re a seasoned JavaScript expert, or newly interested in the language, I hope you’ll have an opportunity to try out the new JavaScript tools in Visual Studio 11. Between the rich IntelliSense and the debugging capabilities of the DOM Explorer and the JavaScript Console, there are a lot of new features to explore.

Enjoy!

 

Follow me at twitter.com/jlzander.

Comments (9)

  1. esi says:

    Some times visual studio become freeze when user open 2 projects in one time.

    in this case , code adding or control adding don't work . and vs show old changing.without apply new changing.

    this is very huge problem in vs 2008 or vs 2010.

    thanks.

  2. Jorge Montaño says:

    Jason, Very cool features, I like the DOM explorer and also the Javascript Console, when we will be able to test the new improvements on Intellisense.

    Kind Regards,

    -Jorge

  3. Great article.  Love the stuff you guys are doing and I can't wait until it's released.  I don't know if they are the same code base, but I've been using Developer Toolbar DOM Explorer to understand complex web pages built by other developers.   It's been very handy.

    One thing that wished for was to be able to see the Layout Tab at the same time I make a change in one of the other tabs. Instead, I have to constantly flip back and forth between some tab to the Layout tab.  

    Many of the windows in the VSIDE can be moved around, floated or docked. I feel that it would be nice to be able to see the Layout Tab while making adjustments to CSS inline styles and attributes. This could be accomplished if the developer could move the tab around at grid within the right side of the DOM Explorer window, just like we can in the main VS IDE.

    I realize it's pretty late to make a suggestions, but if floating and docked tabs are too much, you could simply put the Layout Tab as it's own area that isn't a tab. It would always display the current element.

    This suggestion is proably too much but it might be nice to be able to adjust the style directly in the Layout tab. I believe this tab is only an output tab.

  4. Nice! Both for JS debugging and for non-native scrollbars :)

  5. Alex says:

    one thing that i would like to see is that the Js console would be multi-line just like Firebug. would that be feasible?

  6. Tarik Guney says:

    JS improvements are late additions. I was expecting these improvements within VS2010. Well better than nothing. It seems one of the reason why Microsoft is focusing on JS editor is to let people develop app with JS to Windows 8.

  7. Steve says:

    Still no color in the intellisense icons? I thought the RC was supposed to have addressed that.

  8. Chris says:

    Thanks very much for the improved JS handling, but why have you replaced the rich-looking and easy to understand icons with these dark/drab/monochrome things??  Is trying to be trendy/copying Google  more important than your customer's productivity????

  9. Jasonz says:

    @ Alex. Good news. This is available in the Visual Studio 11 Beta JavaScript Console today. Just click the arrow icon on the bottom right to toggle between single line and multi-line mode. I’ve posted a picture for you here: blogs.msdn.com/…/3660.MultiLineJsConsole.jpg

    @ Steve & Chris. This posts uses screenshots from the currently released version, which is Visual Studio 11 Beta. However, we do have updates planned to bring back color in Visual Studio 11 RC, as you’ve suggested. You can read more about these changes on the Visual Studio blog: blogs.msdn.com/…/visual-studio-11-user-interface-updates-coming-in-rc.aspx