DevTools field-data grounding

DevTools 실사용 데이터 대조

DevTools compares a local trace with field measurements from real users.

···
html
<div class="atlas"><div class="head"><b>DEVTOOLS · lab vs field</b><span class="pulse"></span></div><div class="stage"><div class="fd-row"><b>local trace</b><div class="fd-track"><i id="fd-local"></i></div></div><div class="fd-row"><b>field p75</b><div class="fd-track"><i id="fd-field"></i></div></div><div class="fd-alert" id="fd-alert">sample: compare environments</div></div></div>
css
.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.fd-row{height:32%;display:flex;align-items:center;gap:8px}.fd-row b{width:64px;font-size:12px}.fd-track{flex:1;height:20px;border-radius:5px;background:var(--line);overflow:hidden}.fd-track i{display:block;height:100%;background:var(--accent);transition:width .5s}.fd-row+ .fd-row i{background:var(--accent-2)}.fd-alert{margin-top:6px;padding:7px;border:1px solid var(--line);border-radius:6px;text-align:center;color:var(--accent);font-size:12px}.fd-alert.warn{border-color:var(--accent-2)}
js
let gap=false;function tick(){gap=!gap;document.getElementById('fd-local').style.width='36%';document.getElementById('fd-field').style.width=gap?'76%':'42%';document.getElementById('fd-alert').classList.toggle('warn',gap);document.getElementById('fd-alert').textContent=gap?'field slower → inspect real devices':'sample: compare environments'}tick();setInterval(tick,2200)

A trace on a fast development laptop may differ from real mobile experience. With field data enabled, Chrome DevTools compares local metrics with CrUX 75th-percentile values and flags a mismatch.

The demo shows a longer field bar triggering an alert. Use the field data to calibrate device and network conditions rather than guessing throttling settings.

When to use

Use it to choose realistic reproduction conditions when local tests look fast but field metrics do not.

Open as page ↗