확장 프로그램은 Chrome DevTools가 웹페이지에 제공하는 것과 동일한 디버깅 이점을 활용할 수 있지만 고유한 동작 속성을 보유합니다. 마스터 확장 프로그램 디버거가 되려면 이러한 동작, 확장 프로그램 구성요소가 서로 작동하는 방식, 버그를 찾을 위치를 이해해야 합니다. 이 튜토리얼에서는 개발자에게 확장 프로그램 디버깅에 대한 기본적인 이해를 제공합니다.
로그 찾기
확장 프로그램은 여러 구성요소로 구성되며 이러한 구성요소에는 개별적인 책임이 있습니다. 여기에서 손상된 확장 프로그램을 다운로드하여 다양한 확장 프로그램 구성요소의 오류 로그를 찾으세요.
백그라운드 스크립트
chrome://extensions의 Chrome 확장 프로그램 관리 페이지로 이동하여 개발자 모드가 사용 설정되어 있는지 확인합니다. 압축 해제된 항목 로드 버튼을 클릭하고 손상된 확장 프로그램 디렉터리를 선택합니다. 확장 프로그램이 로드되면 세부정보, 삭제, 오류(빨간색 글꼴)라는 세 가지 버튼이 표시됩니다.
오류 버튼을 클릭하여 오류 로그를 확인합니다. 확장 프로그램 시스템에서 백그라운드 스크립트에 문제가 발견되었습니다.
Uncaught TypeError: Cannot read property 'addListener' of undefined
또한 뷰 검사 옆에 있는 파란색 링크를 선택하여 백그라운드 스크립트에 Chrome DevTools 패널을 열 수 있습니다.
코드로 돌아갑니다.
chrome.runtime.oninstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
백그라운드 스크립트가 onInstalled 이벤트를 수신 대기하려고 하지만 속성 이름에 대문자 'I'가 필요합니다. 올바른 호출을 반영하도록 코드를 업데이트하고 오른쪽 상단의 모두 삭제 버튼을 클릭한 다음 확장 프로그램을 새로고침합니다.
팝업
이제 확장 프로그램이 올바르게 초기화되었으므로 다른 구성요소를 테스트할 수 있습니다. 이 페이지를 새로고침하거나 새 탭을 열고 developer.chrome.com의 페이지로 이동한 다음 팝업을 열고 녹색 정사각형을 클릭합니다. 그리고... 아무 일도 일어나지 않습니다.
확장 프로그램 관리 페이지로 돌아가면 오류 버튼이 다시 표시됩니다. 클릭하여 새 로그를 봅니다.
Uncaught ReferenceError: tabs is not defined
팝업을 검사하여 팝업 오류를 볼 수도 있습니다.
tabs is undefined 오류는 확장 프로그램이 콘텐츠 스크립트를 삽입할 위치를 모르고 있음을 나타냅니다.
tabs.query() 메서드를 호출한 다음 활성 탭을 선택하면 이 문제를 해결할 수 있습니다.
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
let color = element.target.value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{code: 'document.body.style.backgroundColor = color;'});
});
};
코드를 업데이트하고 오른쪽 상단의 모두 삭제 버튼을 클릭한 다음 확장 프로그램을 새로고침합니다.
콘텐츠 스크립트
페이지를 새로고침하고 팝업을 열고 녹색 상자를 클릭합니다. 아니요, 배경 색상이 여전히 변경되지 않았습니다. 확장 프로그램 관리 페이지로 돌아가면 오류 버튼이 없습니다. 웹페이지 내에서 실행되는 콘텐츠 스크립트가 원인일 가능성이 높습니다.
확장 프로그램이 변경하려는 웹페이지의 DevTools 패널을 엽니다.
런타임 오류인 console.warning 및 console.error만 확장 프로그램 관리 페이지에 기록됩니다.
콘텐츠 스크립트 내에서 DevTools를 사용하려면 top 옆에 있는 드롭다운 화살표를 클릭하고 확장 프로그램을 선택합니다.
color가 정의되지 않았다는 오류가 표시됩니다. 확장 프로그램이 변수를 올바르게 전달하지 않습니다.
색상 변수를 코드에 전달하도록 삽입된 스크립트를 수정합니다.
{code: 'document.body.style.backgroundColor = "' + color + '";'});
확장 프로그램 탭
탭으로 표시되는 확장 프로그램 페이지의 로그(예: 재정의 페이지 및 전체 페이지 옵션)는 웹페이지 콘솔 및 확장 프로그램 관리 페이지에서 확인할 수 있습니다.
네트워크 요청 모니터링
팝업은 가장 빠른 개발자도 DevTools를 열기 전에 필요한 모든 네트워크 요청을 실행하는 경우가 많습니다. 이러한 요청을 보려면 네트워크 패널 내에서 새로고침합니다. DevTools 패널을 닫지 않고 팝업을 새로고침합니다.
권한 선언
확장 프로그램은 웹페이지와 유사한 기능을 가지고 있지만 쿠키, 저장소, 교차 출처 XMLHttpRequsts와 같은 특정 기능을 사용하려면 권한이 필요한 경우가 많습니다. 권한 도움말 및 사용 가능한 Chrome API를 참고하여 확장 프로그램이 manifest에서 올바른 권한을 요청하는지 확인합니다.
{
"name": "Broken Background Color",
"version": "1.0",
"description": "Fix an Extension!",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
다음 단계
확장 프로그램 디버깅에 관한 자세한 내용은 개발 및 디버깅을 참고하세요. 문서를 읽고 Chrome DevTools에 관해 자세히 알아보세요.