[discussion] Tooling interop to help with discovery, documentation and adoption of features

[captainbrosset]

You can find more thoughts around this on my blog: https://patrickbrosset.com/articles/2022-05-10-DevTools-interop/

I believe DevTools should somehow be part of efforts like Interop 2022 or/and future similar endeavors.

Today, DevTools teams have their own priorities, and there's not much concerted efforts to create similar tooling across browsers.

Projects like interop 2022 aim at filling gaps in the web platform, and providing a more consistent experience to its users. I argue that, while implementing the features in all browsers is obviously the most important thing to do, it's also half the story.
For a great developer experience, we need docs, announcements, playgrounds, etc. but also discovery and debugging tools.

I would love it if DevTools was part of compat/interop projects (or if a separate project was created just for this), so that DevTools contributors could get together as a group and agree on high-level product UI descriptions for how to debug a number of web features such as the ones identified in the Interop 2022 project.

Having a somewhat consistent feature set across browser DevTools for these important features means:

• It's easier for developers to discover these features.
• It's easier for developers to use these features.
• Contextual documentation can be provided.

I don't think it's necessary to specify these debugging features. But agreeing on their existence and basic "jobs to be done" would be a great start.

CSS Grid and CSS Cascade layers have been huge successes because they not only shipped in all browsers at the same time, and got awesome documentation/articles, but they also got similar tooling in Firefox, Chrome, Safari, Edge (in the case of cascade layers, all at the same time). When things work this way, everyone wins.

There are 15 areas of focus in Interop 2022, almost all of them have to do with CSS, which is an ideal technology for DevTools to help with because of the real-time nature of its debugging loop. DevTools can provide contextual help on CSS features, help adoption with user-friendly wysiwyg-style playful UIs, and surface layout engine information when needed.

As an example, color-contrast could use some DevTools support to show which color won and what the contrast for each was.