Sunday 15 Nov 2026

New tools

• Chrome DevTools: position-area editor, APCA in the color picker and CSS for agents – Anchor positioning can be set by clicking grid regions, the color picker shows APCA contrast suggestions and agents read real styles through get_css_styles. Useful for tooltips, popovers and dark UIs. The post is dated 20 Oct; the features arrive in November. source

Tool-stack and workflow ideas

• Give your agent DevTools instead of screenshots – Change: when debugging UI in code, connect Chrome DevTools for agents. Benefit: the agent reads real computed styles and rules instead of guessing from a screenshot, so it finds sooner why a component differs from the design. First step: open Get Chrome DevTools for agents in DevTools, connect it to your agent and ask it to explain the styles of one button. Based on the trend of agents reading real tool state (Figma MCP, Framer via MCP, DevTools). source

Try it today

• A tooltip via the position-area editor (~15 min) – Try anchor positioning without typing values from memory. 1. Open any page with a popover or tooltip built on CSS anchor positioning (or make a simple <button> with popover and position-anchor). 2. In DevTools, Styles tab, click the swatch next to position-area and pick a different grid region. 3. In the color picker check light text on a dark background against the APCA suggestion. Result: a tooltip placed by the chosen region and a checked contrast. source