변경사항: HTML, CSS 및 자바스크립트 변경사항 추적

Sofia Emelianova

변경사항 패널을 사용하여 DevTools 내에서 변경된 코드를 추적합니다.

개요

변경사항 패널을 사용하여 다음 항목에 대한 변경사항을 추적합니다.

• 로컬 재정의가 사용 설정된 소스의 HTML
• 요소 > 스타일 또는 소스의 CSS
• 소스의 JavaScript

변경사항 패널에는 DevTools 내에서 이루어진 변경사항만 표시됩니다. DevTools 또는 페이지를 새로고침하면 변경사항이 사라집니다.

페이지 로드 전후에 DevTools의 변경사항이 유지되도록 하려면 로컬 재정의의 단계를 따르세요.

DevTools에서 로컬 소스에 변경사항을 작성하도록 하려면 Workspaces로 파일 수정 및 저장의 단계를 따르세요.

변경사항 패널 열기

변경사항 패널을 열려면 다음 단계를 따르세요.

1. DevTools를 엽니다.

2. Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러 명령어 메뉴를 엽니다.

3. changes를 입력하고 Show Changes를 선택한 다음 Enter 키를 누릅니다.

   

또는 오른쪽 상단에서 DevTools 맞춤설정 및 제어 > 도구 더보기 > 변경사항을 클릭합니다.

기본적으로 DevTools는 DevTools 창 하단의 Drawer에 Changes 패널을 표시합니다.