이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 71)

Kayce Basques

Chrome 71에서 Chrome DevTools의 새로운 기능과 주요 변경사항은 다음과 같습니다.

실시간 표현 위로 마우스를 가져가 DOM 노드 강조표시
DOM 노드를 전역 변수로 저장
이제 HAR 가져오기 및 내보내기에 개시자 및 우선순위 정보 포함
기본 메뉴에서 명령어 메뉴에 액세스하기
PIP 모드 중단점
(보너스 팁) 콘솔에서 MonitorEvents()를 실행하여 요소의 이벤트 실행 감시하기

이 페이지를 계속 읽거나 동영상 버전을 시청하세요.

라이브 표현식 위로 마우스를 가져가면 DOM 노드가 강조 표시됩니다.

Live Expression이 DOM 노드로 평가될 때 Live Expression 결과 위로 마우스를 가져가면 표시 영역에서 해당 노드가 강조 표시됩니다.

Live Expression 결과 위로 마우스를 가져가면 표시 영역의 노드가 강조 표시됩니다.

그림 1. 표시 영역의 노드를 강조표시하기 위해 Live Expression 결과 위로 마우스를 가져갑니다.

DOM 노드를 전역 변수로 저장

DOM 노드를 전역 변수로 저장하려면 콘솔에서 노드로 평가되는 표현식을 실행하고 결과를 마우스 오른쪽 버튼으로 클릭한 다음 전역 변수로 저장을 선택합니다.

콘솔에 전역 변수로 저장합니다.

그림 2. 콘솔에 전역 변수로 저장

또는 DOM Tree의 노드를 마우스 오른쪽 버튼으로 클릭하고 Store as 전역 변수를 선택합니다.

DOM 트리에 전역 변수로 저장합니다.

그림 3. DOM 트리에 전역 변수로 저장

이제 HAR 가져오기 및 내보내기의 개시자 및 우선순위 정보

동료와 함께 네트워크 로그를 진단하려면 네트워크 요청을 HAR 파일로 내보내면 됩니다.

네트워크 요청을 HAR 파일로 내보내기

그림 8. 네트워크 요청을 HAR 파일로 내보내기

파일을 네트워크 패널로 다시 가져오려면 파일을 드래그 앤 드롭하면 됩니다.

이제 HAR 파일을 내보낼 때 DevTools가 HAR 파일에 개시자 및 우선순위 정보를 포함합니다. HAR 파일을 DevTools로 다시 가져오면 Initiator 및 Priority 열이 채워집니다.

_initiator 필드는 리소스 요청 원인에 관한 추가 컨텍스트를 제공합니다. 이는 요청 테이블의 Initiator 열에 매핑됩니다.

개시자 열.

그림 9. 개시자 열

Shift 키를 누른 상태에서 요청 위로 마우스를 가져가서 시작자와 종속 항목을 볼 수도 있습니다.

시작자 및 종속 항목 보기

그림 10. 시작자 및 종속 항목 보기

_priority 필드에는 브라우저가 리소스에 할당한 우선순위 수준이 표시됩니다. 이는 기본적으로 숨겨져 있는 요청 테이블의 우선순위 열에 매핑됩니다.

우선순위 열

그림 11. 우선순위 열

Request 표의 헤더를 마우스 오른쪽 버튼으로 클릭하고 Priority를 선택하여 Priority 열을 표시합니다.

우선순위 열을 표시하는 방법

그림 12. 우선순위 열을 표시하는 방법

참고: HAR 사양에 맞춤 필드는 밑줄로 시작해야 한다고 명시되어 있으므로 _initiator 및 _priority 필드는 밑줄로 시작합니다.

명령어 메뉴를 사용하면 DevTools 패널, 탭, 기능에 빠르게 액세스할 수 있습니다.

그림 13. Command 메뉴

이제 주 메뉴에서 명령어 메뉴를 열 수 있습니다. 기본 메뉴 버튼을 클릭하고 명령어 실행을 선택합니다.

그림 14. 주 메뉴에서 명령어 메뉴 열기

PIP 모드 중단점

PIP 모드는 페이지에서 데스크톱 위에 플로팅 동영상 창을 만들 수 있는 새로운 실험용 API입니다.

이벤트 리스너 중단점 창에서 enterpictureinpicture, leavepictureinpicture, resize 체크박스를 사용 설정하면 이러한 PIP 모드 이벤트가 실행될 때마다 일시중지할 수 있습니다. DevTools가 핸들러의 첫 번째 줄에서 일시 중지합니다.

Event Listener Breakpoints 창에 있는 PIP 이벤트.

그림 16. Event Listener Breakpoints 창의 PIP 이벤트

(보너스 팁) 콘솔에서 MonitorEvents()를 실행하여 요소의 이벤트 실행 감시

포커스를 두고 R, E, D를 누른 후 버튼 주위에 빨간색 테두리를 추가하려고 하지만 리스너를 추가할 이벤트를 모른다고 가정해 보겠습니다. monitorEvents()를 사용하여 요소의 모든 이벤트를 콘솔에 로깅합니다.

노드에 대한 참조를 가져옵니다.

그림 17. 전역 변수로 저장을 사용하여 노드에 대한 참조 가져오기
노드를 첫 번째 인수로 monitorEvents()에 전달합니다.

그림 18. monitorEvents()에 노드 전달
노드와 상호작용합니다. DevTools가 노드의 모든 이벤트를 콘솔에 기록합니다.

그림 19. 콘솔의 노드 이벤트

unmonitorEvents()를 호출하여 콘솔에 이벤트 로깅을 중지합니다.

unmonitorEvents(temp1);

특정 이벤트 또는 이벤트 유형만 모니터링하려면 배열을 monitorEvents()에 두 번째 인수로 전달합니다.

monitorEvents(temp1, ['mouse', 'focus']);

mouse 유형은 DevTools에 mousedown 및 click와 같은 모든 마우스 관련 이벤트를 로깅하도록 지시합니다. 지원되는 다른 유형은 key, touch, control입니다.

콘솔에서 호출할 수 있는 다른 편리한 함수는 명령줄 참조를 확인하세요.

미리보기 채널 다운로드

Chrome Canary, 개발자 또는 베타를 기본 개발 브라우저로 사용하는 것이 좋습니다. 이러한 Preview 채널을 통해 개발자는 최신 DevTools 기능에 액세스하고 최첨단 웹 플랫폼 API를 테스트하며 다른 사용자보다 먼저 사이트에서 문제를 찾을 수 있습니다.

Chrome DevTools팀에 문의하기

게시물에서 새로운 기능과 변경사항 또는 DevTools와 관련된 다른 항목에 대해 논의하려면 다음 옵션을 사용하세요.

crbug.com을 통해 제안 또는 의견을 제출하세요.
DevTools에서 옵션 더보기 > 도움말 > DevTools 문제 신고를 사용하여 DevTools 문제를 신고합니다.
@ChromeDevTools로 트윗을 보냅니다.
DevTools의 새로운 기능 YouTube 동영상 또는 DevTools 팁 YouTube 동영상에 댓글을 남겨주세요.