서드 파티 쿠키 단계적 지원 중단
사이트에서 서드 파티 쿠키를 사용하고 있다면 지원 중단이 다가오고 있으니 조치를 취해야 합니다. 영향을 받는 쿠키에 대해 취해야 할 조치를 알아보려면 서드 파티 쿠키 지원 중단에 대비하기를 참고하세요.
모든 Chrome 사용자에 대해 서드 파티 쿠키 문제 포함 체크박스가 기본적으로 사용 설정되어 있으므로 이제 문제 탭에서 예정된 서드 파티 쿠키 지원 중단 및 단계적 중단으로 인해 영향을 받는 쿠키에 관해 경고합니다. 언제든지 체크박스를 선택 해제하여 이러한 문제가 표시되지 않도록 할 수 있습니다.
Chromium 문제: 1466310
개인 정보 보호 샌드박스 분석 도구로 웹사이트의 쿠키 분석
DevTools용 개인 정보 보호 샌드박스 분석 도구 확장 프로그램은 최신 사전 출시 버전 0.3.2로 활발하게 개발 중입니다. 이 도구를 사용하면 웹사이트에서 쿠키를 사용하는 방식을 파악하고 새로운 개인 정보 보호 Chrome API에 관한 안내를 확인할 수 있습니다.
쿠키를 분석하려면 다음 단계를 따르세요.
- Chrome에 확장 프로그램을 설치합니다.
- 최적의 분석을 위해 단일 탭에서 웹사이트를 엽니다.
- DevTools를 열고 개인 정보 보호 샌드박스 패널로 이동합니다. 이 패널은 상단의
드롭다운 버튼 뒤에 숨겨져 있을 수 있습니다.
- 쿠키 섹션을 열고 이 탭 분석을 클릭합니다. 도구에서 쿠키를 찾지 못한 경우 페이지를 새로고침해 보세요.
개인 정보 보호 샌드박스 분석 도구 (PSAT) 사용 방법에 관한 자세한 내용은 다음을 참고하세요.
- PSAT 사용 방법
- 지원 중단이 적용된 후 발생할 수 있는 상황을 예측하려면 평가 환경을 설정하세요.
- 영향을 받는 측면을 확인하려면 일반 분석 작업을 참고하세요.
- 분석, 전자상거래, SSO 서비스, 삽입된 콘텐츠 등 일반적인 시나리오를 분석하는 방법을 알아보려면 분석 시나리오의 데모 예시를 확인하세요.
또한 문제 신고에 관한 안내를 참고하세요.
무시 목록 개선
node_modules의 기본 제외 패턴
이 버전에서는 설정 > 무시 목록에서 기본 정규식을 맞춤 제외 규칙으로 사용할 수 있습니다. 이제 코드에만 집중할 수 있도록 디버거에서 기본적으로
/node_modules/ 및 /bower_components/의 스크립트를 건너뜁니다. 언제든지 설정에서 이 규칙을 사용 중지할 수 있습니다.
Chromium 문제: 1496301
무시되지 않는 코드에서 예외사항이 포착/통과하는 경우 실행이 중지됨
포착된 예외에서 일시중지가 선택된 상태로 코드를 디버그하면 이제 디버거가 동기식 및 비동기식으로 포착된 다음 예외에서 실행을 중지합니다.
- 호출 스택에서 무시되지 않은 프레임에서 포착된 예외입니다.
- 호출 스택에서 무시되지 않은 프레임을 통과하는 포착된 예외 예를 들어 스크린샷을 참고하세요.
이 동작을 테스트하려면 이 데모 페이지를 여세요.
- DevTools > Sources를 열고
hidden폴더를 무시 목록에 추가하고Pause on caught exceptions를 선택합니다.
- 페이지의 '포착됨' 시나리오 목록에서 다양한 버튼을 클릭하고 언급된 사례에서 실행이 일시중지되는지 확인합니다.
비동기 호출에서 포착된 예외 또는 포착되지 않은 예외 (선택된 경우)에서 실행을 일시중지하기 위해 디버거는 프로미스 전반에서 거부 핸들러를 찾습니다. 이 버전부터 디버거는 Promise.finally()이 예외를 포착할 것으로 더 이상 예측하지 않습니다. try...finally 블록이 예외를 포착하지 않는 것과 유사합니다.
소스 맵에서 x_google_ignoreList이 ignoreList로 이름이 변경됨
소스 맵 사양이 x_google_ignoreList 대신 ignoreList 필드를 채택했으며 이제 DevTools에서 이전 이름의 대체와 함께 새 이름을 지원합니다. 이제 프레임워크와 번들러가 새 필드 이름을 사용할 수 있습니다.
소스 맵을 사용하면 웹사이트에서 제공하는 축소된 코드 대신 작성한 코드를 디버그할 수 있습니다.
소스 맵에 대한 자세한 내용은 다음을 참고하세요.
원격 디버깅 중 새로운 입력 모드 전환
이제 Chrome 탭을 원격으로 디버깅할 때 터치와 마우스 입력 간에 전환할 수 있습니다. 예를 들어 --remote-debugging-port=<port>로 Chrome 인스턴스를 실행하고 chrome://inspect/#devices를 통해 이 네트워크 타겟에 연결하는 경우입니다.
동영상을 시청하여 입력 모드 전환을 확인하세요.
Chromium 문제: 1410433
이제 요소 패널에 #document 노드의 URL이 표시됨
이제 iframe을 더 쉽게 디버깅할 수 있도록 요소 패널에 #document 노드 옆에 documentURL가 표시됩니다.
Chromium 문제: 1376976
애플리케이션 패널의 유효한 콘텐츠 보안 정책
이제 검사된 프레임의 콘텐츠 보안 정책 (CSP) 세부정보를 볼 수 있습니다. 세부정보를 보려면 애플리케이션 > 프레임으로 이동하여 프레임을 선택하고 콘텐츠 보안 정책 (CSP) 섹션까지 아래로 스크롤합니다.
Chromium 문제: 1424714
애니메이션 디버깅 개선
이제 애니메이션 탭에서 다음 작업을 할 수 있습니다.
- 타임라인 헤더의 아무 곳이나 클릭하여 플레이헤드를 설정합니다. 애니메이션이 이미 재생 중인 경우 계속 재생되고 그렇지 않으면 중지됩니다. 이전에는 드래그해야 했습니다.
- 전체 애니메이션 이름을 볼 수 있도록 이름 열의 크기를 조절합니다.
소스의 '이 코드를 신뢰할 수 있나요?' 대화상자와 콘솔의 자체 XSS 경고
코드를 붙여넣을 때 자체 XSS에 관한 경고 표시 실험이 기본적으로 사용 설정되었습니다. Self-XSS (셀프 교차 사이트 스크립팅)는 악성 코드를 DevTools에 붙여넣도록 사용자를 속이는 공격으로, 공격자가 사용자의 웹 계정과 개인 정보를 제어할 수 있도록 합니다.
새 DevTools 사용자가 코드를 붙여넣으려고 하면 이제 Sources 패널에 이 코드를 신뢰하시겠습니까? 대화상자가 표시되고 Console에 유사한 경고가 표시됩니다. 이해하고 직접 검토한 코드만 붙여넣으세요. 붙여넣으려면 메시지가 표시될 때 allow pasting를 입력합니다. 한 번 붙여넣기가 허용되면 경고가 다시 표시되지 않습니다.
Chromium 문제: 345205
웹 Worker 및 Worklet의 이벤트 리스너 중단점
소스 > 이벤트 리스너 중단점에서 이벤트 중단점을 설정하면 웹사이트에서 이 이벤트가 발생할 때 일시중지되는 것 외에도 이제 Shared Storage Worklet을 비롯한 모든 유형의 웹 Worker 또는 worklet에서 해당 이벤트가 발생할 때도 디버거가 일시중지됩니다.
Chromium 문제: 1445175
<audio> 및 <video>의 새로운 미디어 배지
이제 요소 패널에서 <audio> 및 <video> 요소에 대해 새로운 미디어 배지를 사용 설정할 수 있습니다. 배지를 클릭하면 미디어 패널로 이동하여 이러한 요소를 디버그할 수 있습니다.
이 기능은 개발 중이며 향후 개선될 예정입니다. 이 개선사항을 구현해 주신 유준서 (제레미)님께 DevTools팀에서 감사의 말씀을 전합니다.
Chromium 문제: 1448214
미리 로드가 추측 로드로 이름이 변경됨
이전 용어의 과도한 사용을 방지하고 동작을 더 잘 반영하기 위해 애플리케이션 > 미리 로드가 추측 로드로 이름이 변경되었습니다. 예측 로드를 사용하면 웹사이트에 대해 정의할 수 있는 예측 규칙에 따라 거의 즉각적인 페이지 로드가 가능합니다. 이를 통해 가장 많이 탐색되는 페이지를 사전 렌더링하고 사전 가져올 수 있습니다.
Chromium 문제: 1478888
Lighthouse 11.2.0
이제 Lighthouse 패널에서 Lighthouse 11.2.0이 실행됩니다. 전체 변경사항 목록을 참고하세요.
이 업데이트에는 성능 카테고리 전면 개편이 포함되어 있습니다. 이제 실적 통계는 실적 측정항목에 미치는 예상 영향을 기준으로 점수가 매겨지고 우선순위가 지정됩니다. 또한 성능 점수 게이지에는 각 측정항목이 점수에 미치는 영향에 관한 자세한 정보가 포함됩니다.
DevTools에서 Lighthouse 패널을 사용하는 기본사항을 알아보려면