DevTools의 새로운 기능 (Chrome 113)

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

네트워크 응답 헤더 재정의

이제 네트워크 패널에서 응답 헤더를 재정의할 수 있습니다. 이전에는 HTTP 응답 헤더를 실험하려면 웹 서버에 액세스해야 했습니다.

응답 헤더 재정의를 사용하면 다음을 포함하되 이에 국한되지 않는 다양한 헤더의 수정사항을 로컬에서 프로토타입할 수 있습니다.

헤더를 재정의하려면 네트워크 > 헤더 > 응답 헤더로 이동하여 헤더 값 위로 마우스를 가져간 다음 수정을 클릭합니다. 아이콘을 클릭하고 수정합니다.

헤더 재정의로 CORS 오류가 수정되었습니다.

맞춤 헤더를 추가할 수도 있습니다.

맞춤 헤더를 추가합니다.

한곳에서 모든 재정의를 수정하려면 소스 > 재정의에서 .headers 파일을 수정합니다. 여기에서 재정의 규칙 추가를 클릭하여 와일드 카드 (*)를 사용하여 여러 요청을 재정의할 수도 있습니다.

모든 재정의를 수정합니다.

Chromium 문제: 1288023

Nuxt, Vite, Rollup 디버깅 개선

디버깅 중에 문제를 더 빠르게 파악할 수 있도록 향상된 스택 트레이스는 이제 Nuxt 3.3 이상에서 생성된 소스에서 가져온 프레임을 숨깁니다. DevTools는 이러한 프레임을 건너뜁니다.

  • 콘솔 트레이스의 프레임 N개 더 표시 링크 아래
  • 소스 > 호출 스택의 체크박스입니다. 무시 목록 프레임 표시를 선택합니다.

서드 파티 무시 목록을 사용 설정하기 전과 후의 스택 트레이스

이러한 개선사항을 제공하기 위해 DevTools, Nuxt, Vite, Rollup팀이 협력하여 x_google_ignoreList 소스 맵 확장 프로그램을 채택했습니다.

DevTools팀은 이를 가능하게 해 주신 Nuxt, Vite, Rollup팀에 감사의 인사를 전합니다. 이번 구현의 성공에 필수적인 노력과 협조에 감사드립니다. 참여해 주셔서 다시 한번 감사드립니다.

요소 > 스타일의 CSS 개선사항

잘못된 CSS 속성 및 값

CSS 문제를 더 빠르게 진단할 수 있도록 이제 스타일 창에 다음이 취소선으로 표시됩니다.

  • CSS 속성이 잘못된 경우 전체 CSS 선언 (속성 및 값)
  • CSS 속성이 유효하지만 값이 잘못된 경우에만 값을 반환합니다.

잘못된 속성 이름 및 잘못된 속성 값

DevTools팀은 이 개선사항을 제공해 주신 이시(一丝)님께 감사의 인사를 전합니다.

애니메이션 약어 속성의 키프레임 링크

이제 animation 축약형 CSS 속성에 상응하는 @keyframes at-rules 링크가 포함되어 있으므로 스타일 창을 더 빠르게 탐색할 수 있습니다.

애니메이션 축약형 속성의 키프레임 링크입니다.

Chromium 문제: 1420656

새로운 콘솔 설정: Enter 시 자동 완성

이전 버전 (112)부터 Enter 키를 누르면 자동 완성 추천이 적용되도록 DevTools 콘솔을 구성할 수 있습니다.

기본적으로 자동 완성 추천을 수락하려면 Tab 또는 Arrow right 키를 누르면 됩니다. Enter로도 자동 완성하려면 설정을 탭합니다. 설정 > 콘솔 > 체크박스입니다. Enter 키를 누르면 자동 완성 제안을 수락을 사용 설정합니다.

설정의 해당 체크박스

또한 다른 설정 텍스트가 더 사용자 친화적으로 변경되었습니다. 체크박스입니다. 코드 평가를 사용자 작업으로 취급

Chromium 문제: 1276960

명령 메뉴에 작성된 파일 강조 표시

이제 명령어 메뉴의 빠른 열기 대화상자에서 무시 목록에 추가된 서드 파티 파일이 비활성화되어 작성한 파일에 더 중점을 둘 수 있습니다.

변경 전후에 빠른 열기 대화상자에 있는 무시 목록에 있는 스크립트

Chromium 문제: 1424345

JavaScript 프로파일러 지원 중단: 두 번째 단계

DevTools팀은 빠르면 Chrome 58부터 JavaScript 프로파일러를 지원 중단하고 Node.js 및 Deno 개발자가 JavaScript CPU 성능을 프로파일링할 때 성능 패널을 사용하도록 계획했습니다.

DevTools 버전 113에서는 4단계 JavaScript 프로파일러 지원 중단의 두 번째 단계가 시작됩니다. 이 단계에서는 패널을 열 수 있지만 UI는 더 이상 사용할 수 없습니다.

CPU 성능을 프로파일링하려면 성능 패널로 이동을 클릭합니다.

JavaScript 프로파일러 지원 중단

Chromium 문제: 1354548

기타 하이라이트

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

  • 소스 패널의 멋진 출력에서 유니코드 문자가 포함된 변수 이름을 잘못 처리하는 버그가 수정되었습니다 (1425055).
  • 문제 탭에 비표준 HTML 값과 관련된 자동 완성 문제에 관한 새로운 메시지가 추가되었습니다 (1399414).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

다음 옵션을 사용하여 DevTools와 관련된 새로운 기능, 업데이트 또는 기타 사항을 논의하세요.

DevTools의 새로운 기능

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