DevTools의 새로운 기능 (Chrome 60)

Kayce Basques

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

아래에서 출시 노트의 동영상 버전을 확인하거나 자세한 내용을 알아보세요.

새로운 기능

Lighthouse를 기반으로 하는 새로운 감사 패널

이제 감사 패널이 Lighthouse를 기반으로 합니다. Lighthouse는 웹페이지의 품질을 측정하기 위한 포괄적인 테스트 세트를 제공합니다.

상단의 프로그레시브 웹 앱, 성능, 접근성, 권장사항에 표시된 점수는 각 카테고리의 총점입니다. 보고서의 나머지 부분은 점수를 결정한 각 테스트의 세부정보입니다. 실패한 테스트를 수정하여 웹페이지 품질을 개선합니다.

Lighthouse 보고서

그림 1. Lighthouse 보고서

페이지를 감사하려면 다음 단계를 따르세요.

  1. 감사 탭을 클릭합니다.
  2. 감사 실행을 클릭합니다.
  3. 감사 실행을 클릭합니다. Lighthouse는 DevTools를 설정하여 휴대기기를 에뮬레이션하고 페이지에 대해 여러 테스트를 실행한 후 감사 패널에 결과를 표시합니다.

Google I/O '17에서 만난 Lighthouse

아래의 Google I/O 2017 DevTools 강연을 확인하여 DevTools에서 Lighthouse가 통합되는 방식을 자세히 알아보세요.

Lighthouse에 기여하기

Lighthouse는 오픈소스 프로젝트입니다. 작동 방식과 참여 방법을 자세히 알아보려면 아래의 Google I/O 2017에서 진행된 Lighthouse 강연을 확인하세요.

Lighthouse 감사에 대한 아이디어가 있나요? 여기에 게시하세요.

서드 파티 배지

서드 파티 배지를 사용하여 페이지에서 네트워크 요청을 하고, 콘솔에 로깅하고, JavaScript를 실행하는 항목에 관해 자세히 알아보세요.

네트워크 패널에서 서드 파티 배지 위로 마우스를 가져가기

그림 2. 네트워크 패널에서 서드 파티 배지 위로 마우스를 가져가기

Console에서 서드 파티 배지 위로 마우스를 가져가기

그림 3. Console에서 서드 파티 배지 위로 마우스를 가져가기

서드 파티 배지를 사용 설정하려면 다음 단계를 따르세요.

  1. 명령어 메뉴를 엽니다.
  2. Show third party badges 명령어를 실행합니다.

호출 트리 및 하향식 탭의 제품별 그룹화 옵션을 사용하여 활동을 일으킨 서드 파티 항목별로 실적 기록 활동을 그룹화합니다. DevTools로 성능을 분석하는 방법을 알아보려면 런타임 성능 분석 시작하기를 참고하세요.

하단-위로 탭에서 제품별 그룹화

그림 4. 하향식 탭에서 제품별로 그룹화

'여기에서 계속'을 위한 새로운 동작

스크립트의 25번 줄에서 일시중지되어 있고 50번 줄로 이동하려고 한다고 가정해 보겠습니다. 이전에는 50번 줄에 중단점을 설정하거나 해당 줄을 마우스 오른쪽 버튼으로 클릭하고 여기에서 계속을 선택할 수 있었습니다. 이제 이 워크플로를 처리하는 더 빠른 동작이 있습니다.

코드를 단계별로 실행할 때 Command (Mac) 또는 Control (Windows, Linux) 키를 길게 누른 다음 클릭하여 해당 코드 줄로 이동합니다. DevTools에서는 이동 가능한 대상을 파란색으로 강조 표시합니다.

여기에서 계속

그림 5. 여기에서 계속

자바스크립트 디버깅 시작하기를 참고하여 DevTools의 디버깅 기본사항을 알아보세요.

비동기 단계로 이동

가까운 시일 내에 DevTools팀의 주요 테마는 비동기 코드 디버깅을 예측 가능하게 하고 비동기 실행의 전체 기록을 제공하는 것입니다.

여기로 계속하기의 새로운 동작은 비동기 코드에서도 작동합니다. Command (Mac) 또는 Control (Windows, Linux) 키를 길게 누르면 DevTools에서 점프 가능한 비동기 대상을 녹색으로 강조 표시합니다.

예를 보려면 I/O의 DevTools 강연에서 아래 데모를 확인하세요.

변경사항

콘솔에서 더 많은 정보를 제공하는 객체 미리보기

이전에는 콘솔에서 객체를 로깅하거나 평가할 때 콘솔에 Object만 표시되었으며 이는 큰 도움이 되지 않았습니다. 이제 Console에서 객체의 콘텐츠에 관한 자세한 정보를 제공합니다.

콘솔에서 객체를 미리 보는 방법

그림 6. 콘솔에서 객체를 미리 보는 방법

이제 Console에서 객체를 미리 보는 방법

그림 7. 이제 Console에서 객체를 미리 보는 방법

콘솔의 더 유용한 컨텍스트 선택 메뉴

이제 Console의 컨텍스트 선택 메뉴에서 사용 가능한 컨텍스트에 대한 자세한 정보를 확인할 수 있습니다.

  • 제목은 각 항목의 내용을 설명합니다.
  • 제목 아래의 부제목은 항목의 출처 도메인을 설명합니다.
  • iframe 컨텍스트 위로 마우스를 가져가면 뷰포트에서 강조표시됩니다.

새로운 컨텍스트 선택 메뉴

그림 8. 새 컨텍스트 선택 메뉴에서 iframe 위로 마우스를 가져가면 뷰포트에서 강조 표시됩니다.

노출범위 탭의 실시간 업데이트

Chrome 59에서 코드 적용 범위를 기록할 때 적용 범위 탭에는 '기록 중...'만 표시되고 사용 중인 코드를 확인할 수 없었습니다. 이제 범위 탭에 사용 중인 코드가 실시간으로 표시됩니다.

이전 노출 범위 탭을 사용하여 페이지 로드 및 상호작용

그림 9. 이전 노출 범위 탭을 사용하여 페이지 로드 및 상호작용

새 노출 범위 탭을 사용하여 페이지 로드 및 상호작용

그림 10. 새 노출 범위 탭을 사용하여 페이지 로드 및 상호작용

더 간단한 네트워크 제한 옵션

네트워크 및 성능 패널의 네트워크 제한 메뉴가 오프라인, 느린 3G(인도와 같은 지역에서 일반적), 빠른 3G(미국과 같은 지역에서 일반적)의 세 가지 옵션으로 간소화되었습니다.

새로운 네트워크 제한 옵션

그림 11. 새로운 네트워크 제한 옵션

제한 옵션이 다른 커널 수준 제한 도구와 일치하도록 조정되었습니다. 이러한 값이 혼동을 야기했기 때문에 DevTools에서 더 이상 각 옵션 옆에 지연 시간, 다운로드, 업로드 측정항목이 표시되지 않습니다. 목표는 각 옵션의 실제 환경을 일치시키는 것입니다.

기본적으로 비동기 스택 사용 설정

소스 패널에서 비동기 체크박스가 삭제되었습니다. 이제 비동기 스택 트레이스가 기본적으로 사용 설정됩니다. 이전에는 성능 오버헤드로 인해 이 옵션을 선택해야 했습니다. 이제 오버헤드가 최소화되어 기본적으로 이 기능을 사용 설정할 수 있습니다. 비동기 스택 트레이스를 사용 중지하려면 설정에서 사용 중지하거나 명령어 메뉴에서 Do not capture async stack traces 명령어를 실행하면 됩니다.

Google I/O '17에서 만난 DevTools

아래에서 전설적인 Paul Irish의 강연을 확인하여 DevTools팀이 지난 1년 동안 진행한 작업과 가까운 시일 내에 해결할 주요 주제에 대해 자세히 알아보세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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