Google Chrome 플러그인 개발 - 디버그 편

1649 단어 chromeextension
원인
최근에 크롬의 두 개의 작은 플러그인을 통합시켰는데 작은 도구로 인해 유지보수가 부족하고 그 안에 많은 버그가 있어서 스스로 조금씩 해결할 수 밖에 없었다.다음은 문제를 처리할 때 플러그인 Debugger에 대해 설명합니다.
컨텐트
우선 Chrome의 확장 프로그램에서 열기: 개발자 모드 -> 선택: 개발 중인 확장 프로그램을 불러와서 우리의 플러그인을 불러옵니다.다음과 같은 내용을 볼 수 있습니다.
fastForm 0.1 record value of form. recorded value automatically entered. 권한 ID:ciobjfcbnhglnmfabchoicnopabhagea 로드 소스: F:\1.10\tastForm 검사 보기:background.html
여기서 우리는 바로 백그라운드를 클릭할 수 있다.html 파일, 여기서 백그라운드를 진행할 수 있습니다.js 파일의 디버깅.플러그인을 불러오는 것이 끝난 후, 우리는 내비게이션 표시줄에서 우리의 플러그인을 볼 수 있습니다.
두 번째 디버깅 장소가 나타나면 우리의 삽입에 맞추어 오른쪽 키로 ->심사 요소를 선택하세요.팝업 대상으로.html 개발자 도구.현재: popup을 디버깅할 수 있습니다.html 페이지에 불러오는 js 파일입니다.
<code>       manifest     
</code>

"content_scripts": [ { "js": [ "jquery.1.7.js", "content.js"], "matches": [ "http:///", "https:///"] } ],
이러한 구성.content_scripts의 파일입니다. 열린 웹 페이지에서 F12를 눌러야 합니다.이 때 개발자 도구를 열 것입니다. 이 개발자 도구는 현재 페이지를 대상으로 하는 것입니다.다음 중 하나를 선택합니다.
source->content_scripts (왼쪽 작은 상자에 두 번째 점을 찍는다)
이럴 때 위에서 기록한 Id:ciobjfcbnhglnmfabchoicnopabhagea에 따라 우리의'jquery.1.7.js','content.js'두 파일을 볼 수 있습니다.디버깅을 직접 끊을 수 있습니다.넷째, 불러오는 js 파일도 있습니다.구성 파일 manfest 쓰기
"permissions": [ "tabs", "http:///", "https:///"],
이후에 우리는 코드 처리에서 직접 호출할 수 있다
chrome.tabs.executeScript(null, {file: '/fill/fill_form.js'});
저희 fill 을 실행하러 왔습니다.form.js 파일.나는 파일을 직접 볼 수 있는 디버깅 방법을 찾지 못했다.우회 방식을 선택했다.인터럽트 앞에 키워드를 붙여야 합니다: debugger;자동으로 멈춰요.
끝맺다
이렇게 되면 디버깅이 비교적 번거로운 것 같아서, 더욱 좋은 방법을 찾아 이 문제를 해결할 수 있기를 바란다

좋은 웹페이지 즐겨찾기