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

DevTools의 새로운 기능 (Chrome 60)

Kayce Basques

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

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

참고: 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 감사에 관한 아이디어가 있으신가요? 여기에 게시하세요.

서드 파티 배지

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

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

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

콘솔에서 서드 파티 배지 위로 마우스를 가져갑니다.

그림 3. 콘솔에서 서드 파티 배지 위로 마우스를 가져갑니다.

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

명령어 메뉴를 엽니다.
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 디버깅의 기본사항을 알아보려면 JavaScript 디버깅 시작하기를 참고하세요.

비동기로 전환

조만간 DevTools팀에서 중요한 주제는 비동기 코드 디버깅을 예측 가능하게 하고 비동기 실행의 전체 기록을 제공하는 것입니다.

Continue to Here(여기로 이동)의 새 동작은 비동기 코드에서도 작동합니다. Command (Mac) 또는 Control (Windows, Linux)을 누른 상태에서 DevTools는 점프 가능한 비동기 대상을 녹색으로 강조 표시합니다.

I/O의 DevTools 대담에서 아래 데모에서 예시를 확인하세요.

변경사항

콘솔에서 더 유용한 객체 미리보기

이전에는 Console에서 객체를 로깅하거나 평가할 때 Console에 Object만 표시되었지만, 이는 그다지 유용하지 않았습니다. 이제 콘솔에서 객체의 콘텐츠에 대한 자세한 정보를 확인할 수 있습니다.

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

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

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

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

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

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

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

새로운 컨텍스트 선택 메뉴

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

범위 탭의 실시간 업데이트

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

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

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

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

네트워크 및 성능 패널의 네트워크 제한 메뉴가 간소화되어 오프라인, 인도 등에서 흔히 사용되는 느린 3G 및 미국 등에서 흔히 사용되는 빠른 3G 옵션만 포함할 수 있습니다.

새로운 네트워크 제한 옵션

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

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

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

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

Google I/O '17의 DevTools

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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