DevTools의 새로운 기능 (Chrome 68)

케이스 바스크
케이스 바스크

Chrome 68의 DevTools 새로운 기능:

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

보조 콘솔

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

적극적 평가

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

콘솔은 명시적으로 실행되기 전에 align() 작업의 결과를 출력합니다.

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

Eager Evaluation을 사용 설정하려면 다음 단계를 따르세요.

  1. 콘솔을 엽니다.
  2. Console Settings Console 설정 버튼를 엽니다.
  3. Eager Assessment 체크박스를 선택합니다.

DevTools는 표현식이 부수 효과를 유발하는지 평가하지 않습니다.

인수 힌트

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

콘솔의 인수 힌트

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

참고:

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

함수 실행 후 자동 완성

Eager Evaluation을 사용 설정하면 이제 Console에 함수를 입력한 후 사용 가능한 속성과 함수가 표시됩니다.

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

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

자동완성의 ES2017 키워드

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

이제 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

감시할 속성 경로 추가

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

감시할 속성 경로 추가의 예

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

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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

DevTools의 새로운 기능

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

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82가 취소되었습니다.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59