8 JavaScript Debugging Tools for 2018 and Beyond

DZone 's Guide to

8 JavaScript Debugging Tools for 2018 and Beyond

In this blog post, we will outline the best tools to help you find, diagnose, and fix problems in your application coded in JavaScript.

· Web Dev Zone ·
Free Resource

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 are a bit unwieldy for anything other than quick debug items.

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 check the value of a variable after you pass it to a method, output the results of an API response or a database query, and many other uses.

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 toolset 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 into 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 the 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 among the best and 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 Dragonfly

Dragonfly is the name of Opera’s built-in developer tools suite. You can open Dragonfly via the shortcut `CTRL`+`SHIFT`+`I` on Windows or Linux, or `CMD`+`OPT`+`I` on macOS. Dragonfly, once a separate project, is a baked-in part of Opera and includes the standard dev tools items. You can use Dragonfly to view JavaScript output, inspect elements and more. Dragonfly is particularly useful for remote debugging on another instance of Opera.

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 shortcut `CTRL` + `SHIFT`+`I`. 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. 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:

How to Create a Debug Configuration for Node.js

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

A non-trivial amount of JavaScript development revolves around sending and receiving JSON requests and responses. Your application may need API requests for many things:

  • Interacting with authentication servers.
  • Fetching calendars or news feeds.
  • Just checking the weather.
  • … and many 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. It also offers a CLI add-on and a Chrome extension. With Postman, you can tweak requests, analyze responses, debug problems. Within the software, you can tailor clean transactions that you can then set up in your application.

Additionally, Postman has a feature entitled “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.

4. 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. Testing the functionality of a small subset of your JavaScript in an isolated environment, without having to set one up 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.

5. JSON Formatter and Validator

It can be incredibly difficult to spot syntax errors or keys which have obviously incorrect values when looking at unformatted JSON. If you have a condensed or “minified” JSON object, missing line returns 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.

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

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

8. Raygun

Tired of spending time digging through logs to find your JavaScript errors? Raygun is the answer and has everything you need, including crash reporting and real user monitoring for JavaScript to find and assess the impact of JavaScript bugs and performance problems.

It’s quick and easy to set up.

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.

Further Reading

Scotch.io: Debugging JavaScipt with Chrome DevTools breakpoints

The best front-end development tools I can’t live without

Originally published at raygun.com.

chrome developer tools, javascript, javascript debugging, web dev, webpack

Published at DZone with permission of Freyja Spaven , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}