Pseudorandom Knowledge

That jQuery thing: Visual Studio

When creating a new web application in Visual Studio I suggest doing the following to get the best jQuery and JavaScript support.

  1. Create a directory called Scripts in the root of the web application. This will hold all JavaScript files.
  2. Download the latest jQuery version, both the minified and uncompressed versions, and put them in the scripts directory
  3. Go to the jQuery vsdoc File Generator and select the same version as you downloaded in step 2. Build the doc file, copy the output and put it in a file named jquery-x.x.x-vsdoc.js in the scripts directory (where x.x.x is the jQuery version number of course).

The last file will give full IntelliSense support for jQuery in Visual Studio. More on that later. Your scripts directory should now look something like this: 

jquery-1.6.2.js
jquery-1.6.2.min.js
jquery-1.6.2-vsdoc.js

Next include the minified version in the master page. 

<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

Both jQuery and IntelliSense for jQuery will now be available in all ASPX pages (if they use the master page). However, if we want IntelliSense in external JavaScript files we have to put the following line at the top: 

/// <reference path="jquery-1.6.2.min.js" />

The reference tag is used to tell IntelliSense where to look for functions and objects outside of the current file. It can be used for any JavaScript file or web page. In this case Visual Studio will be smart enough to use the vsdoc version. I could reference the vsdoc version directly but I want to keep it consistent.

Note that we don’t actually use the uncompressed version of the jQuery file. I still recommend adding it, it might be needed if you have to debug into the jQuery code. When it is time to update jQuery we have to update all these references. Fortunately a bit of search and replace should make the process fairly simple.

JavaScript debugging

While we are on the subject it is worth mentioning the best way to debug JavaScript in Visual Studio. For this we need to use Internet Explorer when debugging.

  1. Right click any ASPX page in the Solution Explorer
  2. Select Browse With...
  3. Select Internet Explorer and set it as default

Now you can put break points in JavaScript code and step through it like you do with C# code. Internet Explorer also integrates better with Visual Studio in other ways. For example, if you close the IE window VS drops out of debug mode.

All of this has been tested with Microsoft Visual Web Developer 2010 Express, which is what I’m currently using.