Dock to side

DevTools is anchored to the page with one attribute, data-⚓️-side. Pick a dock side and the panel swings round; its size comes from the page via data-⚓️-sync-*, the swing from data-⚓️-tween. The script only swaps attribute values.

Dock side before below after

X-ray

Layout that holds on.

This page reflows as DevTools takes its space. The panel never measures anything.

Pins
Edges
Side
Fill
Tween
Glide

<body>
  <article data-⚓️-name="--page">…</article>
  <section class="devtools"
    data-⚓️-to="--page"
    data-⚓️-side=>
</body>

Styles

[data-⚓️-side=""] {
  inset-*: anchor(…);
}
[data-⚓️-sync-height] {
  height: anchor-size(block);
}