Our friendly DevTools teams at Mozilla, Google, Microsoft, and Apple have once again been hard at work. And in this article, I’ll attempt to summarize the most impactful new features that are now available in browser developer tools.
So much has happened over these past few months that I may have missed a few things, but hopefully, you’ll find something that helps you in this article. There should be a little bit for everyone, whatever your level of experience with web development is, and whatever browser you use.
So, without further ado, let’s jump right in.
Note: Because Edge is based on Chromium, the open-source browser engine that also powers Chrome, all of the Chrome features listed below are also available in Edge (unless otherwise noted).
We’ve got a lot of long-awaited and profoundly impacting new features in CSS lately.
To name just a few:
But, although these features are amazing, shipping support for them in browsers is only part of the story. For people to comfortably use them, documentation and tooling are necessary too.
We’re in luck because both Container Queries and CSS Cascade Layers have associated DevTools features now.
Specifically, Container Queries are supported in Safari WebInspector and Chrome DevTools where information about the corresponding @container at-rules is displayed when viewing CSS in the Styles sidebar.
Here is an example in Safari WebInspector:
Chrome, Safari, and Firefox DevTools also now have support for CSS Cascade layers in their Elements (or Inspector) tools. The layer to which a particular rule belongs is now displayed next to that rule:
hwb() is now supported in all major browsers, and Chrome (and Chromium-based browsers), as well as Firefox, both have support for it in DevTools. That means they will show hwb in the autocomplete list when editing CSS in the Styles (or Rules) sidebar and will show the same color swatch used for other color formats too.
Next, it has also become easier to edit CSS in the Styles sidebar and get meaningful autocompletion results across browsers.
Chrome now previews all CSS variable values when autocompleting the var() function, not just colors, and it also displays @supports and @scope at-rules.
Safari now uses fuzzy matching when auto-completing CSS, making it much faster to type property names and values.
Firefox continued to improve this feature over time and recently added more coverage for use cases such as warning when border-image-* is used on elements within a table with border-collapse or warning when width or height are used on ruby elements.
Over the past few years, browser DevTools has gotten fantastic layout debugging tools to inspect, understand, and tweak grid and flex layouts. More recently, Safari has been adding more features in this area as well.
You can now use CSS alignment controls in the Styles sidebar and inspect Flexbox layouts too.
Let’s change gears a bit and talk about JavaScript debugging.
Hiding scripts makes it easier to debug your code. It avoids ending up in foreign-looking library code when stepping through your own logic.
Recently, Firefox shipped a new feature that builds on top of this. You can now ignore pieces of code within a file. If you have a function that keeps getting called all the time but isn’t interesting for what you’re trying to debug, you can simply ignore that one function now.
Over in Chrome (and Chromium), a whole lot of small and not-so-small JavaScript debugging improvements were made:
The Page source tree was improved, and there’s now a way to group sources by authored (to show the original source files, thanks to source maps) or deployed (to show the actual files on the server).
It is now also possible to live edit the code of a function while debugging. If you’re paused at a breakpoint inside a function and want to test a quick fix, you can edit the code right there and save the file. The function will be restarted with the new code.
Next, stack traces for asynchronous operations are now reported entirely, showing you the full story of what happened before your current breakpoint, even if those things happened asynchronously.
Stack traces now also automatically ignore known third-party scripts, making it much easier to debug your own code.
Web performance is probably an area where we depend on tools even more than in other areas. You can’t really guess what’s running slow or eating too much memory until you profile your webpage. Fortunately, we keep on getting new options to investigate performance and memory problems, making our lives easier.
In fact, Chrome shipped an entirely new panel dedicated just to this!
Note: This panel is available in Chrome only and not in other Chromium-based browsers.
Think of the Performance Insights panel as a simpler version of the (sometimes scary) Performance panel:
Edge has also been busy shipping new features in this area.
In the Performance tool, source maps can now be used to display original function names, even when sharing recorded profiles with other people:
And now, the final changes have been made, and the old Firefox DevTools’ Performance panel has fully been replaced with the new one:
Debugging your frontend code is important, but sometimes problems can happen in the network layer of your app when communicating with your server. Thankfully, a few very useful features were recently added to the Network tools in various browsers.
In Edge, a new column was added to the Network log. The Fulfilled by column makes it easier to debug your service worker logic and Progressive Web Apps.
You can now discover straight away whether a request was handled by the service worker, the browser cache, or your server.
Firefox just shipped a completely redesigned version of its Edit and Resend feature. This feature has been available in Firefox for a long time already and is a great way to debug your server-side APIs or just test something quickly.
With it, you can right-click on any HTTP request displayed in the Network tool, select Edit and Resend, then manipulate the request parameters, headers, and body, and finally send the modified request.
Firefox completely redesigned it recently. It’s now much easier to edit the parameters before sending a new request.
And finally, Safari has added quite a few great features in this area too. You can now block network requests entirely, and you can also locally override requests by using regular expressions.
This year, the team continued to work on the extension and added more features. In particular, the following things are now possible:
Here are some of the new features that got added to the panel in recent months:
Phew, that was a lot! But we’re not done. Let’s wrap this up with a list of somewhat random but very useful features.
Next, you can now pick colors from anywhere on your screen when changing colors in the Styles sidebar.
Edge shipped a feature to publish and retrieve production source maps from Azure, making it much easier to securely debug your code in production even when you don’t want to publish source maps and original source code to your server.
Finally, they shipped a redesigned Welcome tool where you can find all sorts of useful videos and links to documentation.
The team also made it possible to disable and re-enable any event listener for a given element in the Inspector.
Finally, Edge just shipped a cool new experimental feature that enables one to type commands and access common browser and DevTools features from one keyboard shortcut.
And that’s it for today. I hope you found a few things that will be useful for your web development projects.
And with this, thanks for reading, and if you have great DevTools tips you want to share with everyone, please drop us a comment!
