4 ms·

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

Chrome Developer Tools is a powerful and often underutilized toolbox. http://code.google.com/chrome/devtools/docs/overview.html 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 http://code.google.com/chrome/devtools/docs/elements.html Assets, Cookies, Databases: http://code.google.com/chrome/devtools/docs/resources.html http://code.google.com/chrome/devtools/docs/resources.html Network timings: http://code.google.com/chrome/devtools/docs/network.html http://code.google.com/chrome/devtools/docs/network.html JavaScript debugger, breakpoints, watch expressions: http://code.google.com/chrome/devtools/docs/scripts.html 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 http://code.google.com/chrome/devtools/docs/timeline.html JavaScript CPU and Heap profiling: http://code.google.com/chrome/devtools/docs/profiles.html 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 http://code.google.com/chrome/devtools/docs/console.html

elchief 15y ago
I've found firebug to be superior to CDT in every way
- GICodeWarrior 15y ago
  Firebug doesn't have anything close to the Timeline in Chrome. It doesn't have heap profiling either...
  - masklinn 15y ago
    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)
- hack_edu 15y ago
  I've found that it chews through memory and drags down the whole browser, even when I'm not actively using it.
  - masklinn 15y ago
    That was true a year or two ago, but I've found it much improved as of late. Fb 1.7 is very good.
    - mun2mun 15y ago
      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/ http://hacks.mozilla.org/2012/01/firebug-1-9-new-features/
      - masklinn 15y ago
        I meant "from 1.7", sorry.
neilk 15y ago
Am I missing something, or is this only relevant to client-side code? The OP is talking about server-side code.
- dangrossman 15y ago
  > Backbone, and client side stuff such as Sencha > my debugger consists of alert()
masklinn 15y ago
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_IntelliJ_IDEA http://wiki.jetbrains.net/intellij/Debugging_JavaScript_with...
- bmj 15y ago
  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.

elchief 15y ago

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

GICodeWarrior 15y ago
Firebug doesn't have anything close to the Timeline in Chrome. It doesn't have heap profiling either...
- masklinn 15y ago
  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)
hack_edu 15y ago
I've found that it chews through memory and drags down the whole browser, even when I'm not actively using it.
- masklinn 15y ago
  That was true a year or two ago, but I've found it much improved as of late. Fb 1.7 is very good.
  - mun2mun 15y ago
    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/ http://hacks.mozilla.org/2012/01/firebug-1-9-new-features/
    - masklinn 15y ago
      I meant "from 1.7", sorry.

neilk 15y ago

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

dangrossman 15y ago
> Backbone, and client side stuff such as Sencha > my debugger consists of alert()

masklinn 15y ago

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_IntelliJ_IDEA http://wiki.jetbrains.net/intellij/Debugging_JavaScript_with...

bmj 15y ago
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.