소개

Firefox 애드온을 작성하고 디버깅하기 위해 console.log에서 로그를 출력하고 확인하는 방법입니다.

FireFox에서 개발 도구 보기

FireFox에서 개발 도구를 표시한다면 F12 키입니다.

자체 제작 애드온을로드하려면 주소 표시 줄에

about:debugging

를 넣고 임시 애드온을로드하여 만든 manifest.json을 선택하여로드 할 수 있습니다.


오류가 발생하면 잘 작동하는 샘플과 비교하여 수정합니다. 로드된 애드온의 왼쪽 하단에 있는 디버그를 클릭하면 이 애드온 개발 도구를 볼 수 있습니다. HTML 페이지를 보면서 F12 키로 console.log 의 출력을 확인하려고 했더니 아무것도 표시되지 않고, 시험하고 있던 곳 여기였던 것을 알았습니다.

브라우저 확장 설정 페이지

에 있는 background.js 의 console.log 에서의 출력입니다.



HTML 페이지의 콘솔은 "content_scripts"의 js에서 사용할 수 있습니다. 이전 소개 페이지의 manifest.json이라면 sample.js입니다. sample.js

sample.js

console.log("sample.js is loaded");

라고 넣으면 페이지의 표시와 함께 로그를 확인할 수 있습니다.

요약

이번에는 참고 페이지는 없고, 시험해 보았던 것을 소개했습니다. 간단할 것 같은데 로그의 장소를 모르면 디버깅도 불편하네요.