Script debugging is one of the most powerful and complex productivity features in a web developer’s toolbox. The update of Firefox DevTools for Firefox 67 allows developers to benefit from more speed and reliability in their debugging process and thus improve their performance. According to the explanations of the Firefox DevTools team, the new features in DevTools revolve around four essential points including a loading time that is now faster, a redesigned support for source map, a reduction in overhead when the debugger is not not targeted and fixes to fix some issues related to lost breakpoints, bad script pauses and many more.
The debugger opening time is now 30% faster than in previous versions. The Firefox DevTools team said they eliminated the worst performance that made the debugger slow to open, which after performance testing found that the debugger is now 30% faster. Next, the team reported that a redesigned and faster source map back-source gives the illusion that you are debugging your code, not the compiled output of Babel, Webpack, TypeScript, vue.js, etc.
Note that a source map is a file thanks to which the debugger can make the link between the code executed and the original source files, thus allowing the browser to reconstruct the original source and display it in the Debugger. The generation of correct map sources can be difficult, the team explained that they have developed tools (Babel, Vue.js, etc.) for the benefit of the entire ecosystem. Thanks to faster source map support (and other additional work), previews are now displayed much faster when you hover over a variable while execution is paused.
On the other hand, by combining map sources with the Babel analyzer, the Firefox debugger can now preview the original variables that interest you and hide unnecessary information from compilers and bundles. It can even work in the console, automatically resolving user-friendly identifiers into their real names and detailed in the background. Due to its performance, you must activate this feature separately by checking the “Map” box in the “Scopes” panel of the debugger.
Likewise, explained the Firefox DevTools team, Web developers today use the modern Web and must be able to take advantage of top-notch concepts in DevTools. Using the new Threads panel, you can switch between different execution contexts and suspend them independently. This allows scripts to be debugged in the same Debugger panel, in the same way as other modern browsers.
All that said, some believe that the Firefox web development tool is still lagging behind that of Chrome. According to them, they still lack certain features in Firefox DevTools that we observe in Chrome DevTools such as debugging web sockets. “Correct me if I’m wrong, but I believe that web socket debugging is not supported by Firefox DevTools. I ran into this during one of my works. Chrome shows me which requests are sent over websockets, but Firefox doesn’t, “said one.
Chrome DevTools, remember, is a set of web development tools directly integrated into the Google Chrome browser. Chrome DevTools can help you edit pages on the fly and quickly diagnose problems, which ultimately helps you build better websites, faster.