이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 60)

Kayce Basques

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

새로운 감사 패널: 프로그레시브 웹 앱, 성능, 접근성, 권장사항 테스트가 포함됩니다.
서드 파티 배지. 네트워크 요청을 하고, 콘솔에 로깅하고, 자바스크립트를 실행하는 서드 파티를 찾습니다.
여기로 이동 JavaScript 디버깅 워크플로의 속도를 높일 수 있는 새로운 동작입니다.
비동기 자바스크립트의 예측 가능한 디버깅.
Console의 객체 미리보기
범위 탭의 실시간 업데이트.
콘솔에서 컨텍스트를 선택하기 위한 새로운 메뉴.
더 간단한 네트워크 제한 옵션.
비동기 스택 트레이스는 기본적으로 사용 설정됨.

참고: chrome://version에서 실행 중인 Chrome 버전을 확인할 수 있습니다. Chrome은 약 6주마다 새로운 메이저 버전으로 자동 업데이트됩니다.

아래 출시 노트의 동영상 버전을 확인하거나 계속 읽어보세요.

새로운 기능

Lighthouse에서 제공하는 새로운 감사 패널입니다.

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

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

Lighthouse 보고서

그림 1. Lighthouse 보고서

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

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

Google I/O '17의 Lighthouse

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

Lighthouse에 참여하기

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

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

서드 파티 배지

서드 파티 배지를 사용하여 페이지에서 네트워크 요청을 하고, 콘솔에 로깅하고, 자바스크립트를 실행하는 항목에 관한 유용한 정보를 더 많이 얻을 수 있습니다.

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

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

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

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

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

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

Call Tree 및 Bottom-Up 탭에서 Group by product 옵션을 사용하여 성능 기록 활동을 활동의 원인이 된 서드 파티 항목별로 그룹화합니다. 런타임 성능 분석 시작하기를 참조하여 DevTools로 성능을 분석하는 방법을 알아보세요.

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

그림 4. Bottom-Up 탭에서 제품별로 그룹화

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

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

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

여기로 이동

그림 5. 여기로 이동

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

비동기화

조만간 DevTools 팀이 해야 할 중요한 주제는 비동기 코드 디버깅을 예측할 수 있도록 하고 비동기 실행의 전체 기록을 제공하는 것입니다.

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

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

변경사항

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

이전에는 Console에서 객체를 로깅하거나 평가하면 Console에 Object만 표시되었는데 이 기능은 별로 유용하지 않습니다. 이제 Console에서 객체의 콘텐츠에 관한 추가 정보를 제공합니다.

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

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

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

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

Console에서 더 많은 정보를 제공하는 컨텍스트 선택 메뉴

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

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

새로운 컨텍스트 선택 메뉴

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

적용 범위 탭의 실시간 업데이트

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

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

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

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

네트워크 및 성능 패널의 네트워크 제한 메뉴는 세 가지 옵션만 포함하도록 간소화되었습니다. 오프라인, 느린 3G(인도 등), 그리고 빠른 3G(미국 등에서 일반적으로 사용됨)입니다.

새로운 네트워크 제한 옵션

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

제한 옵션이 다른 커널 수준 제한 도구와 일치하도록 조정되었습니다. 지연 시간, 다운로드, 업로드 측정항목은 오해의 소지가 있으므로 DevTools에서 각 옵션 옆에 더 이상 표시하지 않습니다. 목표는 각 옵션의 실제 경험에 일치되도록 하는 것입니다.

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

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

Google I/O '17의 DevTools

아래에서 전설적인 폴 아이리시의 강연을 통해 DevTools 팀이 지난 한 해 동안 작업한 내용과 가까운 미래에 다루게 될 큰 주제에 대해 자세히 알아보세요.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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