Explore the position-area visual editor in Chrome DevTools

Which element should I select?

The Elements panel shows the DOM tree next to the CSS for the selected element. Follow Chrome's basic inspection guide to inspect an element and open Styles. Then open the editor from the indicator beside a position-area declaration on that element.

Can't see the editor? Check the selected element and its applied declaration first. Then look at the browser version and feature support. The update groups changes from Chrome 155 and 156, so it doesn't tell you which version first had this individual feature.

What can I change in the grid?

The official update says the editor lets you select regions of the anchor grid. It can configure both axes together or separately, and it can toggle the self keyword. And when a text value is hard to picture, the visual editor helps you compare placement choices.

1. Inspect the element whose placement you want to examine.
2. Find its position-area declaration in Elements > Styles.
3. Click the indicator next to the declaration and choose a grid region.
4. Review the result on the page, then apply the value you need to the project source.

These steps combine Chrome's CSS inspection guide with its update announcement. The interface and labels can differ by browser version and language.

Can I inspect the anchor connection?

The same update also covers inspecting implicit anchors from a popover adorner. If an element has several implicit anchors, right-click its popover adorner in the DOM tree and pick the anchor you want to inspect. An anchor positioning overlay can show areas including margins and borders.

Keep DevTools changes and edits to the saved project separate. Once you choose a placement, apply it to the source. Then check the layout at other viewport sizes and in other browsers.