The best JavaScript debugging tools for 2021 and beyond

Improve the quality of your code

‍

If you work with JavaScript, you’ll know that it doesn’t always play nice. Thankfully, due to the plethora of JavaScript debugging tools available, troubleshooting is usually straightforward. This blog post outlines the best tools to help you find, diagnose, and fix problems. Depending on your use-case, some tools might be better than others, but all will save you time in the debugging process.

1. Developer tools in modern web browsers

Every modern browser has tools available within it to debug code. Let’s take a look at some of the basic methods you might use to debug JavaScript using these browser tools, and then highlight each major browser and its dev tools in turn.

Outputting JavaScript debugging messages to the browser
‍One of the easiest ways to debug JavaScript has always been to output data to the browser. Here are the three main ways to do so:

Popping up messages with `alert()`
A tried and true method to debug JavaScript items, `alert()` will create a popup alert when your code meets a particular condition. The problem with alerts is that you end up with a series of popups.  If you need more than one, they become unwieldy rather fast. This makes them more useful for a quick check of a value or to find out if a certain bit of code is executing, but not much more.

Logging lines to console with `console.log()`
Logging to the console is the norm for JavaScript debugging. Adding a `console.log(‘foo’);` line to your code will create a `foo` log entry in the JavaScript console of your respective dev tools set. This can be useful for a variety of reasons. For example, you can verify the value of a variable after you pass it to a method, or output the contents of an API response or results of a database query.

Pausing code execution with the `debugger`
The `debugger;` statement will pause code execution wherever you insert it in the code. The `debugger` statement will function as a breakpoint, pausing code execution. This allows you to investigate with the dev tools while the code is in a paused state.

Chrome developer tools

‍
The Chrome Developer Tools are a quick way to debug your JavaScript code. You can open the Dev Tools to the Console tab by using the following shortcuts:
‍
macOS `CMD`+`OPT`+`I`
Windows `CTRL`+`SHIFT`+`I`

The Chrome Developer Tools are some of the best in the industry, and many developers trust these tools for their day-to-day debugging needs. Chrome Developer Tools include the standard JavaScript console, as well as tools for network and performance monitoring and security features. The majority of JavaScript debugging takes place in the Console and the Network activity tabs.

React developer tools for Chrome

‍
If you work with React as well as with JavaScript, there is an extension available called React Developer Tools. This tool set adds a React tab to your dev tools window. The React tools allow you to inspect the contents of components. You can also view and edit their properties and state. The tools provide insight on the component which created the selected component, as well. If you use Chrome as your main development browser, and develop in React, it is well worth picking up this extension to make your React debugging easier.

Firefox developer tools

‍
Firefox users in the past have relied on Firebug, an extension which gave Firefox users a set of competitive developer tools. The Firefox Developer Tools included in the latest versions of Firefox absorbed the functionality of Firebug. This brings the Firefox browser and its built-in tool suite on par with Google Chrome.

To find the Firefox Developer Tools, take a look in the Tools menu under Web Developer. There, you will find the JavaScript console, and many other useful items.

Safari Develop Menu

‍
Users of Safari have to enable the Safari Develop Menu to gain access to Safari’s built in developer tools.

- Go to the Safari tab and choose Preferences
- Choose Advanced
- Enable the option titled Show Develop menu in menu bar

Once you have followed the above steps, a Develop menu will appear in the toolbar. In the Develop menu, there are options to show the JavaScript Console, a debugger, a network traffic monitor, and an inspector for page elements. The Safari Dev Tools are comparable to the JavaScript debugging tools offered by Chrome. You can see the trend of improvement amongst the developer tools from all browsers, as they grow more capable of meeting the needs of developers.

Opera Chromium dev tools

‍
Previously, Opera’s built in developer tools suite was called Dragonfly. At one point it was a standalone project, then became a baked-in part of Opera, and included the standard dev tools items. It was particularly useful at remotely debugging another instance of Opera. After Opera 12, Opera began shipping with Chromium Dev Tools instead, which are opened and operated similarly to the standard Chrome Dev Tools described above.

Edge Developer Tools

‍
Microsoft Edge is a modern browser that broke away from many of the preconceived negative views of Internet Explorer. As a result, Microsoft Edge includes an excellent dev tools package, which can be accessed via the same shortcut keys as the other options. These tools include a JavaScript console, as well as Network, Performance, and Memory tabs. More information about Edge dev tools can be found in the Microsoft Edge Developer Tools Guide.

2. The hackable debug tool — debugger

The Firefox dev tools team maintains a standalone tool dubbed simply “debugger” that you can use to debug in either Firefox or Chrome, and you can switch between them as necessary to ensure that your application is functioning correctly in both. If you are willing to set this node app up with just a few simple steps, you can use it in lieu of using the in-browser tools in either browser, and get the same exact experience and identical comparison in both. Pretty neat!

3. Node.js Inspector for debugging requests to Node apps

Debugging the Node.js on your application’s backend can be challenging. The following tools take advantage of the capabilities of the Node.js Inspector to assist you:

The Node Debug library for Node Inspector is a library can be included in your projects to assist you in implementing Node Inspector.

‍Node.js V8 Inspector Manager is a Chrome extension which adds Node Inspector tools to the Dev Tools in Chrome

The Visual Studio Code editor allows for easy built-in Node Inspector usage

- Click the Debug tab at the top
- Choose Open Configurations
- If none are set already, choose Node.js to start with
- If you already have settings in the launch.json, you can hit Add Configuration to add the Node.js configuration

For more information on the various parameters and configurations that VS Code can use when debugging Node.js, check out the Node.js debugging documentation.

4. Postman for debugging requests and responses

A non-trivial amount of JavaScript development revolves around sending requests to APIs and receiving responses. These requests and responses are often in JSON format. Your application may need to conduct API requests for innumerable reasons, such as interacting with authentication servers, fetching calendars or news feeds, checking the weather, and countless others.

‍Postman is one of the best JavaScript debugging tools for troubleshooting the requests and responses in your application. Postman offers software for Windows, macOS, and Linux. With Postman, you can tweak requests, analyze responses, debug problems. Within the software, you can tailor clean transactions that you can then duplicate in your application.

Additionally, Postman has a feature called Collections. Collections allow you to save sets of requests and responses for your application or for an API. You save valuable time when collaborating with others or repeating the same testing tasks. When using Postman collections, you update the collection if necessary and then use it. This is much faster than repeatedly writing out every test.

5. ESLint

ESLint is a linter for JavaScript. Linters will analyze code as it is written and identify a variety of basic syntax problems. The use of ESLint will allow you to catch errors, particularly easy to resolve but annoying ones such as missing brackets or typos, before executing the code. ESLint is available as a Node package. It has also been set up as a plugin for many code editors such as Sublime Text 3 and VS Code, which will then mark the offending errors right in your editor window.

6. JS Bin

JS Bin is one of the best JavaScript debugging tools for collaborative debugging of your JavaScript. It allows you to test and debug scripts right along with other people. You can run the JavaScript, see a debug console and the output of the scripts, add libraries and dependencies, and so much more. Pro accounts can also take their code private, as well as other benefits.One of the primary reasons you might consider using a tool like JS Bin is simplicity. In JS Bin, you can test the functionality of a small subset of your JavaScript in an isolated environment, without having to set an entire environment for it. When testing in JS Bin, you can be sure that your results aren’t tainted by conflicting scripts or styles from other parts of your application.Another key feature of JS Bin is the immediate result you get from altering your JavaScript, HTML, or CSS. You can see your changes in real time. You can copy some code to JS Bin and have a working (or not working!) demo in no time. Then you are ready to debug it or share it.

7. JSON Formatter and Validator

It can be incredibly difficult to spot syntax errors or keys which have incorrect values when looking at unformatted JSON. If you have a condensed or minified JSON object, missing line returns, indentations, and spaces, it may be a challenge to read. You need to be able to quickly scan that object and check for errors in formatting or content.To do that, you will expand the object and format it, wasting valuable time. The JSON Formatter & Validator relieves that pain point, so we’ve added it to this list of what I feel are the best JavaScript debugging tools. Postman automatically formats the object and allows you to easily validate both its JSON syntax as well as the actual content. You simply paste your JSON in, and it outputs the correctly formatted version. The tool will even automatically validate syntax to RFC standards, depending on which you select, if any.

8. Webpack

Webpack is a bundling tool used by developers for all manner of sites and applications. If you use Webpack to do your bundling, you have the advantage of the stats data available from the tool.

This data can range from module contents, build logs and errors, relationships that exist between modules, and much more. If you already use Webpack, this is an incredibly useful feature that sometimes gets overlooked. You can even use pre-built tools, such as the Webpack Analyse Web App, to visualize the stats that you generate from Webpack.

9. SessionStack

SessionStack is a monitoring software that provides you with a set of monitoring tools. These tools collect client-side data and assist you in figuring out exactly what your clients are doing on your website. In situations where problems occur, being able to track precisely what happened and how is vital.

This is where SessionStack shines. SessionStack uses a video replay to help developers replicate user issues and error conditions.

Tip: If you use both SessionStack and Raygun, you can attach SessionStack video replays to Raygun reports.

10. Raygun Error Monitoring

Tired of spending time digging through logs to find your JavaScript errors? Raygun Crash Reporting is the answer, and has everything you need to find and assess the impact of JavaScript bugs and performance problems. It's quick and easy to set up:

1. Sign up for a free trial of Raygun
2. Insert the following snippet somewhere in your application’s `<head>` to fetch Raygun’s script asynchronously.</head>

!function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
(a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
 f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
 h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
 e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
 

3. Paste the following lines just before your body tag (replacing the API key with yours, which you can get from your Raygun dashboard:

rg4js('apiKey', 'paste_your_api_key_here');
rg4js('enableCrashReporting', true);

4. At this point, Raygun will begin collecting data and notifying you of issues.

‍

JavaScript debugging can be a challenge, and having the right tools available to you can make or break the debugging process. Every application and use case will be different, but learning about new tools will help you find out what your best options might be. Once you've familiarized yourself with debugging tools, you can brush up on your JavaScript debugging skills with our JavaScript debugging tips guide.

JavaScript debugging is easier when you know where the error is! Raygun helps developers detect, diagnose, and resolve issues with greater speed and accuracy. Take a 14 day free trial today.