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 대담을 확인하여 Lighthouse의 통합에 대해 자세히 알아보세요. 찾을 수 있습니다.

Lighthouse에 참여하기

Lighthouse는 오픈소스 프로젝트입니다. 이 도구의 작동 방식과 아래에서 Google I/O '17의 Lighthouse 강연을 확인해 보세요.

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

서드 파티 배지

서드 파티 배지를 사용하여 네트워크에서 네트워크를 요청하는 법인에 대해 설정하고, 콘솔에 로그인하고, JavaScript를 실행하는 것입니다.

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

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

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

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

Call Tree 및 Bottom-Up 탭에서 Group by product 옵션을 사용하여 실적을 그룹화합니다. 활동을 유발한 제3자 기관의 활동 기록 시작하기 Analyzing Runtime Performance를 참고하여 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 대담에서 아래 데모에서 예시를 확인하세요.

변경사항

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

이전에는 콘솔에서 객체를 로깅하거나 평가할 때 콘솔에만 Object는 별로 유용하지 않습니다. 이제 콘솔에서는 객체를 정의합니다.

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

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

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

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

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

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

범위 탭의 실시간 업데이트

Chrome 59에서 코드 적용 범위를 기록할 때 범위 탭에 '녹화 중...'만 표시됩니다. 어떤 코드가 사용되었는지에 대한 가시성이 없을 수 있습니다. 이제 범위 탭에서 식별할 수 있습니다

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

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

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

Network 및 Performance 패널의 네트워크 제한 메뉴가 세 가지 옵션, 즉 오프라인, 인도 등에서 흔히 발생하는 느린 3G 옵션만 포함해야 합니다. 빠른 3G: 미국과 같은 지역에서 일반적으로 사용됩니다.

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

다른 커널 수준의 제한 도구와 일치하도록 제한 옵션이 조정되었습니다. DevTools 아니요 각 옵션 옆에 지연 시간, 다운로드, 업로드 측정항목이 표시됩니다. 오해를 불러일으킬 수 있습니다. 각 옵션의 실제 경험을 일치시키는 것이 목표입니다.

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

Async 체크박스가 Async 패널에서 삭제되었습니다. 이제 비동기 스택 트레이스를 기본값입니다. 이전에는 성능 오버헤드로 인해 이 옵션을 선택했습니다. 이제 오버헤드는 최소한으로만 유지합니다 비동기 스택 트레이스를 사용 중지하려면 설정에서 또는 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 동영상에 의견을 남겨주세요.

DevTools의 새로운 기능

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