教程:调试

这个指南会向您介绍如何使用Chromium的内建开发工具进行扩展调试。

查看扩展信息

  1. 加载 Hello World 扩展。如果这个扩展正在运行中,你将在浏览器右边的地址栏上看到 Hello World 的图标。

    如果这个扩展并未运行,你可以找到扩展文件,并且加载它们。如果你没有扩展文件,可以在这里下载它的zip文件,然后按创建扩展范例的方法加载它。

  2. 查看 Hello World 扩展的信息,你能看到扩展的名称、描述、扩展ID。

审查popup页面

  1. 点击 Hello World 图标 ,在弹出窗口中点击右键,选择“审查元素”菜单项,popup.html将会被显示在开发者工具的窗口中。

  2. 如果脚本按钮没有被选中了,点击它。
  3. 点击控制台按钮(在开发者窗口的左下角,第二个按钮就是),这样你可以即看到代码,又看到控制台。

使用调试器

  1. 搜索”img.src”,然后在这个位置设置断点,只要在行号上单击即可设置。(比如:37行)。

  2. 确认你能看到popup.html标签,它将显示20个“hello world”图片。
  3. 在控制台上,输入 location.reload(true) 重新加载这个页面:
    > location.reload(true)
    
  4. 在工具窗口的右上方,你能看到局部变量。在这个例子中,它会显示出所有当前范围所见的变量。例如:在下面的屏幕截图上,变量i=0,photos则列出了一部分的Element列表。实际上,它包含了20个元素,每个代表一个图片。

  5. 点击play/pause按钮(在开发者工具窗口的上右方)做一次图像处理循环,每次你点击这个按钮,i会加1,popup页面会显示更多另外的图标,当i是10的时候,popup页看起来像如下图所示:

  6. 点击play/pause按钮后面的的按钮,可以步进到函数调用的上层,为了让页面完成加载,点击之前的第37行,禁用之前设置的断点,接着按下play/pause按钮继续执行。

小结

这个指南示范了简单的扩展调试,简单小结一下: