除錯與測試
Chrome Extension 的程式碼分散在好幾個獨立的執行環境中（見 核心架構），每個環境都有各自的 Console 與檢查方式，不像一般網頁只有一個開發者工具可以看。搞懂去哪裡找錯誤訊息，能省下大量除錯時間。
各元件對應的檢查方式
| 元件 | 如何開啟 DevTools |
|---|---|
| Background Service Worker | chrome://extensions → 該擴充功能卡片 → 點擊「服務工作者（Service worker）」連結 |
| Popup 頁面 | 點擊工具列圖示打開 popup 後，在 popup 上按右鍵選「檢查」 |
| Options 頁面 | 開啟 Options 頁面後，直接按 F12 或右鍵「檢查」，與一般網頁相同 |
| Content Script | 開啟該 Content Script 所在的網頁，按 F12，訊息會顯示在該網頁自己的 Console（可以在右上角切換 context 篩選來源） |
檢查擴充功能層級的錯誤
chrome://extensions 的每張擴充功能卡片上，如果有執行期錯誤（例如 manifest.json 格式錯誤、未捕捉的例外），會出現紅色的「錯誤（Errors）」按鈕，點擊可以看到完整的堆疊追蹤（stack trace），這是排查「擴充功能載入失敗」或「某個功能完全沒反應」最先要看的地方。
開發迴圈：修改、重新載入、測試
- 修改程式碼並存檔。
- 回到
chrome://extensions，點擊該擴充功能卡片上的重新載入圖示。 - 如果只改了 Content Script，還要重新整理該網頁，新版程式碼才會生效。
- 重新觸發功能（點擊圖示、重新整理網頁等），確認結果。
manifest.json 支援 "key" 欄位可以固定擴充功能 ID，開發階段不需要，但如果要測試依賴固定 ID 的功能（例如 OAuth 回呼網址），可以額外設定。
常見錯誤與排查方向
- Popup 打開後馬上關閉、看不到內容：多半是
popup.html或popup.js有語法錯誤，用「檢查」開啟 popup 的 DevTools 查看 Console。 chrome.storage或其他 API 回傳undefined：檢查manifest.json的permissions是否漏了對應項目。- Content Script 完全沒執行：確認
matches規則是否真的符合目前網址，以及是否忘記重新整理網頁。 - 訊息傳遞收不到回應：檢查
onMessage監聽器是否忘了在非同步情境下return true，見 訊息傳遞。
推薦影音
Chrome DevTools Tips：除錯 Chrome Extension
簡述：Chrome 官方 DevTools Tips 系列影片，示範如何用 DevTools 檢查擴充功能各個元件、找出執行期錯誤，短短幾分鐘就能學會關鍵技巧。
下一步
確認功能都正常運作後，前往 打包與發布到 Chrome Web Store，把擴充功能分享給其他使用者。