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

DevTools의 새로운 기능 (Chrome 89)

Jecelyn Yeen

신뢰할 수 있는 유형 위반 디버깅 지원

신뢰할 수 있는 유형 위반의 중단점

이제 소스 패널에서 신뢰할 수 있는 유형 위반에서 중단점을 설정하고 예외를 포착할 수 있습니다.

신뢰할 수 있는 유형 API를 사용하면 DOM 기반 교차 사이트 스크립팅 취약점을 방지할 수 있습니다. 신뢰할 수 있는 유형을 사용하여 DOM XSS 취약점 없이 애플리케이션을 작성, 검토, 유지관리하는 방법은 여기를 참고하세요.

소스 패널에서 디버거 사이드바 창을 엽니다. CSP 위반 중단점 섹션을 펼치고 신뢰할 수 있는 유형 위반 체크박스를 사용 설정하여 예외에서 일시중지합니다. 이 데모 페이지에서 직접 사용해 보세요.

신뢰할 수 있는 유형 위반의 중단점

Chromium 문제: 1142804

소스 패널의 문제를 '문제' 탭에 연결

이제 소스 패널에 신뢰할 수 있는 유형을 위반하는 줄 옆에 경고 아이콘이 표시됩니다. 예외를 미리 보려면 마우스를 가져가세요. 이 아이콘을 클릭하여 Issues 탭을 펼치면 예외에 관한 세부정보와 해결 방법 안내가 제공됩니다.

소스 패널의 문제를 '문제' 탭에 연결

Chromium 문제: 1150883

표시 영역을 벗어난 노드 스크린샷 캡처

이제 스크롤해야 볼 수 있는 부분의 콘텐츠를 포함한 전체 노드의 노드 스크린샷을 캡처할 수 있습니다. 이전에는 표시 영역에 표시되지 않는 콘텐츠로 인해 스크린샷이 잘렸습니다. 이제 전체 페이지 스크린샷도 정확합니다.

요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 노드 스크린샷 캡처를 선택합니다.

표시 영역을 벗어난 노드 스크린샷 캡처

Chromium 문제: 1003629

네트워크 요청의 새로운 신뢰 토큰 탭

새로운 신뢰 토큰 탭을 사용하여 신뢰 토큰 네트워크 요청을 검사합니다.

신뢰 토큰은 사기를 방지하고 수동 추적 없이 실제 사람과 봇을 구별하는 데 도움이 되는 새로운 API입니다. 신뢰 토큰 시작 방법 알아보기

디버깅은 다음 릴리스에서 추가로 지원될 예정입니다.

네트워크 요청의 새로운 신뢰 토큰 탭

Chromium 문제: 1126824

Lighthouse 패널의 Lighthouse 7

이제 Lighthouse 패널에서 Lighthouse 7이 실행됩니다. 전체 변경사항 목록은 출시 노트를 참고하세요.

Lighthouse 패널의 Lighthouse 7

Lighthouse 7의 새로운 감사:

최대 콘텐츠 렌더링 시간 (LCP) 이미지 미리 로드 LCP 시간을 개선하기 위해 LCP 요소에서 사용하는 이미지가 미리 로드되었는지 감사합니다.
Issues 패널에 기록된 문제. Issues 패널에서 해결되지 않은 문제 목록을 나타냅니다.
프로그레시브 웹 앱 (PWA). PWA 카테고리가 상당히 크게 변경되었습니다.
Installable 그룹은 이제 Chrome의 설치 가능 기준을 사용 설정하는 기능 검사를 통해 전적으로 제공됩니다. 이는 매니페스트 창에 표시되는 것과 동일한 신호입니다.
- '서비스 워커 등록...' 감사는 PWA 최적화 그룹으로 이동하고 'HTTPS 사용' 감사가 주요 '설치 가능성 요구사항' 감사에 포함됩니다.
- 빠르고 신뢰할 수 있는 그룹이 삭제됩니다. 개선된 '설치 가능성 요구사항' 감사에 오프라인 기능 검사가 포함되므로 '오프라인 시 '현재 페이지 및 start_url이 200으로 응답' 감사가 삭제되었습니다. '모바일 네트워크에서 페이지 로드가 충분히 빠름' 감사도 삭제되었습니다.

Chromium 문제: 772558

요소 패널 업데이트

CSS `:target` 상태 강제 적용 지원

이제 DevTools를 사용하여 CSS :target 상태를 강제 검사하고 검사할 수 있습니다.

요소 패널에서 요소를 선택하고 요소 상태를 전환합니다. :target 체크박스를 사용 설정하여 스타일을 강제 적용하고 검사합니다.

URL의 해시와 요소의 ID가 동일한 경우 :target 유사 클래스를 사용하여 요소의 스타일을 지정합니다. 이 데모를 확인하여 직접 사용해 보세요. 이 새로운 DevTools 기능을 사용하면 URL을 항상 수동으로 변경할 필요 없이 이러한 스타일을 테스트할 수 있습니다.

CSS `:target` 상태 강제 적용

Chromium 문제: 1156628

요소 복제를 위한 새로운 바로가기

새로운 요소 복제 단축키를 사용하여 요소를 즉시 복제할 수 있습니다.

요소 패널에서 요소를 마우스 오른쪽 버튼으로 클릭하고 요소 복제를 선택합니다. 그 아래에 새 요소가 생성됩니다.

또는 단축키를 사용하여 요소를 복제할 수 있습니다.

Mac: Shift + Option + ⬇️
창/ Linux: Shift + Alt + ⬇️

중복된 요소

Chromium 문제: 1150797, 1150797

맞춤 CSS 속성용 색상 선택 도구

이제 스타일 창에 맞춤 CSS 속성의 색상 선택 도구가 표시됩니다.

또한 Shift 키를 누른 상태에서 색상 선택 도구를 클릭하여 색상 값의 RGBA, HSLA, 16진수 표현을 순환할 수 있습니다.

맞춤 CSS 속성용 색상 선택 도구

Chromium 문제: 1147016

CSS 속성을 복사하는 새로운 단축키

이제 몇 가지 새로운 단축키를 사용하여 CSS 속성을 더 빠르게 복사할 수 있습니다.

요소 패널에서 요소를 선택합니다. 그런 다음 Styles 창에서 CSS 클래스 또는 CSS 속성을 마우스 오른쪽 버튼으로 클릭하여 값을 복사합니다.

CSS 속성을 복사하는 새로운 단축키

CSS 클래스의 복사 옵션:

복사 선택기. 현재 선택기 이름을 복사합니다.
규칙 복사. 현재 선택기의 규칙을 복사합니다.
모든 선언 복사: 유효하지 않은 접두사 속성을 포함하여 현재 규칙에 있는 모든 선언을 복사합니다.

CSS 속성 복사 옵션:

선언 복사. 현재 줄의 선언을 복사합니다.
속성 복사. 현재 선의 속성을 복사합니다.
Copy value: 현재 선의 값을 복사합니다.

Chromium 문제: 1152391

쿠키 업데이트

URL 디코딩된 쿠키를 표시하는 새로운 옵션

이제 쿠키 창에서 URL 디코딩된 쿠키 값을 볼 수 있습니다.

Application 패널로 이동하여 Cookies 창을 선택합니다. 목록에서 쿠키를 선택합니다. 디코딩된 쿠키를 보려면 새로운 디코딩된 URL 표시 체크박스를 선택합니다.

URL 디코딩된 쿠키를 표시하는 옵션

Chromium 문제: 997625

보이는 쿠키만 삭제

쿠키 창의 모든 쿠키 지우기 버튼이 필터링된 쿠키 지우기 버튼으로 대체되었습니다.

애플리케이션 패널 > 쿠키 창에서 텍스트 상자에 텍스트를 입력하여 쿠키를 필터링합니다. 이 예에서는 'PREF'를 기준으로 목록을 필터링합니다. 필터링된 쿠키 지우기 버튼을 클릭하여 표시된 쿠키를 삭제합니다. 필터 텍스트를 지우면 다른 쿠키가 목록에 남아 있게 됩니다. 이전에는 모든 쿠키를 삭제하는 옵션만 제공되었습니다.

보이는 쿠키만 삭제

Chromium 문제: 978059

스토리지 창에서 서드 파티 쿠키를 삭제하는 새로운 옵션

이제 Storage 창에서 사이트 데이터를 삭제할 때 DevTools가 기본적으로 퍼스트 파티 쿠키만 삭제합니다. 서드 파티 쿠키 포함을 사용 설정하여 서드 파티 쿠키도 삭제합니다.

서드 파티 쿠키 삭제 옵션

Chromium 문제: 1012337

맞춤 기기용 사용자 에이전트 클라이언트 힌트 수정

이제 맞춤 기기의 사용자 에이전트 클라이언트 힌트를 수정할 수 있습니다.

설정 > 기기로 이동하여 맞춤 기기 추가...를 클릭합니다. 사용자 에이전트 클라이언트 힌트 섹션을 펼쳐 클라이언트 힌트를 수정합니다.

사용자 에이전트 클라이언트 힌트 수정

사용자 에이전트 클라이언트 힌트는 개발자가 개인 정보를 보호하면서 인체공학적인 방식으로 사용자의 브라우저 정보에 액세스할 수 있도록 하는 사용자 에이전트 문자열의 대안입니다. web.dev/user-agent-client-hints/에서 사용자 에이전트 클라이언트 힌트에 대해 자세히 알아보세요.

Chromium 문제: 1073909

네트워크 패널 업데이트

'네트워크 로그 기록' 설정 유지

이제 DevTools가 '네트워크 로그 기록' 설정을 유지합니다. 이전에는 DevTools가 페이지를 새로 고칠 때마다 사용자의 선택을 재설정했습니다.

네트워크 로그 기록

Chromium 문제: 1122580

네트워크 패널에서 WebTransport 연결 보기

이제 네트워크 패널에 WebTransport 연결이 표시됩니다.

WebTransport 연결

WebTransport는 지연 시간이 짧은 양방향 클라이언트-서버 메시징을 제공하는 새로운 API입니다. web.dev/webtransport/에서 사용 사례와 향후 구현 방식에 관한 의견을 제공하는 방법을 자세히 알아보세요.

Chromium 문제: 1152290

'온라인'의 이름이 '제한 없음'으로 변경됨

네트워크 에뮬레이션 옵션 'Online'의 이름이 이제 'No Throttling'으로 변경되었습니다.

네트워크 로그 기록

Chromium 문제: 1028078

콘솔, 소스 패널, 스타일 창의 새로운 복사 옵션

콘솔 및 소스 패널에 객체를 복사하는 새로운 바로가기

이제 Console 및 Sources 패널의 새로운 단축키를 사용하여 객체 값을 복사할 수 있습니다. 이 방법은 복사해야 할 큰 객체 (예: 긴 배열)가 있는 경우에 특히 유용합니다.

콘솔에서 객체 복사

소스 패널의 객체 복사

Chromium 문제: 1149859, 1148353

소스 패널 및 스타일 창에 파일 이름을 복사하는 새로운 바로가기

이제 파일 이름을 마우스 오른쪽 버튼으로 클릭하여 복사할 수 있습니다.

소스 패널에 있는 파일
Elements 패널의 Styles 창에 있는 파일 이름

컨텍스트 메뉴에서 Copy file name(파일 이름 복사)을 선택하여 파일 이름을 복사합니다.

소스 패널에서 파일 이름 복사

Styles 창에서 파일 이름 복사

Chromium 문제: 1155120

프레임 세부정보 뷰 업데이트

프레임 세부정보 뷰의 새로운 서비스 워커 정보

이제 DevTools가 전용 서비스 워커를 생성하는 프레임 아래에 전용 서비스 워커를 표시합니다.

Application 패널에서 서비스 워커로 프레임을 펼친 후 서비스 워커 트리 아래에서 서비스 워커를 선택하여 세부정보를 확인합니다.

프레임 세부정보 뷰의 서비스 워커 정보

Chromium 문제: 1122507

프레임 세부정보 뷰의 메모리 정보 측정

이제 API 사용 가능 여부 섹션에 performance.measureMemory() API 상태가 표시됩니다.

새 performance.measureMemory() API는 전체 웹페이지의 메모리 사용량을 예측합니다. 이 새로운 API를 사용하여 웹페이지의 총 메모리 사용량을 모니터링하는 방법을 이 도움말에서 알아보세요.

메모리 측정

Chromium 문제: 1139899

문제 탭에서 의견 보내기

문제 메시지를 개선하고 싶다면 Console에서 문제 탭으로 이동하거나 설정 더보기 > 도구 더보기 > 문제로 이동하여 문제 탭을 엽니다. 문제 메시지를 펼치고 문제 메시지가 도움이 되었나요?를 클릭하면 팝업에서 의견을 제공할 수 있습니다.

문제 의견 링크

성능 패널의 드롭된 프레임

성능 패널에서 로드 성능을 분석할 때 이제 프레임 섹션에서 드롭된 프레임을 빨간색으로 표시합니다. 이 아이콘 위로 마우스를 가져가면 프레임 속도를 확인할 수 있습니다.

드롭된 프레임

Chromium 문제: 1075865

기기 모드에서 폴더블 및 듀얼 화면 에뮬레이션

이제 DevTools에서 듀얼 화면 및 폴더블 기기를 에뮬레이션할 수 있습니다.

기기 툴바를 사용 설정한 후 Surface Duo나 Samsung Galaxy Fold 중 하나를 선택합니다.

새 스팬 아이콘을 클릭하여 단일 화면 또는 접힌 상태와 듀얼 화면 또는 펼쳐진 상태 간에 전환합니다.

실험용 웹 플랫폼 기능을 사용 설정하여 새로운 CSS 미디어 screen-spanning 기능 및 JavaScript getWindowSegments API에 액세스할 수도 있습니다. 실험용 아이콘은 실험용 웹 플랫폼 기능 플래그의 상태를 표시합니다. 플래그가 사용 설정되면 아이콘이 강조표시됩니다. chrome://flags로 이동하여 플래그를 전환합니다.

듀얼 화면 에뮬레이션

Chromium 문제: 1054281

실험용 기능

Puppeteer Recorder로 브라우저 테스트 자동화

이제 DevTools에서 개발자와의 상호작용을 기반으로 Puppeteer 스크립트를 생성할 수 있으므로 브라우저 테스트를 더 쉽게 자동화할 수 있습니다. Puppeteer는 DevTools 프로토콜을 통해 Chrome 또는 Chromium을 제어하는 고급 API를 제공하는 Node.js 라이브러리입니다.

이 데모 페이지로 이동합니다. DevTools에서 소스 패널을 엽니다. 왼쪽 창에서 Recording 탭을 선택합니다. 새 기록을 추가하고 파일 이름을 지정합니다 (예: test01.js).

하단의 Record 버튼을 클릭하여 상호작용 기록을 시작합니다. 화면에 표시되는 양식을 작성해 보세요. Puppeteer 명령어가 파일에 적절하게 추가되는지 확인합니다. Record 버튼을 다시 클릭하여 녹화를 중지합니다.

스크립트를 실행하려면 Puppeteer 공식 사이트에서 시작 가이드를 따르세요.

이는 초기 단계 실험입니다. 향후 녹음기 기능을 개선하고 확장할 계획입니다.

Puppeteer 녹음기

Chromium 문제: 1144127

Styles 창의 글꼴 편집기

새로운 글꼴 편집기는 스타일 창에 있는 팝오버 편집기로, 글꼴 관련 속성을 통해 웹페이지에 딱 맞는 서체를 찾는 데 도움을 줍니다.

팝오버는 일련의 직관적인 입력 유형으로 서체를 동적으로 조작할 수 있는 깔끔한 UI를 제공합니다.

Styles 창의 글꼴 편집기

Chromium 문제: 1093229

CSS Flexbox 디버깅 도구

DevTools에 마지막 출시 이후 Flexbox 디버깅의 실험적 지원이 추가되었습니다.

이제 DevTools에서 CSS align-items 속성을 더 잘 시각화하는 데 도움이 되는 안내선을 그립니다. CSS gap 속성도 지원됩니다. 이 예에는 CSS gap: 12px;가 있습니다. 각 간격의 해칭 패턴을 확인하세요.

플렉스박스

Chromium 문제: 1139949

새 CSP 위반 탭

새로운 CSP 위반 탭에서 모든 콘텐츠 보안 정책 (CSP) 위반사항을 한눈에 확인할 수 있습니다. 이 새 탭은 CSP 및 신뢰할 수 있는 유형 위반이 많은 웹페이지를 더 쉽게 다룰 수 있는 실험 버전입니다.

CSP 위반 탭

Chromium 문제: 1137837

새로운 색상 대비 계산 - APCA (Advanced Perceptual Contrast Algorithm)

색상 선택 도구의 AA/AAA 가이드라인 대비율을 대체하는 고급 인지 대비 알고리즘 (APCA)이 있습니다.

APCA는 색상 인식에 관한 현대적 연구를 기반으로 대비를 계산하는 새로운 방법입니다. AA/AAA 가이드라인과 비교할 때 APCA는 상황에 따라 더 달라집니다. 대비는 텍스트의 공간 속성 (글꼴 두께 및 크기), 색상 (텍스트와 배경 간에 인식된 밝기 차이), 컨텍스트 (주변광, 주변 환경, 텍스트의 의도 목적)를 기반으로 계산됩니다.

색상 선택 도구의 APCA

이 예에서는 APCA 기준점이 38%입니다. 대비율이 나열된 값을 충족하거나 초과해야 합니다. 이 값은 글꼴 두께와 크기를 기반으로 계산되며 APCA 참고표를 참조하시기 바랍니다.

Chromium 문제: 1121900

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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