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

Sofia Emelianova
Sofia Emelianova

변경사항 탭에서 다음 항목에 대한 변경사항을 추적합니다.

Changes 탭에는 DevTools 내에서 변경한 내용이 표시됩니다. DevTools 또는 페이지를 새로고침하면 변경사항이 사라집니다.

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

DevTools가 로컬 소스에 변경사항을 쓰도록 하려면 작업공간으로 파일 수정 및 저장의 단계를 따르세요.

변경사항 탭 열기

변경사항 탭을 열려면 다음 안내를 따르세요.

  1. DevTools를 엽니다.

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

  3. changes를 입력하고 변경사항 표시를 선택한 다음 Enter 키를 누릅니다.

    변경사항 표시 명령어 실행

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

변경" width="800"height="460">

기본적으로 DevTools는 DevTools 창 하단의 변경사항 탭을 표시합니다.

변경사항 확인 및 이해하기

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

  1. DevTools를 엽니다.
  2. 소스를 변경합니다.

  3. 변경사항 탭을 열고 탭 오른쪽에 있는 파일을 선택합니다.

  4. 다음을 강조 표시하는 diff 출력을 확인합니다.

변경사항 탭에서 강조 표시된 차이점

변경사항 탭은 diff 출력을 자동으로 예쁘게 인쇄하므로 한 줄로 변경사항을 보기 위해 가로로 스크롤하지 않아도 됩니다.

CSS 변경사항 복사

요소 > 스타일에서 CSS를 변경한 경우 버튼 하나로 모든 변경사항을 복사할 수 있습니다.

  1. 변경사항 탭을 열고 탭 오른쪽에서 변경한 CSS 파일을 선택합니다.

    복사를 탭합니다.

  2. 변경사항 탭 하단에 있는 복사를 탭합니다. 복사 버튼을 클릭합니다.

파일의 모든 변경사항 되돌리기

파일의 변경사항을 되돌리려면 다음 단계를 따르세요.

  1. 변경사항 탭 왼쪽에서 되돌릴 변경사항이 있는 파일을 선택합니다.
  2. 하단의 작업 표시줄에서 실행취소 모든 변경사항을 현재 파일로 되돌리기를 클릭합니다.

되돌리기 버튼