New feature in DevTools: Cross-browser edition

Quick summary ↬ Learn about the new features of developer tools in Firefox, Edge, Chrome, and Safari. Discover new and powerful features that will help make testing and debugging across browsers easier and more efficient.

Browser development tools are constantly evolving, adding new and improved features. It’s hard to keep track, especially when you’re using multiple browsers. Having said all that, using features we already know and not keeping up with new ones can be overwhelming.

It’s a shame, though, because some of them can make us more productive.

So my goal in this article is to raise awareness about some of the latest features in Chrome, Microsoft Edge, Firefox, and Safari. Hopefully it will make you want to give it a try, and may help you become more comfortable the next time you need to debug browser-specific problems.

Speaking of which, let’s jump right in.

Chrome Developer Tools

The Chrome DevTools team has been working hard to modernize their (now 13 years old) code base. They’ve been busy improving build systems, migrating to TypeScript, introducing new WebComponents, rebuilding their theme infrastructure, and more. As a result, these tools are now easier to extend and change.

But in addition to this less user-oriented work, the team released a number of features. Let me review some CSS debugging here.

Scroll to capture#

CSS scroll capture gives Web developers a way to control where scrollable containers stop scrolling. This is a useful feature, for example, if you want the browser to automatically place each photo neatly for you in a long list of photos in its scrollable container.

If you want to learn more about scrolling capture, you can read this MDN documentation and see Adam Argyle’s demo here.

The key attributes of scroll capture are:

  • scroll-snap-type, which tells the browser where the capture happened and how it happened;
  • scroll-snap-align, which tells the browser where to capture.

Chrome DevTools introduces new features to help debug these key attributes:

  • If an element is used with defined scroll alignmentscroll-snap-type, the Elements panel displays a tag next to it.

The scroll capture flag is used to quickly find the element that defines the scroll capture. (Large preview)

  • You can click the rolling snapshot badge to enable the new overlay. When you do this, several items are highlighted on the page:
    • Rolling the container,
    • Items that scroll through the container,
    • Where items are aligned (marked with blue dots).

This overlay makes it easy to see if and how things stuck in place after scrolling. This can be useful, for example, when your project has no background and the boundaries between them are hard to see.

Highlight the items that belong to the scrollcapture container. (Large preview)

While scroll capture is not a new CSS feature, adoption rates are fairly low (less than 4% according to ChromeStatus.com), and because the specification has changed, not every browser supports it in the same way.

I hope this DevTools feature will make people want to use it more and eventually use it on their websites.

Container query#

If you’ve done any kind of Web development in recent years, you’ve probably heard of container queries. It has long been one of the most popular CSS features and has been a very complex problem for browser makers and specification writers to solve.

If you don’t know what Container Queries are, I recommend reading Stephanie Eckles’ Primer On CSS Container Queries article.

In short, they are a way for developers to define the layout and style of elements based on the container size. This ability is a huge advantage when creating reusable components, because we can adapt them to where they are used (and not just to the viewport size suitable for media queries).

Fortunately, the space is changing, Chromium now supports container queries, and the Chrome DevTools team has started adding tools to make them easier to use.

Container queries are not enabled in Chromium by default (to enable them, visit Chrome ://flags and search for “container queries”) and may take a while to enable. Additionally, DevTools is still in the early stages of debugging them. But some early features have arrived.

  • Select from DevTools@containerElements in the style of at-rule, this rule appears in the Styles sidebar of the Elements panel. This is similar to how media query styles are rendered in DevTools, and you can see directly where a particular style comes from.

When matching container queries in the Styles pane, you can easily see when CSS rules are applied. (Large preview)

As shown in the figure above, the style sidebar shows two rules that apply to the current element. The.media at the bottom always applies to the element and provides its default style. The top one is nested in an @container (max-width:300px) container query and only works if the container is smaller than 300px.

  • And most importantly, right here@containerAbove the AT rule, the Styles pane shows links to the element that the rule parses to, and hovering over it shows additional information about its size. This way you can know exactly why the container query matches.

Hover over the container query to see why and where it matches.

The Chrome DevTools team is actively working on this feature, and you can expect more in the future.

Chromium joint#

Let’s talk about Chromium before we talk about what other browsers have. Chromium is an open source project on which Chrome, Edge, Brave and other browsers are built. That means all of these browsers have access to Chromium features.

The two most active contributors to this project are Google and Microsoft, and in the case of DevTools, they’ve collaborated on some interesting features that I’d like to introduce now.

CSS layout debugging tool#

A few years ago, Firefox innovated in this area and introduced the first grid and Flexbox checkers ever. Chromium-based browsers now make it easy for Web developers to debug grids and Flexbox, too.

This collaborative project involves engineers, product managers, and designers from Microsoft and Google working toward a common goal (learn more about the project itself in my BlinkOn talk).

Among other things, DevTools now has the following layout debugging capabilities:

  • Highlight multiple grid and Flex layouts on the page, and customize whether you want to view grid line names or numbers, grid areas, and so on.

Highlight grid lines and elastic items. (Large preview)

  • Flex and grid editors make it intuitive to use various properties.

Intuitively use the various Flex alignment properties. (A larger preview)

  • Align ICONS in CSS autocomplete make it easier to select properties and values.

Use the new icon to easily see how a given CSS property value will affect the layout. (Large preview)

  • Highlight the property hover to see which parts of the page the property applies to.

Highlight the various CSS properties independently to see how they affect the layout. (A larger preview)

You can read more about this on the Microsoft and Google documentation sites.

localization#

This is another collaboration involving Microsoft and Google, and all Chromium-based DevTools can now be translated into languages other than English.

Initially, there were no plans to localize DevTools, which meant it was a huge effort. It involves traversing the entire code base and making the UI strings locatable.

If English is not your first language and you feel more comfortable using DevTools in a different language, go to Settings (F1) and find the language drop-down menu.

Here’s a screen shot of what it looks like in Chrome DevTools:

Change the language in the Settings panel of Chrome DevTools. (Large preview)

Here’s what Edge looks like in Japanese:

What the DevTools UI looks like in Japanese localization. (Large preview)

Edge Developer Tools

Microsoft turned to Chromium to develop Edge more than two years ago. Although it generated a lot of discussion in the online community at the time, not many articles or reviews have been written about it since then. Still, the people who work on Edge (including its DevTools) have been busy, and the browser now has a lot of unique features.

The Chromium-based open source project does mean that Edge benefits from all its features and bug fixes. In fact, the Edge team ingested the changes made in the Chromium repository into their own repository.

But over the past year or so, the team has begun building Edge-specific features based on the needs and feedback of Edge users. Edge DevTools now has a number of unique features that I’ll cover in detail.

Open, close, and move tools#

With nearly 30 different panels, DevTools is a very complex piece of software in any browser. However, you never need to access all of them at the same time. In fact, only a few panels are visible when DevTools is first started, and you can add more panels later.

On the other hand, it’s hard to find panels that aren’t displayed by default, even if they’re really useful to you.

Edge adds three small but powerful features to solve this problem:

  • The Close button on the TAB closes tools that you no longer need,
  • a+The (plus) button opens any tools at the end of the TAB bar,
  • Context menu options for moving tools.

The GIF below shows how to complete the close and open tools in the main area and drawer area in Edge.

Easily open the tools you need and close the ones you don’t. (A larger preview)

You can also move tools between the main area and the drawer area:

  • Right-click on the top TAB to display the move to bottom item, and
  • Right-click on a TAB in the drawer to display the move to top item.

Move tools between the main top area and the bottom drawer area. (A larger preview)

Use DEVTOOLS tooltips for context help#

DevTools is difficult for beginners and experienced developers alike to fully understand. As I mentioned earlier, there are too many panels for you to know all of them.

To solve this problem, Edge adds a way to go directly from tools to documents on Microsoft websites.

This new tooltip function can be used as a swappable overlay layer for overwriting tools. When enabled, panels are highlighted and provide contextual help for each panel, as well as links to documents.

You can launch tooltips in three different ways:

  • By using Ctrl+ Shift+H keyboard shortcut on Windows/Linux (Cmd+ Shift+H on Mac);
  • Enter the main (.) menu, then go to help, then select “Switch DevTools tooltips”;
  • By using the command menu and typing Tooltips.

Displays contextual help for the tool. (A larger preview)

Custom colors#

In a code editing environment, developers like to customize their color themes to make code easier to read and pleasing to the eye. Since Web developers also spend a lot of time with DevTools, it makes sense that it also has customizable colors.

Edge has just added some new themes to DevTools, on top of the existing dark and light themes. A total of nine new themes were added. These are from VS Code and will be familiar to anyone who uses the editor.

You can select the theme you want to use by going to Settings (using F1 or the gear icon in the upper right corner), or by using the command menu and typing.

Customize DevTools with one of the nine VS Code topics. (A larger preview)

Firefox Developer Tools

Similar to the Chrome DevTools team, the Firefox DevTools folks have been busy with extensive architectural updates aimed at modernizing their codebase. In addition, Mozilla has had to refocus recently, so their team has recently become smaller. But while that meant they had less time to add new features, they still managed to release some very interesting features, which I’ll cover now.

Debug unwanted scrollbars#

Have you ever asked yourself, “Where did this scrollbar come from?” I know I do, and Firefox now has a tool to debug this problem.

In Inspector, all scrolling elements have a badge next to Scroll, which is already useful when dealing with deeply nested DOM trees. Most importantly, you can click this tag to display the element (or elements) that caused the scrollbar to appear.

Find the element that causes an unwanted overflow by clicking the scroll mark. (Large preview)

You can find more documentation on it here.

Visualize TAB key order#

Using a keyboard to navigate a web page requires using the TAB key to navigate through the focusable elements one by one. The order in which focatable elements get focus when used Tabs are an important aspect of site accessibility, and the wrong order can confuse users. This is especially important because modern layout CSS technology allows Web developers to rearrange elements on a page very easily.

Firefox has a useful Accessibility Inspector panel that provides information about Accessibility trees, automatically finds and reports Accessibility problems, and lets you simulate different color vision defects.

In addition to these features, the panel now provides a new page overlay that shows the Tab key order of focusable elements.

To enable it, use the Show jump order check box in the toolbar.

Highlight all focatable elements and see the order in which they will be focused. (Large preview)

You can find more documentation on it here.

New performance tools#

Few areas of Web development rely on tools as much as performance tuning. Chrome DevTools has one of the best performance panels of its kind in this area.

Over the past few years, Firefox engineers have focused on improving the performance of the browser itself, and to help them do so, they built a performance analyzer tool. The tool was originally built to optimize the engine’s native code, but has also supported analyzing JavaScript performance since its inception.

Today, this new performance tool replaces the old Firefox DevTools performance panel in pre-release editions (Nightly and Developer editions). Try it every chance you get.

The new Firefox Profiler lets you drill down to discover the source of performance problems. (Large preview)

In addition, the new Firefox profiler supports sharing configuration files with others so that they can help you improve the performance of logging use cases.

You can read the documentation about it here and learn more about the project in their GitHub repository.

Safari Web checker#

Last but not least, let’s review some recent Safari features.

Apple’s small team has been busy making extensive improvements and fixes around the tools. Learn more about Safari Web Inspector to help you be more productive when debugging your website on iOS or tvOS devices. In addition, it has a lot of other features that DevTools doesn’t have and that many people don’t know about.

CSS Grid debugging#

With Firefox, Chrome, and Edge (and all chromium-based browsers) having dedicated tools for visualizing and debugging CSS grids, Safari is the last major browser that doesn’t have this feature. Well, now we can!

Basically, Safari now has the same functionality as DevTools in other browsers in this respect. This is great, because it means you can easily switch from one browser to the next and still be productive.

  • Grid tags are displayed in the Elements panel to quickly find the grid.
  • Click the badge to switch the visual overlay on the page.
  • A new layout panel is now displayed in the sidebar. It allows you to configure grid overlays, view a list of all grids on the page and switch overlays for them.

Highlight grid lines, grid gaps, grid regions, show row numbers, row names, and track sizes in the new Safari Grid Inspector. (Large preview)

The interesting thing about Safari implementations is that they really capture the performance aspects of the tool. You can enable many different overlay layers at once and scroll across the page without causing any performance problems.

Another interesting thing is that Safari has introduced a 3-paned element panel, just like Firefox, which allows you to view the DOM, CSS rules for selected elements, and layout panels all at once.

Learn more about CSS Grid Inspector in this WebKit blog post.

Numerous debugger improvements#

Safari used to have a separate resource and debugger panel. They combine them into a single Sources panel, which makes it easier to find everything you need when debugging your code. Plus, it makes the tool more consistent with Chromium, which a lot of people are used to.

In a cross-browser world, consistency is important for common tasks. Web developers already need to test across multiple browsers, so if they need to learn a whole new paradigm when using DevTools in other browsers, it can make things harder than they need to.

New Unified Source panel. (Large preview)

But Safari has also recently focused on adding innovative features to its debugger that DevTools doesn’t have.

Bootstrap Scripts: Safari allows you to write JavaScript code that is guaranteed to run first before any scripts on the page. This is useful for detecting built-in functions for adding debugger statements or logging, for example.

Safari’s boot script allows you to run code to override built-in objects and apis before the page loads. (Large preview)

New breakpoint configuration: All browsers support multiple types of breakpoints, such as conditional breakpoints, DOM breakpoints, event breakpoints, and so on.

Safari has recently improved their entire suite of breakpoint types, providing them with a way to configure them extensively. With this new breakpoint feature, you can decide:

  • If you want breakpoints to actually fire only under certain conditions,
  • If you want a breakpoint to stop execution entirely, or just execute some code,
  • Audio beeps even play so that you know some lines of code have been executed.

Configure breakpoints exactly as you want. (Large preview)

QueryInstances and queryHolders console functions: These are useful when your site is starting to use a lot of JavaScript objects. In some cases, it can become difficult to trace the dependencies between these objects, and memory leaks can start to occur.

Safari does have a memory tool that helps solve these problems by letting you explore a snapshot of the memory heap. But sometimes you already know which class or object is causing the problem, and you want to find out what instances or references to it exist.

If Animal is a JavaScript class in your application, queryInstances(Animal) returns an array of all instances of it.

If Foo is an object in your application, queryHolders(foo) will return an array foo of all other referenced objects.

The end of the thinking#

I hope you find these features useful. I can only recommend using multiple browsers and being familiar with their DevTools. Being more familiar with other DevTools can be useful when you have to debug problems in a browser you don’t use very often.

Keep in mind that companies that make browsers have teams actively working on DevTools. They work to make them better, less error-prone and more powerful. These teams rely on your feedback to build the right thing. It’s hard for them to make good decisions about what to build without knowing what problems you’re facing or what features you’re missing.

Reporting bugs to the DevTools team will not only help you when fixes occur, but may also help many other people facing the same problem.

It’s worth noting that DevTools teams at Microsoft, Mozilla, Apple, and Google are usually fairly small and receive a lot of feedback, so reporting a problem doesn’t mean it will be fixed quickly, but it does help, and these teams listen to their users.

You can report errors, ask questions, or request features in the following ways:

  • Firefox Developer Tools
    • Firefox uses Bugzilla as their public error tracker and welcomes anyone to report errors or request new features by creating a new entry there. All you need is a GitHub account to log in.
    • You can get in touch with the team on Twitter using the @FirefoxDevTools account or by logging into Mozilla Chat (find the chat documentation here).
  • Safari Web checker
    • Safari also uses public error tracing for their WebKit errors. This is documentation on how to search for errors and report new errors.
    • You can also connect with the team on Twitter via @webKit.
    • Finally, you can use the feedback assistant to signal errors about Safari and Safari Web Inspector.
  • Edge Developer Tools
    • The easiest way to report a problem or request a feature is to use the feedback button in DevTools (the bar diagram in the upper right corner of the tool).
    • Ask your team questions on Twitter most effectively by mentioning the @edgeDevTools account.
  • Chrome Developer Tools
    • The team listens to feedback on the DevTools-dev mailing list and on Twitter at @ChromeDevTools.
  • Chromium
    • Because Chromium is an open source project that supports Google Chrome and Microsoft Edge (among others), you can also report problems on the Chromium bug tracker.

Thank you for reading!