DevTools의 새로운 기능 (Chrome 71)

Kayce Basques

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

이 페이지의 동영상 버전을 보거나 계속 읽어 보시기 바랍니다.

Live Expression 위로 마우스를 가져가 DOM 노드를 강조표시합니다.

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

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

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

DOM 노드를 전역 변수로 저장

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

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

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

또는 DOM Tree에서 노드를 마우스 오른쪽 버튼으로 클릭하고 Store as global variable(전역 변수로 저장)을 선택합니다.

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

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

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

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

네트워크 요청을 HAR 파일로 내보냅니다.

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

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

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

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

시작자 열입니다.

그림 9. initiator 열

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

시작자 및 종속 항목 보기

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

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

우선순위 열

그림 11. 우선순위 열

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

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

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

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

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

명령어 메뉴

그림 13. 명령어 메뉴

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

기본 메뉴에서 명령어 메뉴를 엽니다.

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

PIP 모드 중단점

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

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

Event Listener Breakpoints 창의 PIP 이벤트

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

(보너스 도움말) 콘솔에서 monitorEvents()를 실행하여 요소의 이벤트가 실행되는 것을 확인합니다.

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

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

    '전역 변수로 저장'을 사용하여 노드에 대한 참조를 가져옵니다.

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

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

    노드를 monitorEvents()에 전달합니다.

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

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

    Console의 노드 이벤트

    그림 19. Console의 노드 이벤트

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

unmonitorEvents(temp1);

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

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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