DevTools의 새로운 기능 (Chrome 68)

Kayce Basques

Chrome 68의 새로운 DevTools 기능:

• 적극적 평가 표현식을 입력하면 콘솔에 결과가 미리 표시됩니다.
• 인수 힌트 함수를 입력하면 콘솔에 해당 함수에 필요한 인수가 표시됩니다.
• 함수 자동 완성 document.querySelector('p')와 같은 함수 호출을 입력하면 콘솔에 반환 값이 지원하는 함수와 속성이 표시됩니다.
• 콘솔의 ES2017 키워드 이제 콘솔의 자동 완성 UI에서 await와 같은 키워드를 사용할 수 있습니다.
• 감사 패널의 Lighthouse 3.0 더 빠르고 일관된 감사, 새로운 UI, 새로운 감사
• BigInt 지원 콘솔에서 JavaScript의 새로운 임의 정밀도 정수를 사용해 보세요.
• 감시 창에 속성 경로 추가 범위 창의 속성을 감시 창에 추가합니다.
• '타임스탬프 표시'가 설정으로 이동

아래에서 출시 노트를 읽거나 동영상 버전을 시청하세요.

Assistive Console

Chrome 68에는 자동 완성 및 미리보기와 관련된 몇 가지 새로운 콘솔 기능이 제공됩니다.

적극적 평가

이제 콘솔에 표현식을 입력하면 커서 아래에 해당 표현식의 결과 미리보기가 표시됩니다.

그림 1. 콘솔에서 명시적으로 실행되기 전에 sort() 작업의 결과를 출력합니다.

적극적 평가를 사용 설정하려면 다음을 실행하세요.

1. 콘솔을 엽니다.
2. 콘솔 설정 을 엽니다.
3. 즉시 평가 체크박스를 사용 설정합니다.

표현식으로 인해 부작용이 발생하는 경우 DevTools는 적극적으로 평가하지 않습니다.

인수 힌트

이제 함수를 입력하면 Console에 함수가 예상하는 인수가 표시됩니다.

그림 2. 콘솔의 다양한 인수 힌트 예

참고:

• 인수 앞에 오는 물음표(예: ?options)는 선택사항 인수를 나타냅니다.
• ...items과 같은 arg 앞에 오는 줄임표는 스프레드를 나타냅니다.
• CSS.supports()와 같은 일부 함수는 여러 인수 서명을 허용합니다.

함수 실행 후 자동 완성

지연 평가를 사용 설정하면 이제 함수를 입력한 후 사용할 수 있는 속성과 함수도 콘솔에 표시됩니다.

그림 3. 위쪽 스크린샷은 이전 동작을 나타내고 아래쪽 스크린샷은 함수 자동 완성 기능을 지원하는 새 동작을 나타냅니다.

자동 완성의 ES2017 키워드

이제 콘솔의 자동 완성 UI에서 await와 같은 ES2017 키워드를 사용할 수 있습니다.

그림 4. 이제 콘솔의 자동 완성 UI에 await이 제안됩니다.

더 빠르고 안정적인 감사, 새로운 UI, 새로운 감사

Chrome 68에는 Lighthouse 3.0이 포함되어 있습니다. 다음 섹션에서는 가장 큰 변경사항을 요약합니다. 전체 내용은 Lighthouse 3.0 발표를 참고하세요.

더 빠르고 안정적인 감사

Lighthouse 3.0에는 Lantern이라는 새로운 내부 감사 엔진이 있어 감사를 더 빠르게 완료하고 실행 간의 차이를 줄입니다.

새 UI

또한 Lighthouse 3.0에는 Lighthouse와 Chrome UX(연구 및 설계)팀 간의 협업 덕분에 새로운 UI가 도입되었습니다.

그림 5. Lighthouse 3.0의 새로운 보고서 UI

새 감사

Lighthouse 3.0에는 다음과 같은 4가지 새로운 감사도 포함되어 있습니다.

• 콘텐츠가 포함된 첫 페인트
• robots.txt가 유효하지 않음
• 애니메이션 콘텐츠에는 동영상 형식 사용
• 출발지로의 여러 번의 비용이 많이 드는 왕복 방지

BigInt 지원

Chrome 68에서는 BigInt라는 새로운 숫자 기본 형식을 지원합니다. BigInt를 사용하면 임의의 정밀도로 정수를 나타낼 수 있습니다. 콘솔에서 사용해 보세요.

그림 6. 콘솔의 BigInt 예시

감시할 속성 경로 추가

중단점에서 일시중지된 상태에서 범위 창의 속성을 마우스 오른쪽 버튼으로 클릭하고 감시할 속성 경로 추가를 선택하여 감시 창에 해당 속성을 추가합니다.

그림 7. 감시할 속성 경로 추가의 예

'타임스탬프 표시'가 설정으로 이동함

이전에 콘솔 설정 에 있던 타임스탬프 표시 체크박스가 설정으로 이동했습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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