Home
Do you know the best tools to debug Javascript?
  v4.0 Posted at 30/11/2016 12:13 PM by Duncan Hunter
​Debugging JavaScript application can be difficult. Having to console.log results can make for a slow and cumbersome development experience. There are five ways you can debug a JavaScript application without leaning on console.log() as your main tool.​

Options for Debugging JavaScript applications

  1. Debug your JavaScript using console.log()
    While this is a valid approach it should only be utilized for the simplest of manual debugging tests as they are slow, you have to re-run the app every time, do not allow you to change state mid-flight and developers sometimes forget to clean up after themselves and the code becomes riddled with console.log statements.

    debug-js-1.png
    Bad code - Using console.log() to debug your JavaScript

  2. Debug in the browser with a breakpoint
    Chrome is by far the most popular browser for the average web developer followed by FireFox, but all the major browsers have a debugging tool.
    debug-js-2.png
    Figure: Old school JavaScript debugging with Chrome Dev Tools is still the best and most versatile tool
  3. Debug in an IDE
    It is often more effort than it is worth to debug JavaScrtipt in your IDE and it is still not very popular. If your app is a Server Side NodeJS JavaScript app then it is very different since this type of JavaScript app does not run in the browser and this is what the IDE is designed for. 
    • Visual Studio Code Chome Debugger - Painful to set up source maps for advanced JavaScript applications that run in memory dev servers like WebPack Dev Server.
    • Visual Studio 2015 - Only works with TypeScript in Internet Explorer
    debug-js-3.png
    Figure: Visual Studio Chrome Debugger with breakpoint set
  4. Time Travel Debugging with Redux
    Using tools like ngrx's store dev tools . You can traverse back and forth between states with excellent UI tools. Debugging through your states is much better than just debugging the current state but also to be able to see the actions triggered to change state.
    debug-js-4.png
    Figure: Example of redux based time travel debugging
  5. Hot Module Reloading
    The problem with the above approaches is every time you make a change to your code you need to reload the website and navigate back to the page and state of that page again and again to repeat your manual test. Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload.
    debug-js-5.png
    Figure: Hot module reloader documentation from WebPack website

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.