Google Chrome 插件開發—調試篇

原由

最近，整合了 Chrome 的兩個小插件，因爲小工具，缺少維護，裏面不少bug，只能本身一點點來解決了。 下面說說在處理問題時候的插件Debugger。

內容

首先須要作的是，在 Chrome 的擴展程序中打開：開發者模式->選擇：加載正在開發的擴展程序 將咱們的插件加載進來。 能夠看到相似內容：

fastForm 0.1
record value of form. recorded value automatically entered. 權限
ID： ciobjfcbnhglnmfabchoicnopabhagea
加載來源： F:\1.1_0\fastForm
檢查視圖： background.html

這裏咱們能夠直接點擊 background.html 文件,在這裏能夠進行對 background.js 文件的調試。 在加載插件完成後,咱們能夠在導航欄上看到咱們的插件了.

第二個調試的地方出現，對着咱們的插，右鍵選擇 ->審查元素。會打開針對popup.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文件。配置文件manifest寫入

"permissions": [ "tabs", "http:///", "https:///" ],

以後咱們能夠在代碼處理中直接調用

chrome.tabs.executeScript(null, {file: '/fill/fill_form.js'});

來運行咱們的fill_form.js文件。我沒找到一個直接能看到文件的調試方法。選擇了一個迂迴方式。直接須要斷點的前面，加上關鍵字：debugger;將會自動停在這。

結束

感受這樣下來,調試仍是比較麻煩的,但願能找到更好的辦法解決這個問題