Jason Zander is Corporate Vice President of Development for the Windows Azure team at Microsoft.
Learn more about Jason.
More videos »
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.
Examples of using IntelliSense against various host-provided APIs
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.
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
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.
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.
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.
Follow me at twitter.com/jlzander.