---
title: Chrome DevTools gets a position-area editor, APCA in the color picker and CSS for agents
date: 2026-11-15
edition: 2026-11-15
rubric: New tools
perex: 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.
topics: [web-css, kvalita-ui, ai-agenti]
---

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

- [New in DevTools – November 2026](https://developer.chrome.com/blog/new-in-devtools-november-2026/)
- [New to the web platform in October](https://web.dev/blog/web-platform-10-2026)