教程:调试

这一教程向您介绍如何使用 Google Chrome 浏览器内建的开发者工具来交互性地调试扩展程序。

查看扩展程序信息

要遵循这一教程,您需要入门部分的 Hello World 扩展程序。在这一部分,您将会加载扩展程序,并在扩展程序页面中查看它的信息。

  1. 如果还没运行的话请加载 Hello World 扩展程序。如果扩展程序已经运行,您将看到浏览器地址栏右边的 Hello World 图标

    如果 Hello World 扩展程序还没有运行,请找到扩展程序文件并加载它们。如果您手边没有这些文件,从这一 ZIP 文件解压缩。如果您需要有关加载扩展程序的指导请参见入门

  2. 进入扩展程序页面(chrome://extensions),并确保该页面处于开发者模式。
  3. 在该页面中查看 Hello World 扩展程序的信息,您可以看到一些细节,例如扩展程序的名称、描述以及标识符。

审查弹出内容

只要您的浏览器处于开发者模式中,就可以方便地审查弹出内容。

  1. 进入扩展程序页面(chrome://extensions),并确保开发者模式处于启用状态。进行以下工作时不需要扩展程序页面一直开着。即使页面没有显示,浏览器也将记住设置。
  2. 右击 Hello World 图标 ,并选择审查弹出内容菜单项。弹出内容将会出现,并且如下图所示的开发人员工具窗口将会显示 popup.html 的代码。

    只要开发者工具的窗口开着,弹出内容也将一直保持打开状态。
  3. 如果 Scripts 按钮还未选中则单击它。
  4. 单击控制台按钮 (在开发者工具窗口的底部,从左边开始的第二个),这样您可以同时看到代码和控制台。

使用调试器

在这一部分,弹出页面自己添加图片时您将跟踪它的执行。

  1. 搜索 img.src,单击它出现的行号(例如,37),在添加图片的循环中设置断点。

  2. 确保您可以看到 popup.html 的内容,它应该显示 20 个 "hello world" 图片。
  3. 在控制台提示符中,输入 location.reload(true) 重新加载弹出页面:
    > location.reload(true)
    

    弹出页面在重新加载时会变成空白,并且执行将在第 37 行停止。

  4. 在工具窗口的右上角,您应该能看到本地变量。这一部分显示当前作用域内所有变量的值。例如,在如下屏幕截图中 i 的值为 0,photos 是包含一些元素的节点列表。(事实上,它包含 20 个元素,索引从 0 至 19,每一个代表一张照片。)

  5. 单击开始/暂停按钮 (在开发者工具窗口的右上角),执行一次图片处理循环。您每一次单击该按钮后,i 的值就会递增,并且弹出页面中出现另一个图标。例如,当 i 为 10 时,弹出页面如下图所示:
  6. the popup page with 10 images

  7. 使用开始/暂停旁边的按钮来进行逐过程、逐语句调试或完成函数调用。要让页面完成加载,请单击第 37 行删除断点,并按下开始/暂停按钮 继续执行。

总结

该教程演示了一些您可以用来调试扩展程序的技术:

  • 扩展程序页面(chrome://extensions)中找到您的扩展程序标识符以及指向其页面的链接。
  • 使用 chrome-extension://扩展程序标识符/filename 查看较难到达的页面(以及您的扩展程序中的任何其他文件)。
  • 使用开发者工具审查并单步调试页面的 JavaScript 代码。
  • 在控制台中使用 location.reload(true) 重新加载当前审查的页面。

接下来做什么?

现在您已经熟悉了调试过程,如下是有关接下来做什么的建议:

  • 观看扩展程序视频开发与调试(英文)。
  • 尝试安装和审查其他扩展程序,例如示例
  • 尝试在您的扩展程序的 JavaScript 代码中使用常见的调试 API,例如 console.log()console.error()。例如:console.log("Hello, world!")
  • 遵循开发人员工具教程(英文),浏览开发人员工具网站(英文),并观看一些视频教程。

有关更多想法,请参见入门中的接下来做什么?部分。