3 min read

Last week, the Firefox DevTools Debugger team shared the recent updates in Firefox DevTools to make debugging of modern apps more consistent. They have also worked on making the debugger more predictable and capable of understanding common tools in web development like webpack, Babel, and TypeScript.

These updates are ready for trying out in Firefox 67, which is planned to be released tomorrow (May 21). The team also shared that Firefox 68 will come with a more “polished” version of these features.

Today, every browser comes with a powerful suite of developer tools that allows you to easily inspect and debug your web applications. These tools enable you to do a bunch of things like inspecting currently-loaded JavaScript, editing pages on-the-fly, quickly diagnosing problems, and more. The Firefox team has introduced many improvements and updates to these tools and here are some of the highlights:

Revamped source map support

Source maps provide a way to keep your client-side code readable and debuggable even after combining and minifying it. The new debugger comes with revamped support for source maps that now “perfects the illusion that you’re debugging your code, not the compiled output from Babel, Webpack, TypeScript, vue.js, etc.” To help developers generate correct source maps, the team and the community has contributed patches to build tools like Babel, a JavaScript compiler and configurable transpiler.

Predictable breakpoints for effortless pausing and stepping

This improved debugger architecture solves several issues that developers were commonly facing like lost breakpoints, pausing in the wrong script, or stepping through pretty-printed code. Now, they will also be able to easily debug minified scripts, arrow functions, and chained method calls with the help of inline breakpoints.

Console debugging with logpoints

Developers often resort to console logging (using console.log statements for printing messages to the console) when they want to quickly observe their program’s flow without having to pause the execution. However, this way of debugging can become quite tedious. This is why starting from Firefox 67, developers will have a new breakpoint called ‘logpoint’ that dynamically injects ‘console.log()’ statements into your running application.

Better debugging for JavaScript Workers

A web worker is a script that runs in the background without having any effect on the main execution thread of a web application. It takes care of all the laborious processing allowing the main thread to run without being slowed down. Firefox will now come with an updated Threads panel through which you will be able to switch between contexts and also independently pause different execution contexts. This will allow workers and their scripts to be debugged within the same Debugger panel.

These were some of the highlights from the long list of updates and improvements. Check out the official announcement by Mozilla to know more in detail.

Read Next

Mozilla developers have built BugBug which uses machine learning to triage Firefox bugs

Mozilla adds protection against fingerprinting and Cryptomining scripts in Firefox Nightly and Beta

Mozilla is exploring ways to reduce notification permission prompt spam in Firefox

Bhagyashree R