Chrome DevTools의 Sources 패널을 사용하여 다음을 수행합니다.
- 파일 보기
- CSS 및 JavaScript 수정
- 모든 페이지에서 실행할 수 있는 자바스크립트 스니펫을 만들고 저장합니다. 스니펫은 북마크릿과 유사합니다.
- 자바스크립트 디버깅
- 작업공간을 설정하면 DevTools에서 변경한 내용이 파일 시스템의 코드에 저장됩니다.
파일 보기
페이지 창을 사용하여 페이지가 로드한 모든 리소스를 볼 수 있습니다.
페이지 창의 구성 방식은 다음과 같습니다.
- 위 스크린샷에서
top
와 같은 최상위 수준은 HTML 프레임을 나타냅니다. 방문하는 모든 페이지에top
가 표시됩니다.top
는 기본 문서 프레임을 나타냅니다. - 위 스크린샷에서
developers.google.com
와 같은 두 번째 수준은 출처를 나타냅니다. - 세 번째 수준, 네 번째 수준 등은 해당 출처에서 로드된 디렉터리와 리소스를 나타냅니다. 예를 들어 위 스크린샷에서
devsite-googler-button
리소스의 전체 경로는developers.google.com/_static/19aa27122b/css/devsite-googler-button
입니다.
Page 창에서 파일을 클릭하여 Editor 창에서 콘텐츠를 확인합니다. 모든 유형의 파일을 볼 수 있습니다. 이미지의 경우 이미지 미리보기가 표시됩니다.
CSS 및 자바스크립트 수정
Editor 창을 사용하여 CSS 및 JavaScript를 수정합니다. DevTools가 페이지를 업데이트하여 새 코드를 실행합니다.
편집기는 디버깅에도 도움이 됩니다. 예를 들어 실패한 CSS @import
및 url()
문, 잘못된 URL이 있는 HTML href
속성 등 구문 오류와 기타 문제 옆에 밑줄을 표시하고 인라인 오류 도움말을 표시합니다.
요소의 background-color
를 수정하면 변경사항이 즉시 적용됩니다.
자바스크립트 변경사항을 적용하려면 Command+S (Mac) 또는 Control+S (Windows, Linux)를 누르세요. DevTools는 스크립트를 재실행하지 않으므로 적용되는 JavaScript 변경 사항은 함수 내에서 변경한 사항뿐입니다. 예를 들어 console.log('A')
는 실행되지 않지만 console.log('B')
는 실행되는 방식을 참고하세요.
변경 후 DevTools가 전체 스크립트를 다시 실행하면 A
텍스트가 콘솔에 로깅되었을 것입니다.
DevTools는 페이지를 새로고침하면 CSS 및 JavaScript 변경 사항을 삭제합니다. 파일 시스템에 변경사항을 저장하는 방법을 알아보려면 작업공간 설정을 참조하세요.
스니펫 생성, 저장, 실행
스니펫은 모든 페이지에서 실행할 수 있는 스크립트입니다. jQuery 라이브러리를 페이지에 삽입하고 콘솔에서 jQuery 명령어를 실행할 수 있도록 콘솔에 다음 코드를 반복적으로 입력한다고 가정해 보겠습니다.
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);
대신 이 코드를 스니펫에 저장하고 필요할 때 언제든지 버튼 클릭 몇 번으로 실행할 수 있습니다. DevTools가 스니펫을 파일 시스템에 저장합니다. 예를 들어 jQuery 라이브러리를 페이지에 삽입하는 스니펫을 검사합니다.
스니펫을 실행하는 방법은 다음과 같습니다.
- 스니펫 창에서 파일을 열고 하단의 작업 모음에서 실행 을 클릭합니다.
- 명령어 메뉴를 열고
>
문자를 삭제한 후!
을 입력하고 스니펫 이름을 입력한 다음 Enter 키를 누릅니다.
자세한 내용은 모든 페이지에서 코드 스니펫 실행을 참조하세요.
자바스크립트 디버그
console.log()
를 사용하여 자바스크립트가 잘못 발생한 위치를 추론하는 대신 Chrome DevTools 디버깅 도구를 사용해 보세요. 일반적인 개념은 코드에서 의도적인 중단 지점인 중단점을 설정한 후 코드 실행을 한 번에 한 줄씩 단계별로 실행하는 것입니다.
코드를 단계별로 실행하면서 현재 정의된 모든 속성 및 변수의 값을 확인 및 변경하고, 콘솔에서 자바스크립트를 실행하는 등의 작업을 할 수 있습니다.
자바스크립트 디버깅 시작하기에서 DevTools의 디버깅 기본사항을 알아보세요.
코드에만 집중
Chrome DevTools를 사용하면 프레임워크에서 생성되는 노이즈와 웹 애플리케이션을 빌드할 때 활용하는 빌드 도구를 필터링하여 작성한 코드에만 집중할 수 있습니다.
최신 웹 디버깅 환경을 제공하기 위해 DevTools는 다음을 실행합니다.
- 작성되고 배포된 코드를 분리합니다. 코드를 더 빨리 찾을 수 있도록 소스 패널에서 내가 만든 코드를 번들 및 축소된 코드에서 분리합니다.
- 알려진 서드 파티 코드 무시:
- 소스 패널에서는 이러한 소스를 페이지 창의 파일 트리에서 숨깁니다.
- 콘솔은 이러한 프레임을 스택 트레이스에서 숨깁니다.
- 파일 열기 메뉴를 사용하면 이러한 파일이 검색 결과에서 표시되지 않습니다.
또한 프레임워크에서 지원하는 경우 디버거의 호출 스택 및 콘솔의 스택 트레이스에 비동기 작업의 전체 기록이 표시됩니다.
자세한 내용은 다음을 ���고하세요.
작업공간 설정
기본적으로 소스 패널에서 파일을 수정하면 페이지를 새로고침하면 변경사항이 손실됩니다. 작업공간을 사용하면 DevTools에서 변경한 내용을 파일 시스템에 저장할 수 있습니다. 이를 통해 DevTools를 코드 편집기로 사용할 수 있습니다.
시작하려면 작업공간에서 파일 수정을 참고하세요.