chrome插件开发之调试-转载

文章目录[隐藏]

• 调试Content Script
• 调试Background
• 调试Popup
• 一些问题

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