Debugging tips – console.trace

From my observation, debugging is the best-kept secret of the developer life. Everyone is doing quite often, some are doing it even every day, but rarely anyone is talking  (not moaning :)) about it publicly. Have you seen great tech talk at the recent conference, that has addressed some debussing techniques or anything that can be used next time one should find a way to fix the bug? If yes, please, please, please, share it in the comments.

Recently, I was fixing a bug, and complication in it was that it was crashing in function, that was used all over our codebase, so it was very hard to identify where exactly the problem is. One of the ways to identify the stack trace (call path taken to reach the point at which function was called) is by using the DevTools Sources tab and putting the debugger;statement in the function itself. However, when the function is called numerous times and is executed even on mouse move, this can become a very annoying way to trace case in which function failed.

Another way to find out sack trace is to use console.trace(); by putting it in the function before it above to fail. I found that for cases, when function is common and is called in numerous places, this way is much easier for debugging, as all that it is needed to check just last log of this function in console before the error is logged, and here it – stack trace for particular case, when function failed.

Olena Sovyn
Front-end developer (London, UK). I ❤ React, Redux, lodash, React Storybook, and functional programming overall. Always open to learn something new

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Spelling error report

The following text will be sent to our editors: