팝업/새탭 에서 개발자 도구(DevTools) 자동으로 열기 설정
웹 개발 중 window.open() 또는 링크 클릭 등으로 팝업 창이 열릴 때, 해당 팝업에서 Chrome 개발자 도구(DevTools)가 자동으로 열리지 않아 디버깅이 어려운 경우가 많습니다. 특히 클릭 이벤트 후 열리는 새 창에서 네트워크 요청이나 콘솔 오류를 바로 확인하려면, DevTools가 함께 떠야 빠르게 문제를 파악할 수 있습니다.
이 글에서는 팝업 창이 열릴 때 DevTools가 자동으로 따라 열리게 설정하는 방법을 단계별로 소개합니다.
사용 환경
브라우저: Google Chrome (최신 버전 권장)
OS: macOS, Windows 모두 가능
1. Chrome DevTools 열기
먼저 팝업을 띄우는 원래 창에서 Chrome의 개발자 도구를 엽니다.
macOS: Cmd + Option + I
Windows: Ctrl + Shift + I
2. Command Menu 실행
DevTools 상단에서 명령어를 실행하기 위해 Command Menu를 열어야 합니다.
macOS: Cmd + Shift + P
Windows: Ctrl + Shift + P
상단에 검색창이 열립니다.
3. Auto-open DevTools for popups 검색
검색창에 아래 명령어를 입력합니다.
Auto-open DevTools for popups
이 명령은 새 창(팝업)이 열릴 때마다 자동으로 개발자 도구를 함께 실행하게 설정합니다.
4. 명령어 활성화
Auto-open DevTools for popups 항목이 보이면 클릭하여 활성화합니다.
활성화되면 앞에 ✅ 표시가 붙습니다.
다시 비활성화하고 싶다면 같은 명령어를 한 번 더 실행하여 끌 수 있습니다.
5. 팝업 다시 열기
이제부터 window.open() 등으로 팝업이 열릴 때, 해당 창에서도 자동으로 DevTools가 함께 열립니다.
팝업 창의 콘솔 로그, 네트워크 요청, Elements 구조 등 모든 정보를 바로 확인할 수 있으므로 디버깅이 훨씬 수월해집니다.
참고 사항
이 설정은 한 번만 해두면 이후에도 유지됩니다.
만약 DevTools가 자동으로 열리지 않는다면 브라우저의 팝업 차단 기능이 원인일 수 있습니다. 이 경우 [설정 > 개인정보 및 보안 > 사이트 설정 > 팝업 및 리디렉션]에서 허용 도메인에 현재 사이트를 추가해 주세요.
팝업 디버깅이 잦은 웹앱 개발자라면 꼭 활성화해두면 유용한 설정입니다. 자주 쓰는 옵션인 만큼, 명령어 이름을 기억해 두면 필요할 때 빠르게 적용할 수 있습니다.