We’ll be covering some of the tactics and DevTools javascript developers use for debugging their applications, not only in their very predictable development environment but also in production when their code comes to life and things may go sideways. Besides, what better way of deeply understanding a language or framework if not by looking at its inner workings?

Debug with Chrome DevTools

Whether you’re on Angular, React, or Vue, these frameworks usually come with their set of specific DevTools, but the best debugging tool is already shipped with your browser. The good old inspector will boost your productivity when it comes to debugging JavaScript, tweaking DOM and CSS, inspecting network activity, analyzing performance, tracking down memory leaks, and much more. Check the more easy steps at http://tudonoticia.org/tag/debug-javascript-google-chrome-dev-tools-7-easy-steps.

Console

The Console serves two objectives at least: the display of your application’s logs plus runtime errors and the ability to execute custom JS code. Developers may be logging messages using console.log() to inspect the value of some variable or simply ensure their code is executing in the right order. Warnings and the majority of runtime errors get also printed here.

Network Panel

This is where your entire application’s network activity will be logged. All resources, whether downloaded or uploaded, are available for inspection in the Network panel. These resources are listed chronologically with information such as HTTP response code, loading time, initiator, state, and size. The footer contains a summary of the total number of requests and the size of all resources.

JS Debugger

This is by far the most powerful tool available in DevTools, and you can find it under the Sources tab. This is a faster and cleaner alternative to using console.log() when looking for bugs. It allows for a quick inspection of the piece of code being executed and the values of all variables at that moment in time. The execution comes to a halt as soon as it reaches the breakpoint. And you can set many of them at the same time. From there you can deep dive into your code using the different options at hand:

Local Overrides

Who doesn’t hate losing chances whenever you hit that reload button? Local Overrides were made to overcome this. Specify a directory in Sources Overrides and let DevTools save your changes. It works in most situations.

Loading Speed

The Audits tab is where you can look for bottlenecks hurting your page’s loading speed. Open your application in incognito mode as some browser plugins may interfere with the auditing workflow. Start with an audit as it creates a baseline to measure your changes against, but also gives you some actionable tips on how to improve. The available options let you run different categories of audits: SEO, accessibility, or performance-oriented. It also helps simulate how your application behaves on a mobile device.