Udostępnij za pośrednictwem

Debug JavaScript in JSP or PHP Pages with Visual Studio 2008

  • Artykuł

I am simply amazed at the JavaScript debugging with Visual Studio 2008.  The really cool part is that it is able to debug the JavaScript from PHP and JSP pages just as easily as it can with ASP.NET.  Think about it... you aren't debugging the server-side stuff at all, you are just debugging client-side JavaScript. 

To demonstrate, I am going to debug a random page on the internet done in PHP.  I did a Live search and picked up https://www.phpfreaks.com/quickcode/BBCode/712.php. 

Open up Visual Studio 2008.  Go to the menu and choose Debug / Attach to Process.  In that window, look for the process iexplore.exe with the correct page title.

Attach to iexplore.exe and choose the correct process 

Click the button that says "Attach".  In the Solution Explorer pane, click "overlib.js".  In the code file, press the "ctrl + f" to open the Find dialog, and search for "olmain()".  That takes you to the olmain function, where you can set a debugging breakpoint.

 Set a breakpoint in someone else's JavaScript!

The next step is to cause the breakpoint to fire.  To do that, hover over the exclamation point in the source web page.

Hover here to fire the breakpoint

That will cause your breakpoint to be hit.  The result is pure goodness.

Debug PHP JavaScript with Visual Studio 2008

  1. The current line of execution is highlighted, and a yellow arrow points to the current line that you are on.  The source is color-coded to make it easier to read (note keywords "typeof" and "return" in blue, string literal "undefined" in red). 
  2. The script for the current page is loaded in the Solution Explorer pane.  You can see the various script files that this page uses, making it easier to determine the relationship of various files.
  3. The Locals window shows local variables and allows you to inspect their values.  You can see that there are several locals that haven't yet been defined, while those that are defined can be inspected.
  4. Maybe my favorite debugging feature... the call stack window.  You can navigate to other frames within the callstack to inspect the code that the current function depends on.  Great for walking backwards to see how the current bit of code was executed.
  5. The Watch window is similar to the locals window, however you can set a Watch on specific variables and even set conditions.  For instance, you can break when variable ar[1] has a value of 1.  Where the locals window shows the locals currently in scope, the watch window allows you to watch for specific variables and set conditions.

There's a whole bunch of other goodness to Visual Studio 2008's debugging capabilities.  For instance, you can hover over variables and inspect their value on the fly using data tips:

 Inspect JavaScript variables on the fly

And if you want to see what that ugly HTML literal string contains, you can use the Debugger Visualizer feature in Visual Studio to visualize it.  Just click the down arrow next to the spyglass icon, and in the dropdown that results, choose "HTML Visualizer".  That will allow you to see the HTML that is behind it.

Visualize HTML literal strings in JavaScript

While you are debugging, you can even change the value of that string in the data tip window!  Yep, edit and continue (works with variables and other source as well).  This is a huge productivity feature, as it allows you to change the source while you are debugging, so that you don't have to go back, make a change, and then start up again. 

As you can see, the debugging facilities are pretty amazing.  And I didn't even cover them all!  For instance, you can create your own Debugger Visualizer to provide a visual rendering of items.  Here are just a few links for more resources.

JScript Debugging in Visual Web Developer Orcas

JavaScript Intellisense in Visual Studio 2008

Deeper Dive on JavaScript Intellisense in Visual Studio 2008

Feature Tour - Simplified Debugging

Tracepoints

Create an Object ID to keep track of an object while debugging

Creating a Debugger Visualizer

How to specify a breakpoint condition

Oh yeah... one more thing... while we would LOVE for you to buy Visual Studio to get all of this goodness, you can get all of this for FREE using Visual Studio 2008 Express.  Yep, all of the features that I described in this post are features of the freely available Visual Studio Express.  Just download the version for Web development, and you are good to go!

 

 

javascriptdebugging.jpg

Comments

  • Anonymous
    August 10, 2007
    PingBack from http://msdnrss.thecoderblogs.com/2007/08/10/debug-javascript-in-jsp-or-php-pages-with-visual-studio-2008/

  • Anonymous
    August 10, 2007
    Hi, I can's see the images. They are broken (red cross on upper left corner). Greetings, Ulla

  • Anonymous
    August 10, 2007
    Zugegeben, neu ist dieses Feature nicht mehr, beeindruckend allerdings immer wieder! Mein Kollege Kirk

  • Anonymous
    August 13, 2007
    Sorry that the images weren't showing up... my ISP decided to let the servers rest over the weekened, apparently :)  Images and ISP are both back online.

  • Anonymous
    August 13, 2007
    You could even debug javascript with no server-side code...even with the simple HTML only account EarthLink used to provide me with. But, Kirk, help me out here.  What is new with 2008?  I've heard a LOT about 2008/Orcas can now debug Javascript...but So could 2005...following almost the exact steps you outlined here.  Even better, if you were smart about how you did it, with 2005, you could debug Javascript just through the "Run/F5" button...no need to attach to process. I do this every day and don't use 2008, yet. Am I missing something...why all the hype lately?? Steven

  • Anonymous
    August 13, 2007
    @Steve - of course, the hype is because we have a new version coming out :)  No, seriously... there have been a number of improvements to the debugging experience.  Here's a good side-by-side of VS2005 and VS2008: http://blogs.msdn.com/webdevtools/archive/2007/03/09/jscript-debugging-in-visual-web-developer-orcas.aspx

  • Anonymous
    August 13, 2007
    @Steve - one more thing is that debugging is only half of the story... now you get Intellisense for JavaScript as well on the development side.  For once, we have a very good story around JavaScript.  Add in Intellisense for Silverlight 1.0, and it's a pretty compelling story for web developers. http://silverlight.net/learn/learnvideo.aspx?video=227

  • Anonymous
    August 14, 2007
    The comment has been removed

  • Anonymous
    August 15, 2007
    Javascript Debugging with Visual Studio 2008

  • Anonymous
    August 15, 2007
    Kirk has an interesting blog post on debugging Javascript (from a PHP page no less) in Visual Studio

  • Anonymous
    August 15, 2007
    Kirk has an interesting blog post on debugging Javascript (from a PHP page no less) in Visual Studio

  • Anonymous
    August 16, 2007
    This functionality exists in Visual Studio 2005, and I use it on a daily basis! :D

  • Anonymous
    August 25, 2007
    I use VS 2005 and have used 2003 or js debugging. I thought it was pretty slick.  Then I discovered firebug (only works in FireFox).  Firebug encompasses a js debugger, DOM viewer, and http monitor all in one plugin.  Intellisense?  Bah!

  • Anonymous
    October 03, 2007
    Amigos, completando o post do Grande Cerqueira que remete ao blog do mestre ScottGu, vou publicar...

  • Anonymous
    October 12, 2007
    Zugegeben, neu ist dieses Feature nicht mehr, beeindruckend allerdings immer wieder! Mein Kollege Kirk