To demonstrate, I am going to debug a random page on the internet done in PHP. I did a Live search and picked up http://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.
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.
The next step is to cause the breakpoint to fire. To do that, hover over the exclamation point in the source web page.
That will cause your breakpoint to be hit. The result is pure goodness.
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:
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.
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
Feature Tour - Simplified Debugging
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!
I can's see the images. They are broken (red cross on upper left corner).
Zugegeben, neu ist dieses Feature nicht mehr, beeindruckend allerdings immer wieder! Mein Kollege Kirk
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.
I do this every day and don't use 2008, yet.
Am I missing something...why all the hype lately??
@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:
Kirk, thanks for the links. They did help me understand what's new for 2008. I just kept hearing "2008 has Jscript debugging!" and all I could think was "Umm, so did 2005...and my memory sucks but didn't 2003 also?"
BUT, you're right...your story just got a lot better because for years I've just been setting breakpoints (or calling debugger; lines) and using the immediate window to interrogate my variables and the DOM to figure out why my beautiful code wasn't working. Interrogating that stuff using the UI will be a lot better.
This functionality exists in Visual Studio 2005, and I use it on a daily basis! :D
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!
Amigos, completando o post do Grande Cerqueira que remete ao blog do mestre ScottGu, vou publicar...