확장 프로그램은 Chrome DevTools가 웹 페이지에 제공하는 것과 동일한 디버깅 이점을 활용할 수 있지만 고유 한 동작 속성을 가지고 있습니다. 마스터 확장 디버거가 되려면 이러한 동작, 확장 구성 요소가 서로 어떻게 작동하는지, 버그가 발생하는 위치를 이해해야 합니다. 이 튜토리얼은 개발자에게 디버깅 확장에 대한 기본적인 이해를 제공합니다.

로그 찾기 

확장은 다양한 구성 요소로 이루어지며 이러한 구성 요소에는 개별적인 책임이 있습니다. 다른 확장 구성 요소에 대한 오류 로그를 찾으려면 여기에서 손상된 확장을 다운로드하십시오.

Background Script 

chrome : // extensions의 크롬 확장 프로그램 관리 페이지로 이동하여 개발자 모드가 켜져 있는지 확인합니다. Load Unpacked 버튼을 클릭하고 손상된 확장 디렉토리를 선택합니다. 확장 프로그램이 로드되면 세부 정보, 제거 및 오류의 세 가지 버튼이 빨간색 글자로 표시됩니다.

오류 로그를 보려면 오류 단추를 클릭하십시오. 확장 시스템이 백그라운드 스크립트에서 문제를 발견했습니다.

Uncaught TypeError: Cannot read property ‘addListener’ of undefined 

또한 Inspect보기 옆에 있는 파란색 링크를 선택하여 백그라운드 스크립트에 대한 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"가 필요합니다. 올바른 통화를 반영하도록 코드를 업데이트하고 오른쪽 상단의 모두 지우기 버튼을 클릭 한 다음 확장 프로그램을 다시 로드합니다.

Popup 

이제 확장이 올바르게 초기화되었으므로 다른 구성 요소를 테스트 할 수 있습니다. 이 페이지를 새로 고침하거나 새 탭을 열고 developer.chrome.com의 페이지로 이동 한 다음 팝업을 열고 녹색 사각형을 클릭합니다. 그리고 ... 아무 일도 일어나지 않습니다.

확장 관리 페이지로 다시 이동하면 오류 버튼이 다시 나타납니다. 새 로그를 보려면 클릭하십시오.

Uncaught ReferenceError: tabs is not defined 

팝업을 검사하여 팝업 오류를 볼 수도 있습니다.

오류, 탭이 정의되지 않았습니다. 확장 프로그램이 콘텐츠 스크립트를 삽입 할 위치를 모른다고 합니다. 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;'});
    });
  };

코드를 업데이트하고 오른쪽 상단 모서리에 있는 모두 지우기 버튼을 클릭 한 다음 확장 프로그램을 다시 로드합니다.

Content Script 

페이지를 새로 고침하고 팝업을 열고 녹색 상자를 클릭합니다. 그리고 ... 아니, 배경색은 아직 변하지 않았습니다! 확장 관리 페이지로 다시 이동하면 오류 버튼이 없습니다. 범인은 웹 페이지 내에서 실행되는 콘텐츠 스크립트입니다.

확장 프로그램이 변경하려는 웹 페이지의 DevTools 패널을 엽니다.

런타임 오류, console.warning 및 console.error 만 확장 관리 페이지에 기록됩니다.

콘텐츠 스크립트 내에서 DevTools를 사용하려면 상단 옆에 있는 드롭 다운 화살표를 클릭하고 확장을 선택합니다.

오류는 색상이 정의되지 않았음을 나타냅니다. 확장은 변수를 올바르게 전달하지 않아야 합니다. 삽입 된 스크립트를 수정하여 색상 변수를 코드에 전달합니다.

 {code: 'document.body.style.backgroundColor = "' + color + '";'});

Extension Tabs 

페이지 재정의 및 전체 페이지 옵션과 같이 탭으로 표시되는 확장 페이지에 대한 로그는 웹 페이지 콘솔 및 확장 관리 페이지에서 찾을 수 있습니다.

네트워크 요청 모니터링 

팝업은 가장 빠른 개발자도 DevTools를 열기 전에 필요한 모든 네트워크 요청을 수행합니다. 이러한 요청을 보려면 네트워크 패널 내부에서 새로 고침하세요. DevTools 패널을 닫지 않고 팝업을 다시 로드합니다.

권한 선언 

확장 기능은 웹 페이지와 유사한 기능을 가지고 있지만 쿠키, 저장소 및 Cross-Origin XMLHttpRequsts와 같은 특정 기능을 사용하려면 종종 권한이 필요합니다. 권한 문서 및 사용 가능한 Chrome API를 참조하여 확장 프로그램이 매니페스트에서 올바른 권한을 요청하는지 확인하세요.

  {
    "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에 대해 자세히 알아보세요.