Hacker News new | past | comments | ask | show | jobs | submit login

Chrome Developer Tools is a powerful and often underutilized toolbox. http://code.google.com/chrome/devtools/docs/overview.html

Inspect the DOM and set modification and event listener breakpoints: http://code.google.com/chrome/devtools/docs/elements.html

Assets, Cookies, Databases: http://code.google.com/chrome/devtools/docs/resources.html

Network timings: http://code.google.com/chrome/devtools/docs/network.html

JavaScript debugger, breakpoints, watch expressions: http://code.google.com/chrome/devtools/docs/scripts.html

Profile everything, network, scripts, styles, layout, painting, garbage collection: http://code.google.com/chrome/devtools/docs/timeline.html

JavaScript CPU and Heap profiling: http://code.google.com/chrome/devtools/docs/profiles.html

JavaScript console, see errors, execute code, inspect breakpoint scope: http://code.google.com/chrome/devtools/docs/console.html




And such tools are available in all modern browsers:

* Safari has the same developer tools as chrome (they're part of the Webkit package), though Safari's tend to lag, and Chrome adds some stuff not present in mainline.

* Firefox has Firebug (third-party extension) and new releases have added a few built-in console-type stuff.

* Opera has Dragonfly, it's a built-in but (in my experience) tends to "feel" flakier than either WDT or Firebug.

* MSIE has its own devtools, they're horrendously bad in MSIE8 and still pretty bad in MSIE9 (they're flaky and tend to be unstable, they're also harder to use and extremely ugly). This is probably the devtools you'll find most painful. I do not know what will be in IE10. Purely for debugging I believe you can also hook Visual Studio (including Express Edition) and get a more full-featured debugger.

Some IDEs can also do remote JS debugging, which is actually pretty freaky. IntelliJ IDEA 9.0+ (and derivatives, RubyMine, PyCharm, PHPStorm and WebStorm) can be hooked in Firefox and Chrome with a bit of setup[0].

[0] http://wiki.jetbrains.net/intellij/Debugging_JavaScript_with...


In my experience, the Webkit tools (particularly in Chrome and Iron) are ahead of Firebug, especially when trying to debug minimized JavaScript (pretty print is included in the tool--in Firefox, you need an additional plugin). Firebug can get laggy when debugging large JS files, too.


I've found firebug to be superior to CDT in every way


I've found that it chews through memory and drags down the whole browser, even when I'm not actively using it.


That was true a year or two ago, but I've found it much improved as of late. Fb 1.7 is very good.


Are you using firefox 3.6? Current firebug version is 1.9 and it has some cool new features http://hacks.mozilla.org/2012/01/firebug-1-9-new-features/


I meant "from 1.7", sorry.


Firebug doesn't have anything close to the Timeline in Chrome. It doesn't have heap profiling either...


Webkit's logging is asynchronous and delayed, this tends to make firebug comparatively significantly better.

I also find the debugging experience better: the debugger seems stabler, and is definitely better:

* Default watches (scope variables) are more flexible (in fact, they're flexible at all)

* The stack pretty prints function arguments, you don't necessarily have to visit each level and check its locals

* Firebug hyperlinks objects and functions to (respectively) the object inspection tab and their source location

The WDT's timeline is not very useful in my opinion, the "network tab"'s overview on the other hand is great for understanding how resources are loaded and affect each other (or what the xhr sequences are when you seem to have a bug there)


Am I missing something, or is this only relevant to client-side code? The OP is talking about server-side code.


> Backbone, and client side stuff such as Sencha

> my debugger consists of alert()




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: