google-chrome-extension
개발자 도구 통합

프로그래밍 방식의 중단 점 힌팅

콘텐츠 스크립트에 디버거 문 추가

var foo = 1;
debugger;

foo = 2;

콘텐츠 스크립트가 삽입 된 웹 페이지에서 개발자 도구를 열어 해당 행에서 코드 실행 일시 중지를 확인하십시오.

배경 페이지 / 스크립트 디버깅

배경 스크립트는 다른 JavaScript 코드와 같습니다. Chrome에서 다른 자바 스크립트 코드를 디버깅하는 것과 동일한 도구를 사용하여 디버깅 할 수 있습니다.

Chrome 개발자 도구를 열려면 chrome://extensions 로 이동하여 개발자 모드를 사용 설정 하세요.

이제 배경 페이지 나 스크립트가있는 확장을 디버깅 할 수 있습니다. 디버그 할 확장 프로그램으로 스크롤하고 배경 페이지 링크를 클릭하여 검사하십시오.

도움말 : 확장 프로그램을 다시로드하려면 개발자 도구 창에서 F5 키 를 누르면됩니다. 다시로드하기 전에 초기화 코드에 중단 점을 넣을 수 있습니다.

팁 : 확장 작업 버튼을 마우스 오른쪽 버튼으로 클릭하고 '확장 프로그램 관리'를 선택하면 해당 확장 프로그램으로 스크롤되는 chrome://extensions 페이지가 열립니다.

팝업 창 디버깅

팝업 창을 디버그하는 두 가지 방법이 있습니다. 두 가지 방법 모두 Chrome DevTools를 사용하는 것입니다.

옵션 1 : 확장 프로그램의 작업 버튼을 마우스 오른쪽 버튼으로 클릭하고 팝업 검사를 선택합니다.

옵션 2 : 브라우저에서 직접 탭으로 팝업 창을 엽니 다.

예를 들어, 확장 ID가 abcdefghijkmnop 이고 팝업 html 파일이 popup.html . 주소로 이동하여 다음으로 이동하십시오.

chrome-extension://abcdefghijklmnop/popup.html

이제 일반 탭에서 poup를 볼 수 있습니다. F12 키 를 눌러 개발자 도구를 열 수 있습니다.