[Chrome] 개발자 도구 사용법

알찬코·2023년 12월 20일
0

개발 환경 구축

목록 보기
4/6
post-thumbnail
post-custom-banner

1. 환경설정

오른쪽 상단 ⚙ 아이콘 클릭 → 테마, 언어 선택

  • 기본값 복원 및 새로고침 클릭 시 설정 초기화됨

2. 문서 수정 및 적용

문서 덮어쓰기를 통해 새로고침 시에도 로컬에서 적용한 내용이 변경되지 않음

  1. 마우스 오른쪽 클릭 → 검사 ( F12 )

  2. 개발자 도구 옆에 소스(Sources) 탭 선택 후 재정의(Overrides) 클릭

  • 재정의가 안보이면 화살표( >> ) 로 목록 열어서 찾기
  1. 재정의할 폴더 선택(Select folder for overrides) 클릭 → 수정사항을 저장할 경로의 폴더 선택하기
  2. 액세스 요청 허용
  3. 페이지(Page) 선택 후 수정할 문서 마우스 오른쪽 클릭 → 콘텐츠 재정의(Override content) 클릭
  4. 문서 내용 수정 후 파일 마우스 오른쪽 클릭 → 다른 이름으로 저장
  5. 아까 재정의로 저장했던 폴더 경로로 가서 문서 덮어쓰기
  6. 새로고침해서 수정한 내용이 들어갔는지 확인
post-custom-banner

0개의 댓글