我們這次需要關心的有“Elements”、“Sources”和“Console”這三個標籤。Elements是用來做DOM分析的，功能有點類似Firebug，幫助我們分析頁面的內容；而Sources，是我們用來除錯javascript的；Console則是我們的Log的輸出視窗，也是一個除錯利器。

除錯Content Script

如我提供的這個例子，可在Sources的“Copntent Scripts”下看到“content_script.js”然後設斷點，執行到斷點處時，Chrome會挺住，你可以觀察到上面的值，如圖：

太cool了，請問你還要一點點alert嗎？

除錯Background

由於background和content script並不在同一個執行環境中，因此上面的方法是看不到Background的javascript的。要除錯Background，還需要開啟外掛頁，也就是“chrome://extensions”。點對應的外掛的“generated background page.html”，就出現了除錯視窗，接下來的操作就跟前面的類似了。如圖：

至於你看到ID，“aajnhhjiia……”這一長串東西，這是chrome自動安排的一個ID。

除錯Popup

雖然Popup和Background是處於同一執行環境中，但在剛才的Background的除錯視窗中是看不到Popup的程式碼的。除錯Popup還需要這樣：

然後……就跟前面差不多了。

一些問題

也許有時候你會發覺偵錯程式不是很靈，至少我用下來感覺如此，比如你可能發現斷點設不了，或者斷點不起作用，或者看不到你自己的javascript檔案。我的方法是在外掛頁中，把對應的外掛的“已啟用”這個複選框去掉，再重新勾上，然後再點一下“重新載入(Ctrl+R)”，通常能解決問題。當然了，還有些很古怪的問題，還不好重現，總體的解決思路就是重新載入一下，實在不行的話重啟瀏覽器，或者清除瀏覽器快取什麼的，再試試看。

在做外掛除錯的時候我還遇到一個十分鬱悶的問題，那就是我的Chrome使用了“Go Agent”，關於Go Agent是用來幹嘛的，這個嘛，可以去google一下，我相信絕大多數程式設計師都會喜歡上它……可由於使用了這個東西，很可能會導致外掛的XMLHttpRequest工作不正常，而且可能你會思索半天也找不到原因，好吧，暫時把Go Agent停用掉，甚至可能你需要重啟下Chrome——我的經驗。