Chrome浏览器扩展开发系列之二:Google 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代码