소스 패널 개요

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools Sources 패널을 사용하여 다음 작업을 할 수 있습니다.

파일 보기

페이지 창을 사용하면 페이지가 로드한 모든 리소스를 볼 수 있습니다.

Page 창

Page 창의 구성 방식:

  • 위 스크린샷의 top와 같은 최상위 수준은 HTML 프레임을 나타냅니다. top을(를) 찾을 수 있는 위치: 확인할 수 있습니다. top는 기본 문서 프레임을 나타냅니다.
  • 위 스크린샷의 developers.google.com와 같은 두 번째 수준은 출처를 나타냅니다.
  • 세 번째, 네 번째 수준 등은 로드된 디렉터리와 리소스를 나타냅니다. 유추할 수 있습니다 예를 들어, 위의 스크린샷에서 볼 수 있듯이 리소스에 대한 전체 경로는 devsite-googler-button이 developers.google.com/_static/19aa27122b/css/devsite-googler-button입니다.

Page 창에서 파일을 클릭하여 Editor 창에서 콘텐츠를 확인합니다. 모든 유형의 데이터를 . 이미지의 경우 이미지의 미리보기가 표시됩니다.

편집기 창에서 파일 보기

CSS 및 자바스크립트 수정

편집기 창을 사용하여 CSS 및 JavaScript를 수정합니다. DevTools가 페이지를 업데이트하여 새 코드를 실행합니다.

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

인라인 구문 오류 도움말

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

편집기 창에서 CSS 편집

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

편집기 창에서 JavaScript 수정

변경 후 DevTools에서 전체 스크립트를 다시 실행하면 A 텍스트가 콘솔.

DevTools는 페이지를 새로고침하면 CSS 및 JavaScript 변경사항을 지웁니다. 작업공간을 방문하여 변경사항을 파일 시스템에 저장하는 방법을 알아보세요.

스니펫 생성, 저장 및 실행

스니펫은 모든 페이지에서 실행할 수 있는 스크립트입니다. 첫 번째 단계에서 콘솔에 아래와 같은 코드를 입력합니다. 콘솔에서 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()를 사용하는 대신 Chrome DevTools 디버깅 도구를 사용합니다. 일반적으로는 중단점을 설정하는 것으로 그런 다음 한 줄씩 코드 실행을 단계별로 있습니다.

중단점에서 일시중지

코드를 단계별로 실행하면 현재 정의된 모든 필터의 값을 보고 변경할 수 있습니다. 속성 및 변수를 사용하여 콘솔에서 자바스크립트를 실행하는 등의 작업을 할 수 있습니다.

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

코드에만 집중

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

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

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

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

작업공간 설정하기

기본적으로 Sources 패널에서 파일을 수정하면 변경사항을 새로고침하면 사라집니다. 있습니다. 작업공간을 사용하면 DevTools에서 변경한 내용을 파일에 저장할 수 있습니다. 있습니다. 따라서 DevTools를 코드 편집기로 사용할 수 있습니다.

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