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

DevTools의 새로운 기능 (Chrome 68)

Kayce Basques

Chrome 68의 DevTools에 새로 추가된 기능:

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

참고: chrome://version에서 실행 중인 Chrome 버전을 확인합니다. 이전 버전을 실행하는 경우에는 이러한 기능이 없습니다. 이후 버전을 실행 중인 경우 이러한 기능이 변경되었을 수 있습니다. Chrome은 약 6주마다 새로운 메이저 버전으로 자동 업데이트됩니다.

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

보조 콘솔

Chrome 68에는 자동 완성과 미리보기와 관련된 몇 가지 새로운 Console 기능이 포함되어 있습니다.

적극적 평가

이제 Console에서 표현식을 입력하면 Console이 커서 아래에 해당 표현식의 결과 미리보기를 표시할 수 있습니다.

sort() 작업이 명시적으로 실행되기 전에 콘솔에 sort() 작업의 결과가 출력됩니다.

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

적극적 평가를 사용 설정하려면 다음 단계를 따르세요.

Console을 엽니다.
Console Settings(콘솔 설정)를 엽니다.
조기 평가 체크박스를 사용 설정합니다.

DevTools는 표현식이 부작용을 일으키는 경우 조기 평가하지 않습니다.

인수 힌트

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

Console의 인수 힌트

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

참고:

인수 앞에 물음표(예: ?options)가 있으면 선택사항 인수입니다.
인수(예: ...items) 앞에 오는 생략 부호는 스프레드를 나타냅니다.
CSS.supports()와 같은 일부 함수는 여러 인수 서명을 허용합니다.

함수 실행 후 자동 완성

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

document.querySelector('p')를 실행하면 이제 콘솔에 해당 요소에 사용할 수 있는 속성과 함수가 표시됩니다.

그림 3. 상단 스크린샷은 이전 동작을 나타내고 하단 스크린샷은 함수 자동 완성을 지원하는 새 동작을 나타냅니다.

자동 완성의 ES2017 키워드

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

이제 Console의 자동 완성 UI에 'await'가 추천됩니다.

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

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

Chrome 68에는 Lighthouse 3.0이 제공됩니다. 다음 섹션에서는 가장 큰 변경사항을 요약하여 설명합니다. 자세한 내용은 Lighthouse 3.0 발표를 참고하세요.

더 빠르고 안정적인 감사

Lighthouse 3.0에는 Lantern이라는 코드네임의 새로운 내부 감사 엔진이 있어 실행 간에 차이가 적고 더 빠르게 감사를 완료할 수 있습니다.

새 UI

Lighthouse 3.0은 Lighthouse와 Chrome UX(연구 및 설계)팀 간의 공동작업을 통해 새로운 UI도 제공합니다.

Lighthouse 3.0의 새로운 보고서 UI

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

새 감사

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

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

BigInt 지원

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

콘솔의 BigInt 예시

그림 6. 콘솔의 BigInt 예시

감시할 속성 경로 추가

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

감시할 속성 경로 추가의 예

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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