Javascript Development with Visual Studio 2011 Beta

May 9th at 12:00am

Developing applications in JavaScript can be difficult. While it is a high-level language I often times feel like I'm working something very primitive. When I set out to develop a program in a high level language I expect that most of my time will be spent coding a solution to the problem that is at hand rather than deal with my development environment.

My biggest issue with Javascript development is the lack of a decent IDE + Debugger. While there are thousands of ways you can hack text editors to give them IDE like functions, it is disappointing to find that there is no painless development environment for JavaScript.

Since I like Visual Studio a LOT I decided to try out Visual Studio 2011 (Beta) and see if it has any features that are conducive to HTML5 and JavaScript development

Edit 30-May-2012: While I Enjoy Visual Studio, I have found JetBrains WebStorm and PhpStorm to be more usable for my JavaScript development/debugging needs. I find that I need to switch between Mac, Windows and Linux on a regular basis which makes Visual Studio a tough sell.

I have an article about setting up Debugging in PhpStorm here 

Notes:

 

Part 1: Download & Installation

You can download the Installer for Visual Studio 2011 by visiting this link. The installation process is fairly painless:

  1. Double click the EXE
  2. Specify an installation location
  3. Let the installer download & install the components needed for VS2011 to work

NOTE: I found that VS2011 Beta can live side-by-side with my Visual Studio 2010 Express installations

 

Part 2: Create a Simple Web Project

While it isn't earth-shattering, this project does demonstrate the basics of setting up an HTML5 Project:

  1. Open Visual Studio and select File -> New Web site...
    VS2011-1.png
  2. Select Templates -> Visual C# -> ASP.NET Empty Web Site then give the project a Name and hit the OK button
    VS2011-2.png
  3. Right-click on Website and select Add -> Add New Item...
    VS2011-3.png
  4. Pick HTML Page, give it a name of index.html and press the 'Add' button
    VS2011-4.png
  5. Add another new item. This time pick a Javascript file VS2011-5.png
  6. Enter a few lines of simple JavaScript wrapped in a function. In the image below, note how the Intellisense picks up on the properties available to Javascript Objects:
    VS2011-6.png
  7. In the index.html file, reference the Javascript you just created. Note how the IntelliSense can locate your Javascript file in the Image below
    VS2011-7.png
  8. Now call the function that you created in your Javascript file in index.html. Note that the IntelliSense knows the names of the javascript methods that are available, making it really easy to select the function:
    VS2011-8.png

At this point you have a fully functional (if simple) Web Project. Go ahead and Save the files then move on to the debugger section

 

Part 3: Set breakpoints & try the debugger

  1. Set a BreakPoint next to your method call (messager in my example) and click the 'Play' button to start debugging:
    VS2011-9.png
  2. If you see the following messagebox, select the option to modify the web.config file to enable debugging:

    Debugging Not Enabled
    The page cannot be run in debug mode because debugging is not enabled in the Web.config file. What would you like to do?

      -  Modify the Web.config file to enable debugging.
              ! Debugging should be disabled inthe Web.config file before deploying the Web site to a production environment

      -  Run without debugging. (Equivalent to Ctrl+F5)

    Image of the messagebox:VS2011-10.png
  3. The Breakpoint should be hit and IE should stop loading the web page until you press continue or choose to step-through the code
    VS2011-11.png
  4. As you step through the code you can see the current value of any javascript variables:
    VS2011-11.5.png
  5. Once you let the execution 'continue' you'll see a Browser window with the alert you setup in your JavaScript Function. In my case it displays the word 'bob':
    VS2011-12.png

 

Impressions

  • I love how the IDE's IntelliSense is USEFUL. It knows how to pick up on Object properties, Javascript files and functions defined in those files.
  • The Debugger is a pleasure to use. I enjoy being able to examine the contents of JavaScript objects and variables in a developer friendly fashion
  • This makes picking up JavaScript less painful if you are coming from a C#.NET world
  • I like how you can select other browsers besides Internet Explorer. This is a Nice touch and shows Microsoft's willingness to create a good general purpose development environment.

I think the future is bright for HTML5 / Javascript development in Visual Studio. I'll be using VS2011 in my next project to see if it can hold up when developing a 'real' application.