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

DevTools의 새로운 기능 (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

네트워크 응답 헤더 재정의

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

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

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

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

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

커스텀 헤더를 추가합니다.

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

모든 재정의 수정

Chromium 문제: 1288023

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

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

Console 트레이스의 N more frame(프레임 N개 더보기) 링크 아래
소스 > 호출 스택의 무시 목록에 포함된 프레임 표시에서

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

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

이를 가능하게 해 주신 Nuxt, Vite, Rollup 팀에 감사의 말씀을 전합니다. 성공적인 구현을 위해 협조해 주셔서 감사합니다. 참여해 주셔서 다시 한번 감사드립니다.

요소 > 스타일의 CSS 개선

CSS 속성 및 값이 잘못되었습니다.

CSS 문제를 더 빠르게 진단할 수 있도록 이제 스타일 창에 줄이 그어진 것입니다.

CSS 속성이 잘못된 경우 전체 CSS 선언 (속성 및 값)
CSS 속성은 유효하지만 값이 유효하지 않은 경우에만 해당하는 값입니다.

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

DevTools팀은 이처럼 개선된 기능을 제공해 주신 이시(丝)님께 감사의 말씀을 전합니다.

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

이제 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 개발자가 Performance 패널을 사용하여 JavaScript CPU 성능을 프로파일링하도록 할 계획입니다.

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

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

JavaScript 프로파일러 지원 중단

Chromium 문제: 1354548.

기타 주요 사항

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

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

미리보기 채널 다운로드

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

Chrome DevTools팀에 문의하기

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

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