확장 프로그램에서 웹페이지와 동일한 Chrome DevTools에 액세스할 수 있습니다. 확장 프로그램 디버깅에 능숙하려면 다양한 확장 프로그램 구성요소의 로그와 오류를 찾는 방법을 알아야 합니다. 이 튜토리얼에서는 확장 프로그램을 디버깅하는 기본적인 기법을 제공합니다.
시작하기 전에
이 가이드에서는 기본적인 웹 개발 경험이 있다고 가정합니다. 다음 자료 읽기
확장 프로그램 개발 워크플로를 소개하는 개발 기본사항사용자 인터페이스 디자인: 사용자 소개
확장 프로그램에서 사용할 수 있는 인터페이스 요소입니다.
확장 프로그램 중단
이 튜토리얼에서는 한 번에 하나의 확장 프로그램 구성요소를 중단한 다음 해결 방법을 보여줍니다. 다음 섹션으로 넘어가기 전에 한 섹션에서 발생한 버그를 실행취소해야 합니다. 먼저 GitHub에서 깨진 색상 샘플을 다운로드합니다.
매니페스트 디버그
먼저 "version" 키를 "versions"로 변경하여 매니페스트 파일을 중단해 보겠습니다.
확장 프로그램을 저장하고 다시 로드해 보세요. 이번에는 성공적으로 로드됩니다. 확장 프로그램
관리 페이지에는 세부정보, 삭제, 오류의 세 가지 버튼이 표시됩니다. 오류
오류가 발생하면 버튼 라벨이 빨간색으로 바뀝니다. 오류 버튼을 클릭하여
다음과 같은 오류가 발생할 수 있습니다.
드림
<ph type="x-smartling-placeholder"></ph>
오류 버튼을 클릭하여 오류 메시지 찾기
계속 진행하기 전에 권한을 다시 변경하고 오른쪽 상단의 모두 지우기를 클릭하여 로그를 지우고 확장 프로그램을 새로고침합니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
확장 프로그램 오류를 삭제하는 방법
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
서비스 워커 디버그
로그 찾기
서비스 워커는 스토리지에 기본 색상을 설정하고 이를 콘솔에 기록합니다. 이 로그를 보려면 Inspect views 옆에 있는 파란색 링크를 선택하여 Chrome DevTools 패널을 엽니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Chrome DevTools 패널의 서비스 워커 로그
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
오류 찾기
onInstalled를 소문자 oninstalled로 변경하여 서비스 워커를 중단하겠습니다.
service-worker.js:
// There's a typo in the line below;// ❌ oninstalled should be ✅ onInstalled.chrome.runtime.onInstalled.addListener(()=>{chrome.runtime.oninstalled.addListener(()=>{chrome.storage.sync.set({color:'#3aa757'},()=>{console.log('Thebackgroundcolorisgreen.');});});
새로고침하고 오류를 클릭하여 오류 로그를 확인합니다. 첫 번째 오류는 서비스 워커 등록에 실패했음을 나타냅니다. 시작 중에 문제가 발생했다는 의미입니다.
Serviceworkerregistrationfailed.Statuscode:15.
드림
<ph type="x-smartling-placeholder"></ph>
서비스 워커 등록 오류 메시지
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
드림
<ph type="x-smartling-placeholder"></ph>
포착되지 않은 TypeError 메시지입니다.
도입된 버그를 실행취소하고 오른쪽 상단의 모두 삭제를 클릭한 다음 확장 프로그램을 새로고침합니다.
서비스 워커 상태 확인
다음 단계에 따라 작업 수행을 위해 서비스 워커의 절전 모드가 해제되는 시점을 확인할 수 있습니다.
'뷰 검사' 위에 있는 확장 프로그램 ID를 복사합니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
확장 프로그램 관리 페이지의 확장 프로그램 ID
브라우저에서 매니페스트 파일을 엽니다. 예:
text
chrome-extension://YOUR_EXTENSION_ID/manifest.json
파일을 검사합니다.
Application 패널로 이동합니다.
서비스 워커 창으로 이동합니다.
코드를 테스트하려면 status 옆에 있는 링크를 사용하여 서비스 워커를 시작하거나 중지하세요.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Application 패널의 서비스 워커 상태 (이미지를 확대하려면 클릭하세요.)
또한 서비스 워커 코드를 변경한 경우 Update 또는 skipWaiting을 클릭하여 변경사항을 즉시 적용할 수 있습니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Application 패널에서 서비스 워커 새로고침 (이미지를 확대하려면 클릭하세요.)
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
팝업 디버그
이제 확장 프로그램이 올바르게 초기화되므로 아래 강조표시된 줄을 주석 처리하여 팝업을 중단합니다.
popup.js:
...changeColorButton.addEventListener('click',(event)=>{constcolor=event.target.value;// Query the active tab before injecting the content scriptchrome.tabs.query({active:true,currentWindow:true},(tabs)=>{// Use the Scripting API to execute a scriptchrome.scripting.executeScript({target:{tabId:tabs[0].id},args:[color],func:setColor});});});
확장 프로그램 관리 페이지로 다시 이동합니다. 오류 버튼이 다시 표시됩니다. 클릭하여
새 로그를 확인합니다. 다음과 같은 오류 메시지가 표시됩니다.
Uncaught ReferenceError: tabs is not defined
드림
<ph type="x-smartling-placeholder"></ph>
팝업 오류를 표시하는 확장 프로그램 관리 페이지
팝업을 검사하여 팝업의 DevTools를 열 수 있습니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
팝업 오류를 표시하는 DevTools
tabs is undefined 오류는 확장 프로그램에서 콘텐츠 스크립트를 삽입할 위치를 모른다고 나타냅니다.
tabs.query()를 호출한 다음 활성 탭을 선택하여 문제를 해결하세요.
코드를 업데이트하려면 오른쪽 상단에 있는 모두 지우기 버튼을 클릭한 다음
확장자가 포함됩니다.
디버그 콘텐츠 스크립트
이제 'color' 변수를 변경하여 콘텐츠 스크립트를 중단해 보겠습니다. 다음과 같이 변경합니다.
content.js:
...functionsetColor(color){// There's a typo in the line below;// ❌ colors should be ✅ color.document.body.style.backgroundColor=color;document.body.style.backgroundColor=colors;}
페이지를 새로고침하고 팝업을 연 다음 녹색 상자를 클릭합니다. 아무 일도 일어나지 않습니다.
확장 프로그램 관리 페이지로 이동하면 오류 버튼이 표시되지 않습니다. 이는 런타임 오류, console.warning 및
console.error은(는) 확장 프로그램 관리 페이지에 기록됩니다.
콘텐츠 스크립트는 웹사이트 내에서 실행됩니다. 따라서 이러한 오류를 찾으려면 확장 프로그램이 변경하려는 웹페이지를 검사해야 합니다.
UncaughtReferenceError:colorsisnotdefined
드림
<ph type="x-smartling-placeholder"></ph>
웹페이지 콘솔에 확장 프로그램 오류가 표시됩니다.
콘텐츠 스크립트 내에서 DevTools를 사용하려면 top 옆에 있는 드롭다운 화살표를 클릭하고 확장 프로그램을 선택합니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
포착되지 않은 ReferenceError: 색상이 정의되지 않았습니다.
colors이 정의되지 않았다는 오류 메시지가 표시됩니다. 확장 프로그램이 변수를 올바르게 전달해서는 안 됩니다.
삽입된 스크립트를 수정하여 색상 변수를 코드에 전달합니다.
네트워크 요청 모니터링
팝업은 가장 빠른 작업보다도 먼저 필요한 모든 네트워크 요청을
DevTools를 열 수 있습니다. 이 요청을 보려면 네트워크 패널 내에서 새로고침하세요. 그것은
DevTools 패널을 닫지 않고 팝업을 새로고침합니다.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
팝업 네트워크 요청을 보려면 네트워크 패널 내부를 새로고침하세요.