chrome插件开发之调试-转载

2017/12/11 02:27 阅读 1,293 views 次 评论 0 条

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打开开发者工具的方法是<Ctrl>+<Shift>+<I>(Windows版),大致如下:

我们这次需要关心的有“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——我的经验。

 

其他:

1)      查看扩展程序的详细信息和ID

通过Chrome 浏览器的“ 工具->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”,可以查看扩展程序的详细信息(如名称、概述、占用空间大小、版本和权限等)和ID

2)      查看扩展程序的popup页面

通过Chrome 浏览器的“工具 ->更多工具->扩展程序”,打开chrome://extensions页面,选中右上角的“开发者模式”(必须在开发者模式下才能够看到调试菜单项),这时右键单击地址栏右侧的扩展程序图标,选择“审查弹出内容Inspect popup”,将会打开Developer Tools窗口,其中可以查看或跟踪popup.html页面的所有相关资源,包括js、DOM和CSS,如下图所示。同时显示出popup.html页面。

 

在Developer Tools窗口中,调试常用的有Elements、Sources和Console面板。

通过Elements面板,可以对照显示的页面查看页面的组成元素。

通过Sources面板,可以打开所有涉及的js文件,并设置断点,还可以Watch相关的js表达式。跟踪调试过程中,F11键可以单步调试,Shift+F11键可以跳过当前运行的函数,F8键可以恢复运行。

通过Console面板,可以查看JavaScript代码(如console.log(), console.error()等)运行的输出结果,类似于Windows命令行窗口。

 

注意:在此面板中输入location.reload(true),可以重新加载popup页面,从而对popup页面的初始化过程进行跟踪。

 

3)      查看扩展程序的options页面

扩展程序的options页面的过程与popup页面类似,区别仅在于打开Developer Tools窗口的方式。

通过Chrome 浏览器的“ 工具->更多工具->扩展程序”,打开chrome://extensions页面,对于要查看的扩展程序,单击“选项options”弹出options页面,在options页面中右键单击并选择“审查元素”即可。

4)      查看扩展程序的文件

调试扩展程序的时候,可以通过如下的方式直接访问Google Chrome扩展中的文件:

                chrome-extension://<extensionID>/<pathToFile>

其中,extensionID可以通过chrome://extensions的URL查看。在开发过程中extensionID经常变化,可以使用@@extension_id替代;一旦打包部署就拥有永久的extensionID。



版权声明:本文著作权归原作者所有,欢迎分享本文,谢谢支持!
转载请注明:chrome插件开发之调试-转载 | 沙聚塔
分类:web 标签:,

发表评论


表情