DevTools의 새로운 기능 (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

누락된 스타일시트의 디버깅 개선

DevTools에는 누락된 스타일시트의 문제를 더 빠르게 식별하고 디버그하는 데 도움이 되는 여러 개선사항이 있습니다.

  • 소스 > 혼동을 최소화하기 위해 이제 페이지 트리에 성공적으로 배포되고 로드된 스타일시트만 표시됩니다.
  • 소스 > 이제 편집기에서 실패한 @import, url(), href 문 옆에 밑줄을 표시하고 인라인 오류 도움말을 표시합니다.

소스 패널에 도움말이 있는 밑줄이 표시된 문

  • 이제 콘솔은 실패한 요청에 대한 링크 외에도 로드되지 못한 스타일시트를 참조하는 정확한 행으로 연결되는 링크를 제공합니다.

콘솔은 문제가 있는 문이 포함된 정확한 행으로 연결되는 링크를 제공합니다.

  • Network 패널은 로드하지 못한 스타일시트를 참조하는 정확한 줄의 링크로 Initiator 열을 일관되게 채웁니다.

  • Issues 패널에는 깨진 URL, 실패한 요청, 잘못 배치된 @import 문 등 모든 스타일시트 로드 문제가 나열됩니다.

소스 및 요청에 대한 링크가 있는 문제 패널

Chromium 문제: 1440626, 1442198, 1453611

요소의 선형 타이밍 지원 > 스타일 > 이징 편집기

요소의 이징 편집기. 이징 편집기 > 스타일을 사용하면 클릭 한 번으로 transition-timing-function 및 animation-timing-function 값을 조정할 수 있습니다. 이 버전에서는 이징 편집기. 이징 편집기가 선형 타이밍 함수를 지원합니다.

선형 타이밍을 구성하려면 선형 선택 도구 버튼을 클릭합니다. 기준점을 추가하려면 선의 아무 곳이나 클릭합니다. 기준점을 삭제하려면 기준점을 더블클릭합니다. 사전 설정(linear, elastic, bounce, emphasized) 중 하나를 선택할 수도 있습니다. 선형 조정의 작동 방식을 확인하려면 동영상을 시청하세요.

Chromium 문제: 1421241

스토리지 버킷 지원 및 메타데이터 뷰

애플리케이션 > 스토리지 섹션에는 스토리지 버킷이 지원됩니다. 스토리지 버킷은 서로 독립적이므로 데이터 슬라이스에 대한 제거 우선순위를 지정하여 가장 중요한 데이터가 삭제되지 않도록 할 수 있습니다. 각 스토리지 버킷은 IndexedDB 및 CacheStorage와 같이 설정된 스토리지 API와 관련된 데이터를 저장할 수 있습니다.

기능을 테스트하려면 이 피들을 확인하세요. DevTools를 열고 Application으로 이동합니다. 스토리지 > 색인이 생성된 DB를 다운로드하고 코드를 실행합니다. 이제 DevTools에 버킷과 버킷 콘텐츠가 표시됩니다. 메타데이터를 볼 버킷을 선택하세요.

버킷의 메타데이터 보기

이제 통합 메타데이터 뷰를 로컬, 세션, 캐시 저장소 섹션에서 사용할 수 있습니다.

새 통합 메타데이터 뷰

Chromium 문제: 1448011, 1406017

Lighthouse 10.3.0

이제 Lighthouse 패널에서 Lighthouse 10.3.0을 실행합니다. 특히 이 버전에서는 표 헤더 및 캡션, 입력 버튼 이름, 언어 불일치 등 다양한 접근성 문제를 캡처하는 4가지 새로운 감사가 추가되었습니다. 예를 들면 다음과 같습니다.

표 헤더 확인을 통과했습니다.

변경사항의 전체 목록을 참고하세요. DevTools에서 Lighthouse 패널을 사용하는 기본적인 방법을 알아보려면 Lighthouse: 웹사이트 속도 최적화를 참고하세요.

Chromium 문제: 772558

접근성: 키보드 명령어 및 개선된 화면 읽기

이제 DevTools에서 더 많은 단축키를 지원하고 스크린 리더 관련 문제를 해결합니다.

  • 이제 Windows 및 많은 Linux 배포판에서 Shift+F10과 같은 단축키로 컨텍스트 메뉴를 열 수 있습니다. MacOS 단축키의 경우 대체 포인터 작업을 참고하세요.
  • 스크린 리더 애플리케이션: <ph type="x-smartling-placeholder">
      </ph>
    • 체크박스 라벨을 불필요하게 두 번 알리지 않습니다.
    • '열 헤더 읽기'를 누르면 정렬 가능한 열의 열 헤더 이름이 표시됩니다. 단축키를 사용합니다.

DevTools팀은 이러한 개선을 실현해 주신 얀링 왕과 Elorm Coch에게 감사의 마음을 전합니다.

Chromium 문제: 1446482, 1414952

기타 주요 정보

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

  • 네트워크 패널은 타임라인과 상호작용한 후에도 계속해서 네트워크 활동을 기록합니다 (1422552).
  • 이제 범위 패널에서 사전 렌더링 활성화 또는 뒤로-앞으로 캐시 탐색이 있었는지를 인식하고 새로고침하라는 메시지를 표시합니다 (1393057).
  • 이제 소스 > 키보드가 있는 Breakpoints 창: 위쪽 화살표, 아래쪽 화살표로 이동하고 Space를 눌러 선택 (1446150)
  • 네트워크 패널에서 HAR 파일 업로드 및 필터링 문제가 수정되었습니다 (1450622).
  • 이제 Performance 패널의 Flame Chart가 트레이스 사이에 약간의 간격을 두어 트레이스를 더 잘 렌더링합니다. (1452150)
  • 소스 맵에 삽입된 파일의 자동 매핑이 수정되었습니다. (1446383)

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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

DevTools의 새로운 기능

DevTools의 새로운 기능 시리즈에서 다룬 모든 내용 목록입니다.