Google Chrome 插件开发—调试篇

2019独角兽企业重金招聘Python工程师标准>>>

起因

最近，整合了 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;将会自动停在这。

结束

感觉这样下来,调试还是比较麻烦的,希望能找到更好的办法解决这个问题

转载于:https://my.oschina.net/u/265943/blog/292904