google-chrome-extension
Chrome 확장 프로그램 디버깅

개발자 도구를 사용하여 확장 프로그램 디버깅

크롬 확장은 최대 4 부분으로 분리됩니다.

• 배경 페이지
• 팝업 페이지
• 하나 이상의 콘텐츠 스크립트
• 옵션 페이지

각 부분은 본질적으로 분리되어 있기 때문에 개별 디버깅이 필요합니다.

이 페이지들은 별도의 것으로, 변수가 변수들간에 직접 공유되지 않으며 , 이들 페이지 중 하나의 console.log() 가 다른 부분의 로그에는 표시되지 않는다는 것을 의미합니다.

chrome devtools 사용 :

Chrome 확장 프로그램은 다른 웹 앱 및 웹 페이지와 유사하게 디버깅됩니다. 디버깅은 대부분 Ctrl + Shift + i 및 cmd + Shift + i 또는 페이지를 마우스 오른쪽 버튼으로 클릭하고 inspect를 선택하여 각각 Windows 및 Mac 용 키보드 단축키를 사용하여 열린 Chrome의 devtools 관리자를 사용하여 수행됩니다.

Inspector에서 개발자는 html 요소와 css가 해당 요소에 미치는 영향을 검사하거나 콘솔을 사용하여 javascript 변수의 값을 검사하고 설정된 console.log() 의 출력을 읽을 수 있습니다.

관리자의 사용법에 대한 자세한 내용은 Chrome Devtools 에서 확인할 수 있습니다.

크롬을 사용하여 팝업, 옵션 페이지 및 기타 페이지 검사 : //...yourExtensionId.../ :

팝업 페이지 와 옵션 페이지 는 열 때마다 검사하여 간단히 액세스 할 수 있습니다.

확장 프로그램의 일부이지만 팝업이나 옵션 페이지가 아닌 추가 html 페이지도 같은 방식으로 디버깅됩니다.

배경 페이지 검사 :

배경 페이지에 액세스하려면 먼저 chrome : // extensions / 에서 chrome 확장 프로그램 페이지로 이동해야합니다. '개발자 모드' 체크 표시가 활성화되어 있는지 확인하십시오.

그런 다음 "Inspect views" 옆의 백그라운드 스크립트를 클릭하여 배경 페이지를 검사하십시오.

콘텐츠 스크립트 검사 :

콘텐츠 스크립트는 삽입 된 웹 사이트를 따라 실행됩니다. 콘텐츠 스크립트가 삽입 된 웹 사이트를 먼저 검사하여 콘텐츠 스크립트를 검사 할 수 있습니다. 콘솔에서는 확장 프로그램에서 출력 한 console.log() 를 볼 수는 있지만 내용 스크립트의 변수를 변경하거나 검사 할 수는 없습니다.

이 문제를 해결하려면 일반적으로 'top' 으로 설정된 드롭 다운을 클릭하고 확장 목록에서 확장을 선택해야합니다.

여기에서 확장 프로그램 내 변수에 액세스 할 수 있습니다.