Chrome DevTools의 Issues 패널은 콘솔의 알림 피로와 복잡한 요소를 줄여줍니다. 이를 사용하여 쿠키 문제, 혼합 콘텐츠 등 브라우저에서 감지한 문제에 대한 해결책을 찾을 수 있습니다.
현재 문제 패널에서 지원되는 항목은 다음과 같습니다.
- 쿠키 문제
- 혼합 콘텐츠
- COEP 문제
- CORS 오류
- 쿼크 모드 문제
- (미리보기) 저대비 문제
- 신뢰할 수 있는 웹 활동 문제
- 스타일시트 로드 문제
- 잘못된
@propertyCSS 규칙 - 콘텐츠 보안 정책 위반
- 자동 완성 속성 문제
Chrome 향후 버전에서는 더 많은 문제 유형을 지원할 예정입니다.
문제 패널 열기
- 해결할 문제가 있는 페이지(예: samesite-sandbox.glitch.me)를 방문합니다.
- DevTools를 엽니다.
상단의 작업 모음 오른쪽에 있는
설정 옆의 Open Issues 버튼을 클릭합니다. 문제의 심각도에 따라 버튼에 빨간색 
, 노란색 
또는 파란색 
아이콘이 표시될 수 있습니다.
또는
도구 더보기 메뉴에서 문제를 선택합니다.
문제 패널에서 페이지를 새로고침하면 더 많은 문제를 확인할 수 있습니다. 이 시간은 페이지 로드 중에 발생합니다.
콘솔에는 브라우저에서 보고한 문제도 표시될 수 있습니다. 그러나 이러한 문제 (예: 아래 스크린샷의 쿠키 경고)는 이해하기 어렵습니다. 이 문제를 해결하기 위해 무엇을 해야 할지 명확하지 않습니다.
반면 문제 패널은 활용 가능한 분석 정보를 제공합니다.
문제 패널에서 항목 보기
문제 패널에는 구조화된 방식으로 집계되고 실행 가능한 방식으로 브라우저의 경고가 표시됩니다.
문제 패널의 항목을 클릭하여 문제를 펼치면 해결 방법에 관한 안내를 확인하고 영향을 받는 리소스를 확인할 수 있습니다.
각 항목에는 4가지 구성요소가 있습니다.
- 문제를 설명하는 헤드라인
- 맥락과 해결 방법을 제공하는 설명입니다.
- 영향을 받은 리소스 섹션. Network, Sources, Elements, 기타 패널 등 적절한 DevTools 컨텍스트 내의 리소스로 연결됩니다.
- 추가 안내 링크
해당하는 리소스의 항목을 클릭하여 컨텍스트 내에서 문제를 확인하세요.
종류별로 문제 그룹화
Issues 패널은 문제별로 영향을 받는 리소스 수를 집계하여 헤드라인 옆에 표시합니다. 또한 심각도에 따라 다음 세 가지 유형의 그룹으로 문제를 정리할 수 있습니다.
Chrome에서 보고하는 페이지 오류입니다.
지원 중단과 같은 브레이킹 체인지.
DevTools가 제안하는 개선사항
문제를 그룹화하려면 Issues 패널 상단의 작업 모음에서 
Group by kind를 선택합니다.
타사 문제 포함
문제 패널에는 기본적으로 서드 파티 쿠키 문제가 표시됩니다.
영향을 받은 리소스 섹션에서 링크가 누락된 서드 파티 쿠키 문제를 찾을 수 있습니다.
이러한 문제를 숨기려면 문제 패널 상단의 작업 표시줄에서 
서드 파티 쿠키 문제 포함을 선택 해제합니다.
문제 숨기기
문제를 숨기려면 문제 옆에 있는 점 3개로 된 
메뉴에서 이러한 문제 숨기기를 선택합니다.
숨겨진 문제 목록을 보려면 숨겨진 문제 섹션까지 아래로 스크롤하여 펼칩니다.
모든 문제를 표시하려면 모두 숨기기 해제를 클릭합니다. 특정 문제를 표시하려면 문제 옆에 있는 점 3개로 된 
메뉴에서 이러한 문제 숨기기 해제를 선택합니다.
또한 그룹화를 사용 설정하면 그룹 옆에 있는 동일한 점 3개로 된 메뉴를 사용하여 문제 그룹 전체를 숨길 수 있습니다.
컨텍스트 내에서 문제 보기
문제를 조사하려면 다음을 실행합니다.
영향을 받은 리소스 섹션에서 리소스 링크를 클릭하여 DevTools 내 적절한 컨텍스트에서 항목을 확인합니다. 이 예시에서는
samesite-sandbox.glitch.me를 클릭하여 해당 요청에 첨부된 쿠키를 표시합니다. 링크를 클릭하면 네트워크 패널로 이동합니다.
스크롤하여 문제가 있는 항목(이 경우 쿠키
ck02)을 봅니다. 오른쪽에 있는
정보 아이콘 위로 마우스를 가져가면 문제와 해결 방법을 확인할 수 있습니다.