How do you debug your JavaScript?

Question

I&rsquo;m getting tired of using console.log all the time, so I&rsquo;ve finally decided to learn how to debug frontend code the proper way.What are your favourite javascript debugging tips and tricks?

forgotmypw17 · Accepted Answer

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.)

austincheney · Answer

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.