The majority of JavaScript debugging takes place in the Console and the Network activity tabs. Chrome Developer Tools include the standard JavaScript console, as well as tools for network and performance monitoring and security features. 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. ‍ The Chrome Developer Tools are a quick way to debug your JavaScript code. This allows you to investigate with the dev tools while the code is in a paused state. The `debugger` statement will function as a breakpoint, pausing code execution. Pausing code execution with the `debugger` The `debugger ` statement will pause code execution wherever you insert it in the code. 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. This can be useful for a variety of reasons. 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. Logging lines to console with `console.log()` Logging to the console is the norm for JavaScript debugging. 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. If you need more than one, they become unwieldy rather fast. The problem with alerts is that you end up with a series of popups. 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. Outputting JavaScript debugging messages to the browser ‍One of the easiest ways to debug JavaScript has always been to output data to the browser.

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. Developer tools in modern web browsersĮvery modern browser has tools available within it to debug code. Depending on your use-case, some tools might be better than others, but all will save you time in the debugging process. This blog post outlines the best tools to help you find, diagnose, and fix problems.

Thankfully, due to the plethora of JavaScript debugging tools available, troubleshooting is usually straightforward. If you work with JavaScript, you’ll know that it doesn’t always play nice.

Download debugging tools for windows 7