소스

소스(Sources) 패널은 웹페이지에서 로드된 파일을 탐색하고 JavaScript 및 CSS를 편집하며, 디버깅과 코드 스니펫 실행을 지원하는 크롬 개발자 도구의 핵심 도구입니다.

화면 구성

소스 패널 화면은 다음 3개의 섹션으로 나뉘어져 있습니다.

• 네비게이터(Navigator): 로드된 파일 등을 탐색합니다.
• 에디터(Editor): 선택한 파일을 보고 수정할 수 있습니다.
• 디버거(Debugger): JavaScript 실행 흐름을 분석하고 오류를 찾습니다.

네비게이터

네비게이터는 로드된 파일을 탐색하는데 사용됩니다. 네비게이터는 다음의 탭들이 있습니다.

• Page: 현재 페이지에서 로드한 모든 리소스를 볼 수 있습니다.
• Workspace: 로컬 파일을 연동하여 편집하고 수정 할 수 있습니다.
• Overrides: 특정 웹 리소스를 수정하고 변경 내용을 유지할 수 있습니다.
• Content scripts: 확장 프로그램에서 주입한 컨텐츠 스크립트를 볼 수 있습니다.
• Snippets: 어느 페이지에서든 실행할 수 있는 코드 스니펫을 저장하고 실행할 수 있습니다.

아쉽게도 오늘 시간에 모든 것들을 다룰 수 없어 Page와 Snippets만 다루고자합니다. 🥲

페이지(Page) 탭

Page 탭은 현재 페이지에서 로드한 모든 리소스를 볼 수 있습니다.

추천 설정

네비게이터 영역 우측 상단에 있는 설정 아이콘을 클릭하여 다음과 같이 설정을 변경하는 것을 추천드립니다.

• Group by folder: 리소스들을 폴더별로 그룹화하여 볼 수 있습니다.
• Group by Authored/Deployed: 작성한 파일과 배포된 파일을 구분하여 볼 수 있습니다. 주로 로컬 개발 환경에서 실제 소스 코드를 디버깅 할 때 사용합니다.

리액트 컴포넌트의 경우 실제 소스 파일은 Authored 그룹에 위치하고, 빌드된 파일은 Deployed 그룹에 위치합니다.

스니펫(Snippets) 탭

스니펫 탭은 어느 페이지에서든 실행할 수 있는 코드 스니펫을 저장하고 실행할 수 있습니다.

스니펫 추가

스니펫을 추가하려면 스니펫 탭에서 + New snippet을 클릭합니다.

스니펫 실행

스니펫을 실행하려면 스니펫을 열고 에디터 하단의 실행 버튼을 클릭합니다.