DevTools의 새로운 기능 (Chrome 71)

Kayce Basques
Kayce Basques
X GitHub

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

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

실시간 표현식 위로 마우스를 가져가 DOM 노드 강조 표시

실시간 표현식이 DOM 노드로 평가되면 실시간 표현식 결과 위로 마우스를 가져가 뷰포트에서 해당 노드를 강조 표시합니다.

라이브 표현식 결과 위로 마우스를 가져가 뷰포트에서 노드를 강조 표시합니다.

그림 1. 라이브 표현식 결과 위로 마우스를 가져가 뷰포트에서 노드를 강조 표시

DOM 노드를 전역 변수로 저장

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

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

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

또는 DOM 트리에서 노드를 마우스 오른쪽 버튼으로 클릭하고 전역 변수로 저장을 선택합니다.

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

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

이제 HAR 가져오기 및 내보내기에 이니시에이터 및 우선순위 정보가 포함됨

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

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

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

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

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

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

시작자 열입니다.

그림 9. 이니시에이터 열

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

이니시에이터 및 종속 항목 보기

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

_priority 필드는 브라우저가 리소스에 할당한 우선순위 수준을 나타냅니다. 이는 요청 표의 우선순위 열에 매핑되며, 기본적으로 숨겨져 있습니다.

우선순위 열

그림 11. 우선순위 열

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

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

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

기본 메뉴에서 명령어 메뉴 액세스

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

명령어 메뉴

그림 13. 명령 메뉴

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

기본 메뉴에서 명령어 메뉴를 여는 모습

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

PIP 모드 중단점

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

이벤트 리스너 중단점 창에서 enterpictureinpicture, leavepictureinpicture, resize 체크박스를 선택하여 이러한 PIP 이벤트 중 하나가 발생할 때마다 일시중지합니다. DevTools가 핸들러의 첫 번째 줄에서 일시중지됩니다.

이벤트 리스너 중단점 창의 PIP 이벤트

그림 16. 이벤트 리스너 중단점 창의 PIP 이벤트

(보너스 팁) 콘솔에서 monitorEvents()를 실행하여 요소의 이벤트가 발생하는지 확인

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

  1. 노드 참조를 가져옵니다.

    '전역 변수로 저장'을 사용하여 노드를 참조합니다.

    그림 17. 전역 변수로 저장을 사용하여 노드 참조 가져오기

  2. 노드를 monitorEvents()에 첫 번째 인수로 전달합니다.

    node를 monitorEvents()에 전달합니다.

    그림 18. 노드를 monitorEvents()에 전달

  3. 노드와 상호작용합니다. DevTools는 모든 노드의 이벤트를 콘솔에 기록합니다.

    콘솔의 노드 이벤트입니다.

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

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

unmonitorEvents(temp1);

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

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 새로운 기능, 업데이트 또는 DevTools와 관련된 기타 사항을 논의하세요.

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 항목의 목록입니다.