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.
Faster and reliable JS Debugging in Firefox 67, informed by your feedback 📣.
🏎 FASTER: opening, source mapping, stepping, preview
📦 ROCK-SOLID: TypeScript, Babel, Webpack, React, Vue.js …
🚲 EASIER: Logpoints, Inline BPs …
Have you tried it out?https://t.co/ls7m3O4pOV
— Firefox DevTools (@FirefoxDevTools) May 16, 2019
Revamped source map support
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.
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.