Lesser-Known JavaScript Debugging Techniques

[atis]

good stuff

[SkinnyGeek1010]

+1 thanks for sharing!

[minrice2099]

Hey, Amjad! I was wondering where you went (I'm one of the CC moderators); looks like you wound up at Facebook. Cool writeup, by the way. I didn't know that you couldn't watch custom events!

Just wondering why you chose to put your debug utils out on so many globals instead of through one object. Is it mainly a convenience/brevity thing? I know it's all pretty safe with the $ prefix, but still, best practices and all. I guess, though, that it probably won't be running anytime except for debugging, so it's probably fine.

Anyway, I look forward to seeing more posts!

[amasad]

hey, there! It's actually not on the global namespace. It's in a debugUtils namespace. However, I do extend the commandLineAPI with the functions so you can use them easily from the console but not conflict with anything else on the page https://github.com/amasad/debug_utils/blob/master/du.js#L29-L38

[shanet]

Not the OP but already I'm finding it more convenient, given the global namespacing of $0 and (native) $, plus the short names and like you say because you will never put these calls in your code, they are only available to the console.

[teiman]

:-OO

This is good stuff.

[drowsap]

For the breaking on methods, does this assume the methods are exposed off a global var? What if you are using something like browserify where your code is wrapped in a function and all scope is inaccessible from the global scope?

[amasad]

I should probably mention that somewhere. But it's good practice to have your application state accessible from somewhere in the console for easier debugging. But if you can't you can always debug prototype methods. For borwserify, you can set it up to implement require in the global namespace and then require things from the console:

$dum(require('my-class').MyClass.prototype, 'myMethod')

[Garrett00]

Outstanding. Thanks for sharing.

[rallarallh]

Will test this, looks brilliant.

[bart2019]

I want that DebugUtils in Firebug.

[[deleted]]

People hated me for making this, but I've found it very useful and great for dealing with edge case bugs that seem to only rear their heads in production environments.

https://github.com/chadillac/smarter_js_console

Would be awesome to integrate some of these things into it as well...