DevTools의 새로운 기능 (Chrome 68)

Chrome 68의 DevTools 새로운 기능:

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

를 통해 개인정보처리방침을 정의할 수 있습니다.

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

보조 콘솔

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

적극적 평가

콘솔에서 표현식을 입력하면 이제 콘솔에서 식의 결과를 미리 볼 수 있습니다. 식을 추가할 수 있습니다.

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

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

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

DevTools는 표현식이 부작용을 유발하는지 즉시 평가하지 않습니다.

인수 힌트

함수를 입력할 때 이제 콘솔에는 함수에 필요한 인수가 표시됩니다.

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

참고:

• 인수 앞에 있는 물음표(예: ?options)는 선택적 인수를 나타냅니다.
• ...items와 같이 인수 앞에 있는 생략 부호는 분산을 나타냅니다.
• CSS.supports()와 같은 일부 함수는 여러 인수 서명을 허용합니다.

함수 실행 후 자동 완성

Eager Evaluation을 사용 설정하면 콘솔에 어떤 속성과 함수가 사용할 수 있습니다.

그림 3. 위쪽 스크린샷은 이전 동작을, 아래쪽 스크린샷은 함수 자동 완성을 지원하는 새 동작

자동 완성의 ES2017 키워드

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

그림 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를 제공합니다. (연구 및 디자인)팀

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

새 감사

Lighthouse 3.0은 또한 다음과 같은 4가지 감사를 새로 제공합니다.

• 콘텐츠가 포함된 첫 페인트
• robots.txt가 유효하지 않음
• 애니메이션 콘텐츠에 동영상 형식 사용하기
• 모든 출발지에 비용이 많이 드는 여러 차례의 왕복 이동을 피하세요

BigInt 지원

Chrome 68에서는 BigInt라는 새로운 숫자 프리미티브를 지원합니다. BigInt를 사용하면 정수로 나눌 수 있습니다. 콘솔에서 사용해 보세요.

그림 6. 콘솔의 BigInt 예

감시할 속성 경로 추가

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

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

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