DevTools의 새로운 기능 (Chrome 60)

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

• 프로그레시브 웹 앱, 성능, 접근성, 권장사항 테스트를 포함하는 새 감사 패널
• 서드 파티 배지 네트워크 요청을 하고, 콘솔에 로깅하고, JavaScript를 실행하는 서드 파티를 확인합니다.
• 여기까지 계속을 선택합니다. JavaScript 디버깅 워크플로의 속도를 높일 수 있는 새로운 동작
• 비동기 JavaScript의 예측 가능한 디버깅
• 콘솔의 객체 미리보기
• 커버리지 탭의 실시간 업데이트
• 콘솔에서 컨텍스트를 선택하는 새로운 메뉴
• 간소화된 네트워크 조절 옵션
• 기본적으로 비동기 스택 트레이스가 사용 설정됨

아래에서 출시 노트의 동영상 버전을 확인하거나 계속 읽고 자세히 알아보세요.

새로운 기능

Lighthouse 기반의 새로운 감사 패널

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

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

그림 1. Lighthouse 보고서

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

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

Google I/O '17의 Lighthouse

아래의 Google I/O '17 DevTools 강연을 확인하여 DevTools의 Lighthouse 통합에 대해 자세히 알아보세요.

Lighthouse에 참여

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

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

서드 파티 배지

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

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

그림 3. 콘솔에서 서드 파티 배지 위로 마우스를 가져가는 모습

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

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

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

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

여기까지 계속하기를 위한 새로운 동작

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

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

그림 5. 여기까지 계속

DevTools에서 디버깅의 기본사항을 알아보려면 JavaScript 디버깅 시작하기를 참고하세요.

비동기로 단계 실행

향후 DevTools팀의 주요 테마는 비동기 코드 디버깅을 예측 가능하게 만들고 비동기 실행의 전체 기록을 제공하는 것입니다.

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

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

변경사항

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

이전에는 콘솔에서 객체를 로깅하거나 평가할 때 콘솔에 Object만 표시되어 별로 유용하지 않았습니다. 이제 콘솔에서 객체의 콘텐츠에 관한 자세한 정보를 제공합니다.

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

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

콘솔의 정보 제공 컨텍스트 선택 메뉴

이제 콘솔의 컨텍스트 선택 메뉴에서 사용 가능한 컨텍스트에 관한 자세한 정보를 제공합니다.

• 제목은 각 항목을 설명합니다.
• 제목 아래의 부제목은 항목이 제공된 도메인을 설명합니다.
• iframe 컨텍스트 위로 마우스를 가져가면 표시 영역에서 강조 표시됩니다.

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

커버리지 탭의 실시간 업데이트

Chrome 59에서 코드 커버리지를 기록할 때 커버리지 탭에 사용된 코드가 표시되지 않고 '기록 중...'만 표시되었습니다. 이제 커버리지 탭에 사용 중인 코드가 실시간으로 표시됩니다.

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

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

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

네트워크 및 성능 패널의 네트워크 제한 메뉴가 간소화되어 오프라인, 인도와 같은 지역에서 흔히 사용되는 느린 3G, 미국과 같은 지역에서 흔히 사용되는 빠른 3G의 세 가지 옵션만 포함됩니다.

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

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

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

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

Google I/O '17의 DevTools

아래의 신화적인 폴 아이리시의 강연을 확인하여 지난 한 해 동안 DevTools팀이 작업한 내용과 가까운 장래에 해결할 큰 주제에 대해 자세히 알아보세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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