Ask HN: How do you debug your JavaScript?

2 ポイント投稿者 deepanchor5 年前2 コメント

I’m getting tired of using console.log all the time, so I’ve finally decided to learn how to debug frontend code the proper way.

What are your favourite javascript debugging tips and tricks?

2 コメント

forgotmypw175 年前

My favorite "secret weapon" for JS debugging is sprinkling my .js templates with statements like this:

    //alert('DEBUG: FunctionName() begins, param1 = ' + param1 + '; param2 = ' + param2);

My JS injector has a 'debug' setting, which rewrites all of those statements into one of: console.log(), document.title=(), or confirm(), the latter of which stops appearing after I press 'No' or 'Cancel'.

When not debugging on a modern browser with debugging tools like IE6+VS, Firefox, Opera, Safari, or Chrome, it is a real time-saver to be able to toggle those messages, kind of like a poor man's breakpoint.

(I develop retro sites which are designed to live up to the "any browser" dream, so I test with NN2+, IE3+, and Opera3+, in addition to Lynx, w3m, Links, Dillo, NetSurf etc., not to mention the mainstream FF, Chrome, Edge, Safari.)

austincheney5 年前

I wrote an error handling utility for my application which is helpful.

All my functions are uniquely named against a standard naming convention which helps with stack traces.

For actual debugging I just sprinkle around some console.log statements to see the flow control leading up to the problem. I have an ESLint rule to warn on console statements which makes for easy cleanup.

The hardest part of debugging for me, in a peer to peer app, is that the stack trace isn’t going to align with a flow control divided across a network.