However, that has changed as well. In September, Scott Guthrie, corporate vice president for Microsoft’s .NET Developer Division, announced on his official blog that from now on Visual Studio will have full support for jQuery.
In this article, I’m going to take the jQuery aspects of Visual Studio for a spin and see what I find. I ran my tests on a Satellite U305 system powered by an Intel Core 2 Duo 1.8GHz, with 2GB RAM, running Windows Vista with Visual Studio 2008 and Internet Explorer 7.
jQuery. There are two general areas we should explore: coding (with the
Now let’s briefly try out the debugging.
Debugging with Visual Studio
For debugging server-side code, Visual Studio hooks into the IIS server, letting programmers set breakpoints and step through the server-side code. Such breakpoints typically occur as a result of the user interacting with the Web page; during this time, the browser will be waiting for the server, unaware that the server is being debugged. (In that case, Visual Studio must either be on the same machine as IIS, or set up to remotely debug.)
But to debug client-side, developers need to set breakpoints that cause the browser itself to pause and wait for the debugger. Given that, the browser must be aware of the debugger and be on the same computer as the debugger.
That means if a developer has a single instance of Visual Studio running, then it needs to be aware that it’s potentially debugging two separate processes: the server-side (through IIS) and the client-side (through the browser).
Instead, a good way is to set a breakpoint in the code (by right-clicking and clicking Insert Breakpoint in the context menu). Then set the HTML page you want to test out as the startup page (by right-clicking the page name in Solution Explorer and clicking Set As Start Page). Make sure the project is set up to use IE as the default browser (by right-clicking on the HTML file in Solution Explorer, and clicking Browse With. In the window that opens, click Internet Explorer, and then Set As Default. Close the window by clicking the upper-right button; don’t click Browse, as you don’t want to open the page from here, because it won’t be set for debugging.) Finally, press F5 to start up the debugger in Visual Studio.
At this point, things worked really well. I set a breakpoint on the first line inside my function. When I typed something into the Web page and clicked the button, the page waited as Visual Studio activated with the code waiting at my breakpoint’s line.
All is cool so far. Now let’s try out the jQuery support.
jQuery Support in Visual Studio} </p>
<p>First, I needed to get jQuery. Since my version of Visual Studio doesnt yet
understand jQuery, I also needed to get the jQuery support files. Fortunately,
theyre both available from one place, <a href=”http
The parameter to the $ function isn’t just the name of an element. Instead, it’s a Cascading Style Sheets selector, and as such can be a style class name, an element type or an element name. In CSS, element names are prepended with a pound sign. Since I’m looking for the element named mydiv1, I pass #mydiv1 to the function.
The function doesn’t return an HTML object but rather a jQuery object that serves as a proxy to my HTML element. This object includes a method called html() that either returns the inner HTML of the element (when you pass no parameters) or sets the contents (when you pass a string as a parameter). I wanted to set the contents, so I passed a string consisting of the value of the text element. Obtaining the text element’s value works similarly, except I called val() instead of html(), and since I wanted to read the value, I passed no parameters.
Easy enough. But when I typed this into Visual Studio, IntelliSense went to work and then understood jQuery. When I type $, a popup appears listing commands, and that one is first. But the whole command is a single character, so I just continued. I typed an open parentheses, and an expanded IntelliSense message displayed.
This message told me the name of the function and the parameters, and additionally described each parameter for me; the message changed as I typed each next parameter. That’s just like coding in C#.
IntelliSense and jQuery: Making It Work
As it turns out, making this work in Visual Studio really didn’t require modifying Visual Studio at all. In my case, I started with a Visual Studio installation that knew nothing about jQuery. To get Visual Studio to understand jQuery, all I did was add a single line of code to my source file:
The support for jQuery isn’t technically an enhancement to Visual Studio so much as a special version of jQuery that Visual Studio’s IntelliSense recognizes. However, it does the job, and it does it well. Somebody spent a lot of time putting it together, and this should really help people who write jQuery code in Visual Studio.