DevTools로 기기·환경 에뮬레이션하기

무엇을 어디서 흉내 내나

명령 메뉴는 Command+Shift+P(Mac) / Control+Shift+P(Windows·Linux·ChromeOS)다. 렌더링 탭의 옵션은 명령 메뉴에서 이름(예: emulate)으로 바로 찾아 켤 수도 있다.

기기 모드

기기 모드는 근사치다. 데스크톱 CPU에서 모바일 화면을 흉내 낼 뿐, 모바일 CPU 구조나 실제 브라우저 UI까지 재현하지 못한다. 확실히 해야 할 때는 실기기 원격 디버깅으로 넘어간다.

CPU만 늦추려면 성능 패널의 캡처 설정, 네트워크만 늦추려면 네트워크 패널의 제한 목록을 쓴다(DevTools로 성능·메모리 분석하기, DevTools Network 패널).

맞춤 기기

크기 드롭다운 > 수정, 또는 설정 > 기기에서 목록에 보일 기기를 체크하거나 맞춤 기기 추가로 이름·너비·높이를 넣는다. DPR, 사용자 에이전트 문자열, 기기 유형은 선택 항목이다. 회사 서비스의 주요 타깃 기기를 등록해 두면 매번 수치를 입력하지 않아도 된다.

사용자 에이전트 재정의

네트워크 패널의 더 많은 네트워크 조건 버튼이나 명령 메뉴로 네트워크 상태 패널을 연다.

1. 사용자 에이전트 섹션의 브라우저 기본값 사용을 끈다.
2. 목록에서 고르거나 직접 입력한다. 필요하면 사용자 에이전트 클라이언트 힌트를 펼쳐 브랜드·버전을 고치고 업데이트를 누른다.
3. 페이지를 새로고침한다.

UA를 바꿔도 Chrome의 동작은 그대로다. 서버와 페이지 스크립트가 받는 식별자만 바뀐다. UA 분기로 다른 HTML을 내려 주는 서버나 UA 기반 기능 감지 코드를 시험할 때 쓴다.

센서

자주 쓰는 위치는 설정 > 위치 > 위치 추가로 저장한다. 이름·위도·경도와 함께 시간대 ID(Asia/Seoul 같은 IANA 이름)와 언어(BCP 47, 예: ko-KR)도 넣을 수 있어 시간대·로캘까지 함께 바뀐다.

CSS 미디어 기능과 시각 효과 (렌더링 탭)

같은 탭의 기타 효과:

미디어 기능 자체의 설계는 색과 움직임의 접근성, 반응형 디자인과 다국어 타이포그래피, 반응형 이미지: srcset·sizes와 picture에서 다룬다.

실기기 원격 디버깅 (Android)

연결

1. Android에서 개발자 옵션을 켜고 USB 디버깅을 허용한다.
2. 컴퓨터 Chrome에서 chrome://inspect#devices를 열고 USB 기기 검색을 켠 뒤 USB로 직접 연결한다.
3. 기기에 뜨는 디버깅 허용 프롬프트를 수락하면 모델 이름이 나타난다.
4. 기기 Chrome 탭 옆의 검사를 누르면 그 탭용 DevTools가 열린다. 열리는 DevTools 버전은 기기의 Chrome 버전을 따른다.

• 스크린캐스트를 켜면 기기 화면이 DevTools에 비친다. 클릭은 탭으로, 키 입력은 기기로 간다. Shift+드래그는 핀치다. 스크린캐스트는 프레임 속도를 떨어뜨리므로 스크롤·애니메이션 성능을 잴 때는 끈다.
• 요소 선택 후 기기 화면을 탭하면 Elements에서 그 요소가 선택된다(한 번 쓰면 꺼진다).

adb forward tcp:9222 localabstract:chrome_devtools_remote로 기기의 DevTools 프로토콜(CDP) 소켓을 로컬 포트에 연결하면 http://localhost:9222/json에서 대상 목록을 보고 자동화 도구를 직접 붙일 수 있다.

앱 속 WebView

하이브리드 앱의 WebView도 같은 방식으로 chrome://inspect에 나타난다. 단 앱이 디버깅을 허용해야 한다.

// 디버그 빌드에서만 켠다 (모든 WebView에 적용된다)
if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
    WebView.setWebContentsDebuggingEnabled(true);
}

목록에 안 보이면 이 설정이 켜졌는지, 기기에서 그 WebView 화면을 실제로 열었는지 확인한다.

포트 포워딩: 기기에서 로컬 서버 열기

chrome://inspect#devices의 포트 포워딩에서 기기 포트(예: 5000)와 컴퓨터의 주소(localhost:5000)를 짝지은 뒤 사용을 켠다. 이제 기기 Chrome에서 localhost:5000을 열면 USB를 타고 개발 서버로 간다. 같은 Wi-Fi일 필요도, 방화벽을 열 필요도 없다.

허용 목록 도메인처럼 커스텀 호스트 이름이 필요하면 컴퓨터에서 프록시 서버(Charles 등)를 띄우고 그 포트를 포워딩한 뒤, 기기 Wi-Fi 설정의 프록시를 localhost:<기기 포트>로 지정한다. 끝나면 기기 프록시 설정을 되돌린다.

같은 화면의 네트워크 타겟 검색에 localhost:PORT를 넣으면 --remote-debugging-port=PORT로 띄운 다른 Chrome 인스턴스도 원격으로 검사할 수 있다.

WebAuthn 가상 인증기

패스키·보안 키 로그인을 실제 기기 없이 시험한다.

1. WebAuthn 패널에서 가상 인증자 환경 사용 설정을 켠다.
2. 새 인증자의 프로토콜(ctap2·u2f), 전송(usb·nfc·ble·internal), 상주 키·사용자 확인·대용량 blob 지원 여부를 고르고 추가한다.
3. 페이지에서 등록·인증을 하면 사용자 인증 정보 표에 ID·사용자 핸들·서명 수가 쌓인다. 인증할 때마다 서명 수가 오른다.

활성 인증자는 한 번에 하나다. 인증 정보는 내보내거나 지울 수 있고, 활성 인증자를 지우면 인증이 꺼진다.

미디어·Web Audio 패널

• 미디어 패널: 페이지의 <video>·<audio> 플레이어별 속성·이벤트·메시지 로그·재생과 버퍼 타임라인을 본다. 플레이어 정보는 JSON으로 저장할 수 있고, 원격 디버깅 중인 기기의 플레이어도 볼 수 있다.
• WebAudio 패널: AudioContext의 상태(running·suspended·closed), 샘플링 레이트, 콜백 버퍼 크기, 렌더링 용량(%)을 보여 준다. 오디오가 끊기면 렌더링 용량과 콜백 간격부터 본다.

정리

• 레이아웃·중단점 확인은 기기 모드, 실제 성능·설치·하드웨어는 실기기 원격 디버깅으로 나눈다.
• 접근성 미디어 기능(다크 모드, 모션 감소, 대비, 강제 색상)과 인쇄는 렌더링 탭에서 OS 설정을 바꾸지 않고 확인한다.
• 위치·시간대·UA를 바꿔 지역·환경별 분기를 시험하되, UA 재정의는 식별자만 바꾼다는 점을 기억한다.
• 기기에서 로컬 개발 서버를 열 때는 포트 포워딩이 가장 간단하다.

관련 노트: 반응형 디자인과 다국어 타이포그래피, 색과 움직임의 접근성, 웹 접근성, 모바일 앱 프레임워크 비교, React Native 실무 팁, DevTools Application 패널: 저장소·서비스 워커, DevTools로 성능·메모리 분석하기