Quick and dirty tricks for debugging Javascript 🕵

In an ideal world, every piece of code would have multiple tests, any regressions immediately pin-pointed to a specific commit, and all commits would be of a reasonable size with a sensible message. I don’t live there (which may partially be my own fault), and you probably don’t either. Here are a few debugging tricks that have served me well, I hope they’ll be of some use for you as well… just don’t accidentally commit any of this. What is this? We’ve all looked upon jumbled messes of variables, operations and method calls and wondered — ? #@& Let’s say you find a bug where the value of has turned out to sometimes be incorrect: foo I’ll assume everyone knows how to use breakpoints and s. Those are great tools, but sometimes problematic code may be in a place where it's difficult to place a breakpoint, or perhaps you don't want to hassle with pausing script execution. debugger One quick and dirty way to log out what the values are without majorly restructuring your code is this: This works because returns , and returns . Horrid, ugly, but boy is it quick! You’re not checking this code in anyway so what does it matter? console.log undefined undefined || val val A problem though is that as you’re debugging and tweaking the code, you may forget to sync the original values and what’s being logged out. Here comes a utility function! Now you can do this: Perhaps you’d like to tag the logs with something so that they can be differentiated： What’s calling this? In my article on , I wrote about how we ran into an issue where the brower’s address bar was sporadically being reset. I knew that Angular was most likely calling , but still needed to find out where and why it was doing that before I could figure out how to fix it. Using AngularJS (Angular 1) components in React history.pushState This is what I did: Whenever something calls , it'll get my modified version which will print out a stack trace, letting me know who the caller was. history.pushState You could abstract this out to a utility function that can be applied to other places. (updated based on suggestions from Greg Lockwood ) Let’s try that on console.log What’s setting/overwriting this? There have been a surprising number of times where I’ve had to deal with multiple versions of Lodash and Underscore overwriting each other. To figure out why that was happening, a similar trick could be used to see when a property is assigned a new value by taking advantage of . Object.defineProperty Here comes another utility function Let’s try overwriting now _ Miss anything? Please leave a comment or tweet at me to let me know about any other debugging tricks that you’ve found useful @CheapSteak Really appreciate and for proofreading and feedback, and for the suggestion of returning the value of in and including these as a “ ” in Chrome Dev Tools. Jeffrey Burt Anne Thomas Greg Lockwood fn.apply traceFn snippet Thanks for reading😄 If you liked this article, you might also find my tool for comparing downloads of npm packages useful — npmcharts.com Here’s a sample chart comparing all the React UI component libraries — Sign up for my newsletter to receive new articles in your inbox