UX/UI Radar Číst česky
New tools

Chrome DevTools gets a position-area editor, APCA in the color picker and CSS for agents

Chrome DevTools adds a visual editor for position-area, APCA contrast suggestions in the color picker and a get_css_styles tool for agents. Useful for debugging tooltips, popovers and dark UIs.

If you debug a finished interface in the browser, DevTools is still the fastest way to see what is really rendered. The Chrome team's November roundup (the post is dated 20 Oct 2026; it says the updates arrive in November after Chrome 155 and 156 shipped to stable) adds several things designers will like.

What is new

  • Visual position-area editor: in the Styles tab, click the swatch next to the declaration to select anchor grid regions. Set both axes at once or separately and toggle the self keyword.
  • Anchor positioning aids: right-click a popover adorner in the DOM tree to see implicit anchors; the viewport overlay shows the margin, padding, border and content boxes of anchor-positioned elements.
  • Custom properties with three or more dashes: ---theme-color can now be inspected and edited.
  • Color picker: APCA contrast suggestions appear for light text on dark backgrounds, and out-of-gamut colors convert to oklab() and oklch() without NaN values.
  • DevTools for agents: the get_css_styles tool reports computed and matched styles, including inherited rules, pseudo-elements, @keyframes, @position-try, @property and @function rules, paginated. A new main menu item, Get Chrome DevTools for agents, opens setup instructions.
  • Device Mode: scale and auto-zoom preferences are saved per emulated device.

The web.dev "New to the web platform in October" post adds that Chrome 155 introduced margin-trim and Chrome 156 added random(). Verify support in your target browsers before shipping.

Why it matters

Anchor positioning replaces JavaScript for tooltips, menus and popovers, but position-area values are hard to remember. A visual editor shortens the path from idea to result and helps in handoff: show a developer the exact region you picked. APCA suggestions help on dark UIs; for legal compliance the WCAG ratio still applies, so treat APCA as a complement. And the agent tools fit the trend of agents reading real page state instead of screenshots.

How to start

  1. Update Chrome to a version that has the feature (per the post, Chrome 155 or later).
  2. Open a page with a popover, click the position-area swatch in Styles and try another region.
  3. Test light text on a dark background in the color picker and compare the APCA suggestion.
  4. If you use an agent, open Get Chrome DevTools for agents and follow the setup.

Sources