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

소피아 에멜리아노바
소피아 에멜리아노바
GitHub

변경사항 탭에서 다음 항목에 대한 변경사항을 추적할 수 있습니다.

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

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

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

변경사항 탭 열기

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

  1. DevTools를 엽니다.

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

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

    변경사항 표시 명령어 실행

또는 오른쪽 상단에서 Customize and Control DevTools > More tools > Changes를 클릭합니다.

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

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

변경사항 보기 및 이해

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

  1. DevTools를 엽니다.

  2. 소스를 변경합니다.

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

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

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

Changes 탭에서는 diff 출력이 자동으로 올바르게 인쇄되므로 변경사항을 한 줄로 확인하기 위해 가로로 스크롤할 필요가 없습니다.

CSS 변경사항 복사

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

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

    복사를 탭합니다.

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

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

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

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

되돌리기 버튼