이 페이지는 Cloud Translation API를 통해 번역되었습니다.

DevTools의 새로운 기능 (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

네트워크 응답 헤더 재정의

이제 Network 패널에서 응답 헤더를 재정의할 수 있습니다. 이전에는 HTTP 응답 헤더를 실험하려면 웹 서버에 대한 액세스 권한이 필요했습니다.

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

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

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

커스텀 헤더를 추가할 수도 있습니다.

맞춤 헤더를 추가합니다.

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

모든 재정의 수정

Chromium 문제: 1288023

Nuxt, Vite, Rollup 디버깅 개선사항

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

콘솔 trace의 프레임 N개 더 표시 링크
소스 > 호출 스택의 무시 목록에 포함된 프레임 표시 아래

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

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

DevTools팀은 이를 가능하게 해 주신 Nuxt, Vite, Rollup팀에 감사를 전하고 싶습니다. 성공적인 구현을 위해 노력해 주셔서 감사합니다. 참여해 주셔서 다시 한번 감사드립니다.

요소의 CSS 개선 > 스타일

잘못된 CSS 속성 및 값

CSS 문제를 더 빠르게 진단할 수 있도록 이제 Styles 창에 줄이 그어진 채로 표시됩니다.

CSS 속성이 잘못된 경우 전체 CSS 선언 (속성 and 값)
CSS 속성이 유효하지만 값이 잘못된 경우의 값만 됩니다.

속성 이름이 올바르지 않으며 속성 값이 잘못되었습니다.

DevTools팀은 이러한 개선을 이루게 해주신 Yisi(우수사례)님께 감사의 인사를 전하고자 합니다.

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

이제 animation 약식 CSS 속성에 상응하는 @keyframes 규칙으로 연결되는 링크가 포함되어 스타일 창을 더 빠르게 탐색할 수 있습니다.

애니메이션 약식 속성의 키 프레임에 대한 링크입니다.

Chromium 문제: 1420656

새 콘솔 설정: Enter 입력 시 자동 완성

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

기본적으로 Tab 또는 Arrow right를 눌러 자동 완성 추천 용어를 사용할 수 있습니다. Enter로도 자동 완성하려면 설정 >을 사용 설정합니다. 콘솔 > Enter 입력 시 자동 완성 추천 수락.

설정에서 해당 체크박스.

또한 이제 다른 설정 텍스트가 더욱 사용자 친화적으로 변경되었습니다. 코드 평가를 사용자 작업으로 처리를 참조하세요.

Chromium 문제: 1276960

이제 작성한 명령어 메뉴의 빠른 열기 대화상자에서 무시 목록의 서드 파티 파일이 회색으로 바뀌고 작성한 파일이 더욱 강조됩니다.

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

Chromium 문제: 1424345

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

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

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

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

JavaScript 프로파일러 지원 중단

Chromium 문제: 1354548

기타 주요 정보

다음은 이번 버전에서 주목할 만한 수정사항입니다.

Sources 패널에서 프리티 프린팅 시 유니코드 문자가 포함된 변수 이름을 잘못 처리하는 버그가 수정되었습니다. (1425055)
문제 탭에 비표준 HTML 값 (1399414)과 관련된 자동 완성 문제에 대한 새 메시지가 추가되었습니다.

미리보기 채널 다운로드

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

Chrome DevTools 팀에 문의하기

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

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