browser-devtools

Browser DevTools Testing

When to Use

• E2E 테스트 실패의 근본 원인을 찾을 때
• API 호출이 예상대로 이루어지는지 검증할 때
• Core Web Vitals와 성능 지표를 측정할 때
• 접근성 문제를 런타임에서 확인할 때
• Playwright 테스트 작성 전 동작을 수동으로 탐색할 때

Prerequisites

• 브라우저에서 접근 가능한 실행 중인 앱 (로컬 또는 스테이징)
• Chrome 또는 Edge DevTools 접근 권한
• 테스트하려는 기능 또는 버그 재현 방법 파악

Workflow

1. DOM 상태 검증

// Console에서 실행
// 요소 존재 확인
document.querySelector('[data-testid="submit-button"]') !== null

// 요소 상태 확인
const btn = document.querySelector('button[type="submit"]');
console.log({
  disabled: btn.disabled,
  'aria-label': btn.getAttribute('aria-label'),
  visible: btn.offsetParent !== null
});

// 폼 데이터 확인
new FormData(document.querySelector('form')).entries().next()

2. 네트워크 탭으로 API 검증

확인 항목:

• 요청 URL과 메서드 (GET/POST/PUT)
• 요청 헤더 (Authorization, Content-Type)
• 요청 바디 (정확한 payload 형식)
• 응답 상태 코드와 바디
• CORS 헤더 존재 여부

// fetch를 인터셉트해서 로깅
const originalFetch = window.fetch;
window.fetch = function(...args) {
  console.log('fetch:', args[0], args[1]);
  return originalFetch.apply(this, args);
};

3. Performance 탭 — Core Web Vitals 측정

// CLS 측정 (layout-shift)
new PerformanceObserver((list) => {
  let cls = 0;
  list.getEntries().forEach(entry => { if (!entry.hadRecentInput) cls += entry.value; });
  console.log('CLS:', cls);
}).observe({ entryTypes: ['layout-shift'] });

// LCP 측정
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lcp = entries[entries.length - 1];
  console.log('LCP:', lcp.startTime, 'ms');
}).observe({ entryTypes: ['largest-contentful-paint'] });

// Long Task 측정 (INP 프록시)
new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log('Long task:', entry.duration, 'ms');
  });
}).observe({ entryTypes: ['longtask'] }); // Chrome 지원; 다른 브라우저는 'long-animation-frame' 사용

목표치:

• LCP ≤ 2.5s
• INP ≤ 200ms
• CLS ≤ 0.1

3-A. 재현 가능한 성능 게이트로 굳히기

브라우저 DevTools에서 병목을 찾았으면, 같은 문제를 CI에서도 다시 잡을 수 있게 반복 가능한 측정으로 굳힌다.