CODEWITHSUNDEEP
google-chromegoogle-chrome-devtoolschromium
Tyler V.
Tyler V.

Reputation: 2561

What practical use is Isolation Mode in Chrome DevTools?

Right click on most any element inside the Elements tab of Chrome DevTools, and you'll find the option to Enter Isolation Mode. It visually hides all other content on the page, (though it seems that changes to CSS or DOM can still affect the page layout.)

What is the purpose of this? I understand adding it to allow Selenium or similar tools to target their reporting. But why do human users need this? How can it be used to help debugging?

Upvotes: 9

Views: 1914

Answers (1)

Ezekiel Victor
Ezekiel Victor

Reputation: 3876

Without any additional context, one could surmise that isolation mode allows for focused development against a particular element and its descendants—reducing visual distractions from other temporarily irrelevant surrounding areas, perhaps hiding code relating to those areas, etc. Similar tooling exists, for example, in features for several mind mapping apps, wherein one can hide all other branches and nodes of a working diagram except for the one intending to be "focused on" for the given session.

But in this case it's a bit more than just an aid for focused dev, more than just superficial adjustments meant for the more easily distracted among us. This feature is part of a feature suite to aid development with CSS Container Queries. From the Isolation mode v1 section of the official doc DevTools: Container Queries tooling:

The isolation mode gives developers more focus on a container and its contained offspring. This includes:

  • Special overlay to highlight the container on the inspected page
  • Blur/mask the non-container area to bring more focus to the container
  • A “focus mode” in the DOM tree (this would be a standalone feature implemented in parallel)
  • See this container’s size query breakpoints and toggle between them, as in the current device toolbar’s Media Queries option

Upvotes: 3

Related Questions