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

DevTools의 새로운 기능 (Chrome 120)

Sofia Emelianova

서드 파티 쿠키 단계적 지원 중단

사이트에서 서드 파티 쿠키를 사용할 수 있으므로 지원 중단이 다가옴에 따라 조치를 취해야 합니다. 영향을 받는 쿠키에 대해 취할 수 있는 조치를 알아보려면 서드 파티 쿠키 지원 중단 준비하기를 참고하세요.

서드 파티 쿠키 문제 포함 체크박스가 모든 Chrome 사용자에 대해 기본적으로 사용 설정되어 있으므로 이제 문제 탭에 예정된 서드 파티 쿠키 지원 중단 및 단계적 지원 중단으로 인해 영향을 받을 쿠키에 대해 경고가 표시됩니다. 이러한 문제가 표시되지 않도록 하려면 언제든지 체크박스를 선택 해제하면 됩니다.

'문제' 탭에 예정된 서드 파티 쿠키 지원 중단에 대한 경고

Chromium 문제: 1466310

개인 정보 보호 샌드박스 분석 도구로 웹사이트의 쿠키 분석

DevTools용 개인 정보 보호 샌드박스 분석 도구 확장 프로그램은 최신 출시 전 버전 0.3.2로 개발 중입니다. 이 도구를 사용하면 웹사이트에서 쿠키를 사용하는 방식을 이해하고 새로운 개인 정보 보호 Chrome API에 관한 안내를 제공할 수 있습니다.

쿠키를 분석하려면 다음 단계를 따르세요.

Chrome에서 확장 프로그램을 설치합니다.
최상의 분석을 위해 하나의 탭에서 웹사이트를 엽니다.
DevTools를 열고 Privacy Sandbox 패널로 이동합니다. 이 패널은 상단의 드롭다운 버튼 뒤에 숨겨져 있을 수 있습니다.
쿠키 섹션을 열고 이 탭 분석을 클릭합니다. 도구에서 쿠키를 찾지 못한 경우 페이지를 새로고침해 봅니다.

개인 정보 보호 샌드박스 분석 도구

개인 정보 보호 샌드박스 분석 도구 (PSAT) 사용 방법에 관한 자세한 내용은 다음을 참고하세요.

PSAT의 사용 방법
지원 중단이 적용되면 어떻게 될지 예측하려면 평가 환경을 설정하세요.
영향을 받는 측면을 확인하려면 일반 분석 작업을 참조하세요.
분석, 전자상거래, SSO 서비스, 삽입된 콘텐츠 등 일반적인 시나리오를 분석하는 방법을 알아보려면 분석 시나리오의 데모 예를 확인하세요.

문제 신고에 대한 안내도 참고하세요.

향상된 목록 무시

`node_modules`의 기본 제외 패턴

이 버전은 설정 > 무시 목록에서 기본 정규 표현식을 맞춤 제외 규칙으로 사용 설정합니다. 코드에만 집중할 수 있도록 이제 Debugger는 기본적으로 /node_modules/ 및 /bower_components/의 스크립트를 건너뜁니다. 언제든지 설정에서 이 규칙을 사용 중지할 수 있습니다.

정규 표현식을 추가하기 전과 후입니다.

Chromium 문제: 1496301

무시되지 않은 코드를 통해 포착되거나 전달되는 경우 이제 예외가 실행을 중지합니다.

포착된 예외에서 일시중지를 선택한 상태로 코드를 디버그하면 이제 Debugger는 다음과 같이 포착된 다음 예외(동기식 및 비동기 모두)에서 실행을 중지합니다.

호출 스택의 무시되지 않은 프레임에서 발견된 예외
호출 스택에서 무시되지 않은 프레임을 통과하는 예외를 포착했습니다. 예를 들어 스크린샷을 참조하세요.

무시되지 않은 코드를 통해 전달된 포착된 예외에서 일시중지합니다.

이 동작을 테스트하려면 이 데모 페이지를 엽니다.

DevTools > 소스를 열고 hidden 폴더를 무시 목록에 추가한 다음 포착된 예외에서 일시중지를 선택합니다.
페이지의 '잡았음' 목록 아래에서 여러 버튼을 클릭하여 언급된 사례에서 실행이 일시중지된 것을 확인합니다.

비동기 호출에서 포착되었거나 포착되지 않은 예외 (확인된 경우)에서 실행을 일시중지하기 위해 Debugger는 프로미스 전체에서 거부 핸들러를 찾습니다. 이 버전부터 Debugger는 try...finally 블록이 예외를 포착하지 않는 것과 마찬가지로 더 이상 Promise.finally()가 예외를 포착할 것으로 예측하지 않습니다.

Chromium 문제: 1489312, 1291064

소스 맵에서 `x_google_ignoreList`의 이름이 `ignoreList`로 변경되었습니다.

소스 맵 사양에서 x_google_ignoreList 대신 ignoreList 필드를 채택했으며 이제 DevTools에서 이전 필드의 대체 이름으로 새 이름을 지원합니다. 이제 프레임워크 및 번들러에서 새 필드 이름을 사용할 수 있습니다.

소스 맵을 사용하면 웹사이트에서 제공하는 코드를 축소하는 대신 작성한 코드를 디버그할 수 있습니다.

소스 맵에 대한 자세한 내용은 다음을 참조하세요.

원격 디버깅 중 새로운 입력 모드 전환

이제 원격으로 Chrome 탭을 디버깅할 때 터치 입력과 마우스 입력 간에 전환할 수 있습니다. --remote-debugging-port=<port>로 Chrome 인스턴스를 실행하고 chrome://inspect/#devices를 통해 이 네트워크 대상에 연결하는 경우를 예로 들 수 있습니다.

입력 모드가 실제로 작동하는 모습을 보려면 동영상을 시청하세요.

Chromium 문제: 1410433

이제 Elements 패널에 노드 `#document`개의 URL이 표시됩니다.

iframe을 더 쉽게 디버그할 수 있도록 이제 Elements 패널에 #document 노드 옆에 documentURL가 표시됩니다.

전후에 #document 노드 옆에 documentURL이 표시됩니다.

Chromium 문제: 1376976.

애플리케이션 패널의 효과적인 콘텐츠 보안 정책

이제 검사된 프레임의 콘텐츠 보안 정책 (CSP) 세부정보를 볼 수 있습니다. 세부정보를 보려면 애플리케이션 > 프레임으로 이동하여 프레임을 선택하고 콘텐츠 보안 정책 (CSP) 섹션까지 아래로 스크롤합니다.

애플리케이션 탭에 있는 콘텐츠 보안 정책 섹션

Chromium 문제: 1424714

애니메이션 디버깅 개선

이제 애니메이션 탭에서 다음 작업을 할 수 있습니다.

타임라인 헤더의 아무 곳이나 클릭하여 플레이헤드를 설정합니다. 애니메이션이 이미 재생 중이면 계속 재생되고 그렇지 않으면 중지됩니다. 이전에는 드래그해야 했습니다.
이름 열의 크기를 조절하여 전체 애니메이션 이름을 확인합니다.

Chromium 문제: 1492460, 1489721

소스의 '이 코드를 신뢰하나요?' 대화상자 및 콘솔의 자체 XSS 경고

코드를 붙여넣을 때 자체 XSS 경고 표시 실험이 기본적으로 사용 설정되어 있습니다. Self-XSS (자체 교차 사이트 스크립팅)는 사용자를 속여 DevTools에 악성 코드를 붙여넣도록 하여 공격자가 웹 계정과 개인 정보를 제어할 수 있도록 하는 공격입니다.

DevTools를 처음 사용하는 사용자가 코드를 붙여넣으려고 하면 Sources 패널에 Do you trust this code? 대화상자가 표시되고 Console에도 비슷한 경고가 표시됩니다. 이해하고 직접 검토한 코드만 붙여넣으세요. 붙여넣으려면 메시지가 표시되면 allow pasting를 입력합니다. 붙여넣기가 한 번 허용되면 경고가 다시 표시되지 않습니다.

소스에 코드를 붙여넣을 때 표시되는 '이 코드를 신뢰할 수 있나요?' 대화상자

Chromium 문제: 345205

웹 워커 및 Worklet의 이벤트 리스너 중단점

소스 > 이벤트 리스너 중단점에서 이벤트 중단점을 설정하면 웹사이트에서 이 이벤트를 일시중지하는 것 외에도 공유 저장소 Worklet을 비롯한 모든 유형의 웹 작업자 또는 워크렛에서 해당 이벤트가 발생할 때 디버거도 일시중지됩니다.

서비스 워커가 set timeout 함수를 호출할 때 디버거가 일시중지되었습니다.

Chromium 문제: 1445175

`<audio>` 및 `<video>`의 새 미디어 배지

이제 Elements 패널에서 <audio> 및 <video> 요소에 새 미디어 배지를 사용 설정할 수 있습니다. 배지를 클릭하면 미디어 패널로 이동하여 이러한 요소를 디버깅할 수 있습니다.

이 기능은 개발 중이며 향후 더욱 개선될 예정입니다. DevTools팀은 이러한 개선에 도움을 주신 준세오 (제레미) 유님께 감사의 말씀을 전합니다.

Chromium 문제: 1448214

미리 로드의 이름이 추측 로드로 변경되었습니다.

이전 용어의 남용을 방지하고 동작을 더 잘 반영하기 위해 애플리케이션 > 미리 로드의 이름이 추측 로드로 변경되었습니다. 예측 로드를 사용하면 웹사이트에서 탐색한 페이지 대부분을 사전 렌더링하고 미리 가져오기 위해 정의할 수 있는 예측 규칙에 따라 거의 즉각적인 페이지 로드를 사용할 수 있습니다.

예측 로드로 미리 로드 이름 바꾸기 전후

Chromium 문제: 1478888.

Lighthouse 11.2.0

이제 Lighthouse 패널에서 Lighthouse 11.2.0을 실행합니다. 변경사항 전체 목록을 확인하세요.

이번 업데이트에서는 실적 카테고리를 정비했습니다. 이제 실적 측정항목에 미칠 것으로 예상되는 영향을 기준으로 실적 통계의 점수가 매겨지고 우선순위가 부여됩니다. 또한 성능 점수 게이지에는 각 측정항목이 점수에 미치는 영향에 관한 자세한 정보가 포함됩니다.

성능 개선 전후 비교

DevTools에서 Lighthouse 패널 사용과 관련된 기본사항을 알아보려면 Lighthouse: 웹사이트 속도 최적화를 참고하세요.

Chromium 문제: 772558

접근성 개선

이 버전에서는 다음과 같이 접근성이 개선되었습니다.

이제 스크린 리더에서 소스 > 중단점 아래에 있는 체크박스의 상태 (선택 또는 선택 해제)를 알려줍니다.
이제 키보드를 사용하여 이러한 문제 숨기기 드롭다운 메뉴에 액세스할 수 있습니다.

Chromium 문제: 1488645, 1484918.

기타 주요 사항

다음은 이번 출시에서 주목할 만한 수정사항 및 개선사항입니다.

성능: 기록에서 가끔씩 LCP 표시기가 누락되는 문제를 수정했습니다. (1487136)
추측 로드: 네트워크 패널의 드롭다운 메뉴에서 타겟의 전체 URL을 수정했습니다. (1471020)
범위:
- 예쁘게 인쇄된 코드의 줄별 적용 범위가 수정되었습니다. (1464974)
- 이제 페이지 새로고침 시 적용 범위 정보가 업데이트됩니다 (1494457).
콘솔:
- 메시지에서 일부 텍스트 선택이 수정되었습니다. (1487449)
- 자동 완성 드롭다운이 깜박이는 문제를 수정했습니다. (1487453)
- 스택 경로와 스택 트레이스의 URL에 지원되는 괄호가 추가되었습니다. (1473926)
소스: TypeScript using 키워드의 구문 강조표시를 지원했습니다. (1490515)
이제 빠른 열기 메뉴에 비공개 메서드가 표시됩니다. (1492957)
애플리케이션 > 백그라운드 서비스: 이제 상단의 작업 모음에서 크기를 조절할 때 텍스트를 줄바꿈합니다. (1487276)
요소 > 스타일:
- 슬롯형 요소에 상속된 CSS 변수의 해상도가 수정되었습니다. (1492162)
- 이제 CSS 속성을 사용 중지할 때 구문 중단을 수정하기 위해 주석이 제거됩니다. (1101224)
네트워크: 이제 우선순위 열에 초기 우선순위에 대한 정보가 포함된 도움말이 표시됩니다 (대규모 요청 행을 선택하는 경우에도 동일하게 표시됨). (1495735)
지원 중단:
- 색상 형식 설정은 이전 버전에서 사용 중지되었으며 이제 삭제되었습니다.
- 재정의 간소화 (1473681) 이후 사용량이 적기 때문에 이제 소스의 모든 재정의 삭제 옵션이 삭제되었습니다.

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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