변경사항: HTML, CSS 및 자바스크립트 변경사항 추적
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
Changes 패널을 사용하여 DevTools 내에서 변경한 코드를 추적합니다.
개요
변경사항 패널에서 다음 항목의 변경사항을 추적합니다.
Changes 패널에는 DevTools 내에서 변경한 사항만 표시됩니다. DevTools 또는 페이지를 새로고침하면 변경사항이 사라집니다.
페이지 로드 시 DevTools가 변경사항을 유지하도록 하려면 로컬 재정의의 단계를 따르세요.
DevTools가 로컬 소스에 변경사항을 쓰도록 하려면 작업공간으로 파일 수정 및 저장하기의 단계를 따르세요.
변경사항 패널 열기
변경사항 패널을 열려면 다음 안내를 따르세요.
DevTools를 엽니다.
Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러 명령어 메뉴를 엽니다.
changes
를 입력하고 변경사항 표시를 선택한 다음 Enter 키를 누릅니다.
또는 오른쪽 상단에서 DevTools 맞춤설정 및 제어 >를 클릭합니다. 도구 더보기 > 변경사항.
기본적으로 DevTools는 DevTools 창 하단의 창에 변경사항 패널을 표시합니다.
변경사항 확인 및 이해하기
변경사항을 보려면 다음 단계를 따르세요.
- DevTools를 엽니다.
소스를 변경합니다.
변경사항 패널을 열고 패널 오른쪽에서 파일을 선택합니다.
다음을 강조 표시하는 diff
출력을 확인합니다.
Changes 패널은 diff
출력을 자동으로 예쁘게 인쇄하므로 한 줄로 변경사항을 확인하기 위해 가로로 스크롤하지 않아도 됩니다.
CSS 변경사항 복사
요소 > 스타일을 사용하면 버튼 하나로 모든 스타일을 복사할 수 있습니다.
변경사항 패널을 열고 패널 오른쪽에서 변경한 CSS 파일을 선택합니다.
변경사항 패널 하단에 있는 복사 버튼을 클릭합니다.
파일의 모든 변경사항 되돌리기
파일의 변경사항을 되돌리려면 다음 단계를 따르세요.
- 변경사항 패널 왼쪽에서 되돌릴 변경사항이 있는 파일을 선택합니다.
- 하단의 작업 표시줄에서 모든 변경사항을 현재 파일로 되돌리기를 클릭합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-09-05(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2024-09-05(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2024-09-05(UTC)"],[],[]]