How does one go about debugging javascript?

[Complete]

How does one go about debugging javascript?

 

Do you use firebug and run your page through your localhost?

 

If javascript is part of an ASP.NET application, I have found that the breakpoints in a .js file in Visual Studio seem to be ignored.

 

The problem I see is that the ASP.NET application which uses javascript code has too versions -- a published and a debug version. The Debug version is located within my group of folders under the localhost. Also, when I launch the program through Visual Studio, it defaults to IE. Is there some way I can have it launch a different browser that will allow for javascript debugging?

 

Is there a step-by-step description somewhere?

 

Javascript seems to be very popular. I imagine a debugger is in use. So, what is it and how can you use it if your javascript is already part of an asp.net web site/page?

[thescientist]

I just keep the browsers error console open and look there for errors/warnings/etc and any console logging that I may have added.

[justsomeguy]

All modern browsers have developer tools built in, there are links in my signature block about them. You can install additional tools if you prefer, like Firebug. IE has the least useful set of developer tools in my opinion. I don't develop with .NET or Visual Studio so I can't comment on how to configure that.

[davej]

Everyone here is a strong proponent of using browser tools but for simple stuff you can get pretty far with just an onerror block and inserted alerts or output code in the suspected trouble spots.

[thescientist]

if you're going to use alert, you might as well just use console. You can't expand/inspect nested data structures in an alert, unlike a good console, which would. Plus its annoying to have your page flow stop for every alert.

 

Personally, I don't see why anyone would want to use anything but the debugging tools/console. That;s why they are there, after all. Especially Chrome's, I'm quite a fan.

[davej]

I just don't use that many complex data structures. I can log data to a div at the bottom of the screen as easily as to a debugger console.

 

If you have a simple/short example that would demonstrate the vast superiority of the debugger I would be interested to see it.

Edited September 2, 2013 by davej

[justsomeguy]

 

 

I can log data to a div at the bottom of the screen as easily as to a debugger console.

Not necessarily, for one you need to create the div. The console is already there.

 

A debugger is necessary if you want to use breakpoints, for example. You can't set up breakpoints without one. You might want to pause the code at a certain place and inspect all of the current variables. Instead of adding a bunch of code to output all of those values, just click once to set a breakpoint and that's it. A debugger also lets you inspect the DOM in real time, to see what the current elements are with their style information and everything. That's useful if your Javascript code changes the structure of the page. I also typically make CSS changes in the debugger first to see what works before updating the files, because the changes you make in the debugger get updated on the page as you make them. The only thing alerts or logging to a div is good for is to look at individual values of variables, if you're doing anything else then you need a debugger.

[davej]

I guess several factors are at play here. First, with other languages the debugger is also the editor -- and you can't do anything without the editor -- so it does double-duty with one window on your desktop. Also with other languages you can't get syntax errors to pop up with a simple onerror codeblock or have the easy option of adding a div to the bottom of a page that you could log data into, and many languages do not offer a simple convenient function like alert().

[justsomeguy]

First, with other languages the debugger is also the editor -- and you can't do anything without the editor -- so it does double-duty with one window on your desktop.

With Javascript, the runtime environment is also the debugger. When you're testing your code, you have the debugger right there waiting to be used. You just decide to skip it and add more code to do your debugging when you could avoid adding extra code and instead just use the debugger.

[thescientist]

and we're just talking about the console here. there's a lot more to dev tools than just that.

 

I prefer Chrome, and here's a break down of everything it offers

https://developers.google.com/chrome-developer-tools/

[thescientist]

With Javascript, the runtime environment is also the debugger. When you're testing your code, you have the debugger right there waiting to be used.

what, you mean

 

$ tail -f path/to/server/logs

 

doesn't count?