소스 패널 개요

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

소스 패널을 사용하여 스타일시트, 자바스크립트 파일, 이미지와 같은 웹사이트의 리소스를 보고 수정합니다.

개요

소스 패널을 사용하면 다음 작업을 할 수 있습니다.

소스 패널 열기

소스 패널을 열려면 다음 단계를 따르세요.

  1. DevTools를 엽니다.
  2. 다음 키를 눌러 명령어 메뉴 를 엽니다.
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P
  3. sources를 입력하고 소스 패널 표시를 선택한 후 Enter 키를 누릅니다.

또는 오른쪽 상단에서 more_vert 옵션 더보기 > 도구 더보기 > 소스를 선택합니다.

파일 보기

페이지 탭을 클릭하여 페이지에서 로드한 모든 리소스를 확인합니다.

페이지 탭

페이지 탭 구성 방법:

  • 최상위 수준(예: 위의 스크린샷의 top)은 HTML 프레임을 나타냅니다. 방문하는 모든 페이지에서 top을 찾을 수 있습니다. top은 기본 문서 프레임을 나타냅니다.
  • 두 번째 수준(예: 위의 스크린샷의 developers.google.com)은 출처를 나타냅니다.
  • 세 번째 수준, 네 번째 수준 등은 해당 출처에서 로드된 디렉터리 및 리소스를 나타냅니다. 예를 들어 위의 스크린샷에서 리소스 devsite-googler-button의 전체 경로는 developers.google.com/_static/19aa27122b/css/devsite-googler-button입니다.

페이지 탭에서 파일을 클릭하여 편집기 탭에서 콘텐츠를 확인합니다. 모든 유형의 파일을 볼 수 있습니다. 이미지의 경우 이미지 미리보기가 표시됩니다.

편집기 탭에서 파일을 보는 모습

CSS 및 JavaScript 수정

편집기 탭을 클릭하여 CSS 및 JavaScript를 수정합니다. DevTools에서 페이지를 업데이트하여 새 코드를 실행합니다.

편집기 는 디버그에도 도움이 됩니다. 예를 들어 실패한 CSS @import 및 url() 문, 잘못된 URL이 있는 HTML href 속성과 같은 구문 오류 및 기타 문제 옆에 인라인 오류 툴팁을 밑줄로 표시하고 표시합니다.

인라인 구문 오류 도움말

요소의 background-color를 수정하면 변경사항이 즉시 적용됩니다.

편집기 탭에서 CSS를 수정합니다.

JavaScript 변경사항을 적용하려면 Command+S (Mac) 또는 Control+S (Windows, Linux)를 누릅니다. DevTools는 스크립트를 다시 실행하지 않으므로 함수 내에서 변경한 JavaScript 변경사항만 적용됩니다. 예를 들어 console.log('A')는 실행되지 않지만 console.log('B')는 실행됩니다.

편집기 탭에서 JavaScript를 수정합니다.

변경 후 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 라이브러리를 삽입하는 스니펫 을 살펴보세요.

jQuery 라이브러리를 페이지에 삽입하는 스니펫

스니펫을 실행하려면 다음 단계를 따르세요.

  • 스니펫 탭에서 파일을 열고 하단의 작업 표시줄에서 실행 실행 버튼을 클릭합니다.
  • 명령어 메뉴를 열고 > 문자를 삭제하고 !를 입력하고 스니펫의 이름을 입력한 후 Enter 키를 누릅니다.

자세한 내용은 모든 페이지에서 코드 스니펫 실행을 참고하세요.

JavaScript 디버그

console.log()를 사용하여 JavaScript가 잘못된 위치를 추론하는 대신 Chrome DevTools 디버깅 도구를 사용하는 것이 좋습니다. 일반적인 아이디어는 코드에서 의도적으로 중지되는 위치인 중단점을 설정한 다음 코드 실행을 한 번에 한 줄씩 단계별로 실행하는 것입니다.

중단점에서 일시중지

코드를 단계별로 실행할 때 현재 정의된 모든 속성과 변수의 값을 보고 변경하고 콘솔에서 JavaScript를 실행하는 등의 작업을 할 수 있습니다.

DevTools에서 디버깅의 기본사항을 알아보려면 JavaScript 디버깅 시작하기를 참고하세요.

코드에만 집중

Chrome DevTools를 사용하면 웹 애플리케이션을 빌드할 때 활용하는 프레임워크 및 빌드 도구에서 생성되는 노이즈를 필터링하여 작성한 코드에만 집중할 수 있습니다.

최신 웹 디버깅 환경을 제공하기 위해 DevTools는 다음 작업을 실행합니다.

또한 프레임워크에서 지원하는 경우 디버거의 호출 스택 및 콘솔의 스택 트레이스에 비동기 작업의 전체 기록이 표시됩니다.

자세한 내용은 다음을 참고하세요.

작업공간 설정

기본적으로 소스 패널에서 파일을 수정하면 페이지를 새로고침할 때 변경사항이 손실됩니다. 작업공간 을 사용하면 DevTools에서 변경한 내용을 파일 시스템에 저장할 수 있습니다. 기본적으로 DevTools를 코드 편집기로 사용할 수 있습니다.

시작하려면 작업공간으로 파일 수정을 참고하세요.