Get Inspired
Docs
Blog
Articles

DevTools 의 새로운 기능 (Chrome 106)

Published on • Updated on

Translated to: English, Español, Português, 中文, Pусский, 日本語

Jecelyn Yeen
Jecelyn Yeen

Google 의 Chrome DevTools 팀에서 일하는 Developer Advocate 입니다

Website Twitter GitHub

이 게시글의 번역에는 도창욱님이 참여하셨으며, 조은님과 [최원영]](https://www.linkedin.com/in/toruchoi)님이 리뷰를 맡아 주셨습니다.

DevTools를 개선하는 데 도움을 주고 싶으신가요? Google User Research 에 참여해보세요.

소스 패널에서 작성/배포 단위로 파일 그룹화하기

작성/배포 단위로 파일 그룹화하기는 이제 3점 메뉴에 위치합니다. 이전에는 네비게이션 패널에서 바로 확인할 수 있었습니다. 이 데모를 열어보세요. 먼저 원본 소스 코드 (작성됨으로 표기)를 확인하기 위해 작성/배포 단위로 파일 그룹화하기 설정을 활성화하고, 빠르게 확인해봅시다. Group files by Authored / Deployed

Chromium bug: 1352488

개선된 스택 추적

비동기 동작에 대한 연결된 스택 추적

이제 몇몇 동작들이 비동기적으로 발생하도록 스케쥴링되었을 떄, 개발자 도구의 스택 추적기는 동작의 "전체 스토리"를 표현합니다. 이전에는 일부 스토리만을 보여주었습니다. 예를 들어 이 데모를 실행하고, 증가 버튼을 클릭한 뒤 콘솔에 에러 메세지를 확장해봅시다. 소스 코드에서 비동기 timeout 동작을 포함하고 있을 것입니다.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

이전에는 스택 추적은 타임아웃 동작만을 보여주었으며, 동작의 "진짜 발생 이유"는 보여주지 않았습니다. 이 변경으로 더불어 이제 개발자 도구는 버튼 컴포넌트의 onClick 이벤트로 인해 동작이 발생하였음을 보여주고, increment 함수가 타임아웃 동작에 이어 발생함을 보여줍니다.

Linked stack traces for asynchronous operations

그 외에도 DevTools는 새로운 "Async Stack Tagging" 기능을 도입했습니다. 비동기 코드의 두 부분을 새로운 console.createTask() 메서드와 함께 연결하면 작업의 전체 스토리를 알 수 있습니다. 자세한 내용은 DevTools의 최신 디버깅을 참조하세요.

복잡하게 보이나요? 전혀 그렇지 않습니다. 대부분의 경우 사용 중인 프레임워크가 스케쥴링과 비동기 동작을 처리합니다. 이 경우 API의 구현은 프레임워크에 달려 있으므로 걱정할 필요가 없습니다. (예: Angular는 이와 같은 변경 사항을 구현했습니다.)

Chromium bug: 1334585

알려진 서드파티 스크립트를 자동으로 무시하기

이제 개발자도구가 무시 목록에 알려진 타사 스크립트를 자동으로 추가하므로 디버깅 시 코드의 문제를 더 빠르게 확인할 수 있습니다.

이 데모를 열고 증가 버튼을 클릭한 뒤 콘솔에서 오류 메시지를 확장해봅시다. 스택 추적에는 코드만 표시됩니다(예: app.component.ts button.component.ts). 전체 스택 추적을 보려면 더 많은 프레임 표시를 클릭하세요.

스택 추적에서 알려진 서드파티 스크립트 자동으로 무시하기

이전에는 스택 추적에 zone.js 및 core.mjs와 같은 타사 스크립트가 포함되었습니다. 이는 소스 코드가 아니라 번들러(예: webpack) 또는 프레임워크(예: Angular)에 의해 생성된 코드이며, 이로 인해 오류의 근본 원인을 확인하는 데 더 오랜 시간이 걸리게됩니다.

스택 추적에서 알려진 서드파티 스크립트 자동으로 무시하기

내부적으로 개발자도구는 소스 맵의 새로운 x_google_ignoreList 속성을 기반으로 하는 서드파티 스크립트를 무시합니다. 이를 위해 프레임워크와 번들러가 이 정보를 제공해야 할 필요는 있습니다. 사례 연구: DevTools를 사용한 더 나은 앵귤러 디버깅을 참조하세요.

추가적으로 항상 전체 스택 추적을 보려면 설정 > 무시 목록 > 알려진 서드파티 스크립트를 자동으로 무시 목록에 추가를 통해 설정을 비활성화할 수 있습니다.

알려진 서드파티 스크립트를 자동으로 무시하기 설정

Chromium bug: 1323199

개선된 호출 스택 디버깅

이제 알려진 서드파티 스크립트를 자동으로 무시 목록에 추가하기 설정을 사용하면 호출 스택에 코드와 관련된 프레임들만 표시됩니다.

이 데모를 열고 app.component.ts의 increment() 함수에 중단점을 설정합니다. 페이지에서 증가 버튼을 클릭하여 중단점을 트리거해보세요. 호출 스택은 코드의 프레임(예를 들ㅓ app.component.ts 및 button.component.ts)만 표시하는 것을 확인할 수 있습니다.

모든 프레임을 보려면 무시 목록에 있는 프레임 표시를 활성화합니다. 이전에는 개발자도구가 기본적으로 모든 프레임을 표시했습니다.

개선된 호출 스택 디버깅

Chromium bug: 1352488

소스 패널에서 무시 목록에 포함된 소스들 숨기기

탐색 창에서 관련 없는 파일을 숨기려면 무시 목록에 있는 소스 숨기기를 활성화합니다. 이를 통해 코드에만 집중할 수 있습니다.

이 데모를 실행해보세요. 소스 패널에서, node_modules 및 webpack은 서드파티 스크립트입니다. 3점 메뉴를 클릭하고 무시 목록에 포함된 소스 숨기기를 선택하여 창에서 해당 소스들을 숨길 수 있습니다.

소스 패널에서 무시 목록에 포함된 소스들 숨기기

Chromium bug: 1352488

무시 목록에 포함된 소스 숨기기 설정을 사용하면 명령 메뉴에서 파일을 더 빨리 찾을 수 있습니다. 이전에는 명령 메뉴에서 파일을 검색하면 사용자와 관련이 없을 수 있는 서드파티 파일이 함꼐 반환되었습니다.

예를 들어 무시 목록에 포함된 소스 숨기기 설정을 활성화하고 3점 메뉴를 클릭합니다. 파일 열기를 선택한 뒤 버튼 구성 요소를 검색하기 위해 "ton"을 입력합니다. 이전에는 결과에 node_modules 파일 중 하나인 node_modules 파일이 포함되었으며, 첫 번째 결과로도 표시되었습니다.

명령 메뉴에서 무시 목록에 있는 파일 숨기기

Chromium bug: 1336604

성능 패널의 새로운 상호 작용 추적

성능 패널의 새로운 상호작용 추적을 사용하여 상호작용을 시각화하고 잠재적인 응답 민감성 문제를 추적할 수 있습니다.

예를 들어 이 데모 페이지에서 성능 기록을 시작해봅시다. 커피를 클릭하고 기록을 중지합니다. 상호작용 트랙에 두 개의 상호작용이 표시됩니다. 두 상호 작용 모두 동일한 ID를 가지며, 이는 상호 작용들이 동일한 사용자의 동작에서 트리거되었음을 나타냅니다.

성능 패널의 상호 작용 추적

Chromium bug: 1347390

Performance Insights 패널의 LCP 타이밍 분석

Performance Insights 패널은 이제 최대 콘텐츠풀 페인트(Largest Containful Paint, LCP)의 타이밍 분석을 표시합니다. 이러한 타이밍 정보를 사용하여 LCP 성능을 개선할 수 있는 방법을 확인할 수 있습니다.

Performance Insights 패널의 LCP 타이밍 분석

Chromium bug: 1351735

Auto-generate default name for recordings in the Recorder panel

이제 *기록 패널은 새로운 기록의 이름을 자동으로 생성합니다.

기록 패널의 기본 기록 명칭들

Chromium bug: 1351383

그외의 하이라이트들

  • 이전에는 기록 확장 프로그램들이 기록 패널에서 종종 표시되지 않았습니다. (1351416)
  • 스타일 창은 이제 SVG <stop> 요소의 stop-color 속성에 대한 색상 선택기를 표시해줍니다. (1351096)
  • Performance Insights 패널에서 레이아웃 변경의 근본적 잠재원인인 레이아웃을 유발하는 스크립트를 식별합니다. (1343019)
  • Performance Insights 패널에서 LCP 웹 글꼴의 주요 경로를 표시합니다. (1350390)

프리뷰 채널 다운로드하기

Chrome Canary, Dev, Beta 를 기본 개발용 브라우저로 사용해보는 걸 검토해보세요. 프리뷰 채널에서는 최신 DevTools 기능들을 사용할 수 있고, 갓 나온 웹 플랫폼 API를 테스트해 볼 수 있으며, 사용자들이 사이트의 문제를 보기전에 미리 찾아낼 수 있습니다.

Chrome DevTools 팀과 이야기 나누기

아래 옵션을 사용하여 게시물의 새로운 기능 및 변경 사항, 또는 DevTools 관련된 기타 사항에 토론해보세요.

  • crbug.com 를 이용한 피드백 및 제안 전달하기.
  • DevTools 에서 More options   More   > Help > Report a DevTools issues 를 사용하여 DevTools 이슈 제보하기.
  • @ChromeDevTools 에 트윗하기.
  • What's new in DevTools YouTube 비디오 에 댓글 남기기.

더 많은 DevTools 기능

What's New In DevTools 영어 버전을 참고하여 관련 기능의 전체 목록을 볼 수 있습니다. 아래 콘텐츠들은 한국어로 번역된 콘텐츠들입니다.

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

Updated on • Improve article

Back

DevTools 의 새로운 기능 (Chrome 107)

Next

Container queries begin to land in stable browsers while the polyfill gets a big update

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.