chrome插件开发之调试

chrome插件开发资料还是相对丰富的

360官方提供的资料:http://open.chrome.360.cn/extension_dev/overview.html

某大神也讲解的比较详细: http://www.cnblogs.com/guogangj/p/3235703.html

有坑的地方要注意:popup.html中的js在插件中无效,需要通过引用popup.js,动态绑定js事件

先摘录相关的内容:

程序开发,必定要涉及到调试,记得我刚开始做WEB开发前,问一些做了好久WEB开发的朋友,你们是怎样做javascript调试的,我发觉大多数人竟然回答:用alert一点点试吧——不是不行,是太原始,太低效了,对吧?其实Chrome直接支持javascript的调试,拥有了Chrome,就相当于拥有了一个强大的javascript调试器了。

Chrome打开开发者工具的方法是++(Windows版),大致如下:

chrome插件开发之调试_第1张图片

我们这次需要关心的有“Elements”、“Sources”和“Console”这三个标签。Elements是用来做DOM分析的,功能有点类似Firebug,帮助我们分析页面的内容;而Sources,是我们用来调试javascript的;Console则是我们的Log的输出窗口,也是一个调试利器。

调试Content Script

如我提供的这个例子,可在Sources的“Copntent Scripts”下看到“content_script.js”然后设断点,执行到断点处时,Chrome会挺住,你可以观察到上面的值,如图:

chrome插件开发之调试_第2张图片

太cool了,请问你还要一点点alert吗?

调试Background

由于background和content script并不在同一个运行环境中,因此上面的方法是看不到Background的javascript的。要调试Background,还需要打开插件页,也就是“chrome://extensions”。点对应的插件的“generated background page.html”,就出现了调试窗口,接下来的操作就跟前面的类似了。如图:

chrome插件开发之调试_第3张图片

至于你看到ID,“aajnhhjiia……”这一长串东西,这是chrome自动安排的一个ID。

调试Popup

虽然Popup和Background是处于同一运行环境中,但在刚才的Background的调试窗口中是看不到Popup的代码的。调试Popup还需要这样:

chrome插件开发之调试_第4张图片

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

一些问题

也许有时候你会发觉调试器不是很灵,至少我用下来感觉如此,比如你可能发现断点设不了,或者断点不起作用,或者看不到你自己的javascript文件。我的方法是在插件页中,把对应的插件的“已启用”这个复选框去掉,再重新勾上,然后再点一下“重新加载(Ctrl+R)”,通常能解决问题。当然了,还有些很古怪的问题,还不好重现,总体的解决思路就是重新载入一下,实在不行的话重启浏览器,或者清除浏览器缓存什么的,再试试看。

在做插件调试的时候我还遇到一个十分郁闷的问题,那就是我的Chrome使用了“Go Agent”,关于Go Agent是用来干嘛的,这个嘛,可以去google一下,我相信绝大多数程序员都会喜欢上它……可由于使用了这个东西,很可能会导致插件的XMLHttpRequest工作不正常,而且可能你会思索半天也找不到原因,好吧,暂时把Go Agent停用掉,甚至可能你需要重启下Chrome——我的经验。

你可能感兴趣的:(Coding,Life)