Debugging Articles
-
Future-proofing Firefox’s JavaScript Debugger Implementation
Optimizing the integration of Firefox Developer Tools with the SpiderMonkey JavaScript engine has resulted in many benefits, including the new asynchronous call stack tracking now available in Firefox Developer Edition. In this post you can learn how that was done, down to detailed changes to memory management.
-
Debugging Variables With Watchpoints in Firefox 72
Have you ever wanted to know where properties on objects are read or set in your code, without having to manually add breakpoints or log statements? Watchpoints are a type of breakpoint that provide an answer to that question. They are new in the updated Debugger, available now in the Firefox 72 Developer Edition release.
-
Quickly Alter Typography with Firefox Font Editor
Have you ever landed on a web page and wondered what fonts are being used? Have you asked yourself where those fonts come from or why a particular font isn't loading? The font editor in Firefox provides answers and insights, and gives you the ability to make font changes directly, with a live preview.
-
Debugging WebAssembly Outside of the Browser
WebAssembly has begun to establish itself outside of the browser via dedicated runtimes like Mozilla’s Wasmtime and Fastly’s Lucet. While the promise of a new, universal format for programs is appealing, it also comes with new challenges. At Mozilla, we’ve been prototyping ways to enable source-level debugging of .wasm files using existing tools, like GDB and LLDB.
-
Debugging Modern Web Applications
The Firefox Dev Tools team released an upgrade to the debugger’s source map support. It lets you inspect the code that you actually wrote. Combined with the ongoing work to provide first-class JS framework support across all Firefox devtools, these advances boost productivity for web app developers working in frameworks like React, Angular, and Ember and with modern tools like Webpack, Babel, and PostCSS.
-
Go beyond console.log with the Firefox Debugger
console.log is no debugger. It’s great for figuring out what your JavaScript app is up to, but it’s limited to spitting out a minimal amount of information. If your code is complex, you’ll need a proper debugger. That’s why we’ve added a new section to the Firefox Devtools Playground that’s all about debugging, with four basic lessons that use the Firefox Debugger to examine and repair a simple JavaScript to-do app.
-
Saying Goodbye to Firebug
The most popular and powerful web development tool. Firebug has been a phenomenal success. Over its 12-year lifespan, the open source tool developed a near cult following among web developers. When it came out in 2005, Firebug was the first tool to let programmers inspect, edit, and debug code right in the Firefox browser.
-
Inspect, Modify, and Debug React and Redux in Firefox with Add-ons
React, along with Redux, is one of the fastest and most flexible UI frameworks on the web. It’s easy to write, easy to use and is great for teams. However, it's not easy to debug them in the browser. Now, browser add-ons like React Developer Tools, Redux DevTools, and Vue let you inspect, modify, and debug your code right in the browser.
-
Hacking & Contributing to Servo On Windows
Like many cross-platform open source projects, Servo, the high-performance browser engine project written in Rust, has always been a bit of a nightmare to build and run on Windows. Luckily, thanks to the Rust team and Servo community, most of the issues have been squashed and we can now launch it with nothing more than […]
-
Introducing debugger.html
debugger.html is a modern JavaScript debugger from Mozilla, built as a web application with React and Redux. This project was started early this year in an effort to replace the current debugger within the Firefox Developer Tools. Also, we wanted to make a debugger capable of debugging multiple targets and functioning in a standalone mode. […]
