Gỡ lỗi tiện ích mở rộng của Chrome với quyền truy cập vào chrome.devtools api

Question

Tôi là người mới bắt đầu trong việc phát triển tiện ích mở rộng của Chrome. Tôi cần mở rộng phần mở rộng hiện có (angularjs-batarang), nhưng tôi có một số vấn đề với gỡ lỗi.

manifest.json có mục:

"background": { 
    "page": "background.html" 
    }, 
    "devtools_page": "devtoolsBackground.html" 

Câu hỏi đặt ra là: làm thế nào để gỡ lỗi devtools_page? Tôi đã thêm vào manifest.json mục nhập bổ sung "options_page": "devtoolsBackground.html" và khi tôi thêm tiện ích mở rộng này vào Chrome, tôi có thể chạy trang options từ chrome://extensions. Nó hoạt động vì ứng dụng dừng tại điểm ngắt. Nhưng không may, tôi không có quyền truy cập vào API chrome.devtools. Vì vậy, nó không phải là giải pháp.

Tôi làm cách nào để gỡ lỗi và có quyền truy cập vào API này?

Answer 1

Để mở công cụ phát triển cho một trang DevTools, tôi thường làm theo các bước sau:

1. Mở công cụ phát triển.
2. Hoàn tác công cụ nhà phát triển nếu chưa thực hiện (thông qua nút ở góc dưới cùng bên trái).
3. Bấm Ctrl + Shift + J để mở công cụ nhà phát triển của công cụ nhà phát triển.
4. Tùy chọn: Hãy cập cảng các công cụ phát triển một lần nữa nếu bạn đã undocked ở bước 2.
5. Chuyển từ "<top frame>" để devtoolsBackground.html (hoặc bất kỳ tên nào bạn đã chọn cho DevTools của bạn). (example)
6. Bây giờ, bạn có thể sử dụng tab Bảng điều khiển để phát với API chrome.devtools.