리액트 웹에서 새창이 열릴 때 DevTools로 화면 캡처하는 절차

웹 애플리케이션에서 window.open()을 통해 새창을 띄우는 기능은 흔히 사용됩니다. 그러나 크롬 개발자도구(DevTools)에서는 이 새창의 DOM 또는 네트워크 정보를 바로 추적하거나 캡처하는 데 어려움이 있습니다. 특히 새창이 리다이렉트 되거나 비동기 렌더링되는 경우, 새창이 열리는 시점에 맞춰 디버깅을 걸지 않으면 놓치기 쉽습니다.

이 글에서는 React 기반 웹에서 새창이 열릴 때의 화면을 정확하게 캡처하는 방법을 단계별로 정리합니다.

---

1. 부모창에서 리액트 컴포넌트의 클릭 이벤트에 브레이크포인트 걸기

먼저, 새창을 여는 버튼의 클릭 이벤트부터 추적합니다.

1. 크롬 개발자도구(DevTools)를 열고 Components 탭 또는 Elements → Event Listeners → click 경로를 따라 이벤트를 찾습니다.

2. 새창을 여는 버튼의 클릭 핸들러 코드로 진입하여, window.open()이 호출되는 위치에 브레이크포인트를 겁니다.

// 예시 코드
const handleClick = () => {
  const win = window.open('/popup', '_blank');
  win?.focus();
};

브레이크포인트는 window.open() 호출 직전에 거는 것이 가장 효과적입니다.

---

2. 새창이 열리면 자동으로 연결된 DevTools는 닫히므로, 브레이크포인트에서 멈춘 상태 유지

클릭 시점에 브레이크포인트가 걸리면 새창이 열리기 전이라 부모창은 멈춰 있게 됩니다. 이 시점에서 새창의 준비를 할 수 있습니다.

1. window.open() 이후 win.document가 생성되면서 새창이 로드되기 시작하지만, 이때 DevTools가 자동으로 연결되지 않습니다.

2. 수동으로 새창을 활성화한 뒤 F12를 눌러 새창의 개발자도구를 엽니다.

---

3. 새창에서

DOMContentLoaded

리스너를 설정

이제 새창이 열리고 있는 상태에서, DOM이 준비되는 시점에 브레이크포인트를 걸어야 합니다.

1. 새창의 DevTools에서 Sources → Event Listener Breakpoints → Load → DOMContentLoaded 체크박스를 활성화합니다.

2. 이 설정은 새창에서 DOM이 완전히 로드되는 시점에 중단되도록 합니다.

---

4. 부모창에서 resume (▶️) 을 눌러 새창 로딩 진행

이제 부모창으로 돌아가서 Resume script execution (F8)을 눌러 브레이크포인트를 해제합니다.

• 그러면 새창이 실제로 로드되며, 방금 설정한 DOMContentLoaded 브레이크포인트에서 멈추게 됩니다.

• 이 상태에서 DOM 구조나 네트워크 요청, 렌더링 타이밍 등을 분석할 수 있습니다.

---

보너스 팁: 새창에서 네트워크 캡처까지 하고 싶다면?

크롬의 DevTools는 새창에서 네트워크 탭을 자동으로 유지하지 않으므로, 개발용 프록시(예: Charles, Fiddler)를 사용하는 것도 방법입니다. 또는 새창이 띄워지는 시점을 window.open() 대신 a target="_blank" 형태로 바꾸고, 새창 자체를 명시적으로 열 수 있도록 구조를 바꾸는 것도 고려해볼 수 있습니다.

---

정리