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 소스 맵 확장 프로그램을 채택했습니다.

이 기능을 구현할 수 있도록 지원해 주신 Nuxt, Vite, Rollup팀에 감사의 말씀을 전합니다. 이번 구현의 성공에 필수적인 노력을 기울여 주시고 협업해 주셔서 감사합니다. 참여해 주셔서 다시 한번 감사드립니다.

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

잘못된 CSS 속성 및 값

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

잘못된 속성 이름과 잘못된 속성 값입니다.

이 개선사항을 구현해 주신 Yisi(一丝)님께 DevTools팀에서 감사의 말씀을 전합니다.

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

이제 animation 약식 CSS 속성에 해당하는 @keyframes at-rule 링크가 포함되어 스타일 창을 더 빠르게 탐색할 수 있습니다.

애니메이션 약식 속성의 키 프레임에 연결됩니다.

Chromium 문제: 1420656

새 콘솔 설정: Enter 키를 누르면 자동 완성

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

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

설정의 해당 체크박스

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

Chromium 문제: 1276960

명령어 메뉴에서 작성된 파일 강조

이제 명령어 메뉴의 빠른 열기 대화상자에서 무시 목록에 있는 서드 파티 파일이 회색으로 표시되어 사용자가 작성한 파일이 더 강조됩니다.

변경 전후의 빠른 열기 대화상자에서 무시 목록에 추가된 스크립트

Chromium 문제: 1424345

JavaScript 프로파일러 지원 중단: 2단계

Chrome 58부터 개발자 도구팀은 최종적으로 JavaScript 프로파일러를 지원 중단하고 Node.js 및 Deno 개발자가 성능 패널을 사용하여 JavaScript CPU 성능을 프로파일링하도록 계획했습니다.

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

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

JavaScript 프로파일러 지원 중단

Chromium 문제: 1354548

기타 주요 내용

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

  • 소스 패널의 예쁘게 인쇄 기능이 유니코드 문자가 포함된 변수 이름을 잘못 처리하는 버그가 수정되었습니다 (1425055).
  • 문제 탭에 비표준 HTML 값에 관한 자동 완성 문제에 대한 새 메시지가 추가되었습니다 (1399414).

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

DevTools의 새로운 기능

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