DevTools의 새로운 기능 (Chrome 71)

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

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

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

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

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

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

DOM 노드를 전역 변수로 저장

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

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

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

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

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

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

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

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

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

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

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

이제 HAR 파일을 내보낼 때 DevTools에서 HAR에 개시자 및 우선순위 정보를 포함합니다. 파일에서 참조됩니다. HAR 파일을 DevTools로 다시 가져오면 InitiatorPriority 열이 표시됩니다

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

개시자 열

그림 9. 개시자 열

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

시작자 및 종속 항목 보기

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

_priority 필드는 브라우저가 리소스에 할당한 우선순위 수준을 명시합니다. 매핑 대상 우선순위 열을 찾습니다. 이 열은 기본적으로 숨겨져 있습니다.

우선순위 열

그림 11. 우선순위 열

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

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

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

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

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

명령어 메뉴

그림 13. 명령어 메뉴

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

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

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

PIP 모드 중단점

PIP 모드는 페이지에서 플로팅 동영상을 만들 수 있는 새로운 실험용 API입니다. 표시됩니다.

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

Event Listener Breakpoints 창의 PIP 이벤트

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

(보너스 팁) 콘솔에서 monitoringEvents()를 실행하여 요소의 이벤트 실행을 확인하세요.

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

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

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

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

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

    MonitorEvents()에 노드 전달

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

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

    콘솔의 노드 이벤트

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

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

unmonitorEvents(temp1);

특정 이벤트만 모니터링하려면 배열을 두 번째 인수로 monitorEvents()에 전달하세요. 지정할 수 있습니다.

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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