Your files stay on your device

CLS layout shift debugger

Paste layout-shift entries recorded on your own page and see CLS per session window, the named shifted elements, and likely causes such as unsized media and late fonts.

Record shifts with the snippet or open a saved DevTools trace, then press Analyse shifts.

Each shift's score is the browser's own impact fraction times distance fraction, so the numbers here are the numbers Chrome recorded, not a re-computation. Session windows follow the Layout Instability spec: a shift joins the running window when it starts less than 1 s after the previous shift and less than 5 s after the window's first shift, and CLS is the largest window sum. Shifts within 500 ms of a click or keypress are excluded, as the metric excludes them. What this tool does not do: it does not watch a live page, it does not see your real visitors' field data, and its likely causes are heuristics over selectors and rect deltas, good for suspect lists, silent on anything a selector cannot say, such as whether an image really lacked width and height.
OptionsAnalyse shifts

More browser tools

- INP interaction profiler (/browser/inp-interaction-profiler)
- Capability dashboard (/browser/capabilities)
- Deep probes (/browser/probes)
All browser tools (/browser)

Was this tool useful?
YesNo

Canonical HTML: https://nutter.tools/browser/cls-layout-shift-debugger
Markdown version: https://nutter.tools/browser/cls-layout-shift-debugger.md
Plain-text version: https://nutter.tools/browser/cls-layout-shift-debugger.txt
Agent index: https://nutter.tools/llms.txt