Chrome 页面和脚本调试新手指南

• 下载文章中用作示例的演示文件 - 33.42 KB

引言

当您开始开发包含大量 HTML 和 JavaScript 的网页时，查找 bug 会变得越来越重要。借助现代浏览器中引入的功能，快速轻松地识别它们变得容易得多。然而，了解浏览器控制台的功能及其作用仍然是一个谜。在本文中，我希望阐明一些关键功能以及如何利用它们来发挥您的优势。

首先，我们将了解 Chrome 控制台的各种组件，然后开始研究如何识别编码错误、操作 JavaScript 对象、修改 CSS、逐步执行 JavaScript 代码并观察值、动态重写和测试 JavaScript 代码、调用方法以及从控制台内部运行针对 DOM 的 jQuery 调用。

我可能还有很多东西要学，但对于初学者来说，这已经绰绰有余了！我们开始吧？

注意：撰写本文时，我使用的是 Chrome 14.0.835.202 m，基于修订版 15.0.874.106 m。

目录

在本文中，我们将主要关注以下几点：

• 调用调试器
• 调试器控制台的结构
• 操作页面 CSS
• 调试器控制台
• 识别代码错误
• 查看和编辑 JavaScript 变量和方法
• 从控制台执行函数
• 添加变量和函数
• 控制台消息
• 控制台计时器
• 断点、监视和代码单步执行
• 代码视图美化打印
• 资源视图
• 网络视图
• 时间线视图
• 性能分析视图
• 审核视图
• 摘要
• 历史

调用调试器

要能够查看和使用调试器，我们需要做的第一件事就是调用它。与任何现代应用程序一样，可以通过多种方式实现。各种方法如下：

• 从 Chrome 的“工具”菜单中，您可以选择“JavaScript 控制台”
• 使用键盘快捷键“CTRL+SHIFT+J”
• 右键单击要调试的页面，然后选择“检查元素”

第三种方法是最简单的方法，也是我最喜欢的，它不仅会打开控制台，还会选中并高亮显示您右键单击的元素，在控制台中显示的源文件中，这使得事情更加容易。我们将使用这种右键单击方法来介绍下一部分。

调试器控制台的结构

为了查看控制台的各个元素，让我们检查一下 The Code Project 主页。因此，在 Chrome 中，导航至 https://codeproject.org.cn/，右键单击“Welcome to The Code Project”并从弹出上下文菜单中选择“Inspect Element”。

现在，控制台会显示出来，但它可能“停靠”在您正在检查的页面上，或者显示为独立的 Chrome 窗口。您喜欢哪种方式取决于您，很可能取决于您想实现的目标。但就本文而言，我将使用“未停靠”的独立视图。要切换视图，您可以使用下方图 1 中的左下角图标（I）。

当您“检查元素”时，您悬停的元素会在源视图中被选中，并且在您右键单击的页面上也会直接高亮显示。这使得您很容易识别页面上的元素，并将其与源中的标记对应起来。如果您将鼠标移到源上，您会注意到页面上的高亮会移动，显示这两个视图之间的关系。

那么图片中的其他部分是什么呢？从左上角顺时针方向移动，这些项目是：

• A - 被检查的元素选择和关联的页面高亮
• B - 在调试器视图之间切换（稍后我们将深入研究这些视图）
• C - 搜索面板
• D - 属性窗格，显示 CSS 标记值、事件监听器、尺寸指标和元素属性
• E - 调试器设置
• F - 从根到选定元素的 DOM 树
• G - 页面元素选择切换器，单击图标，然后单击页面上的元素。
• H - 显示/隐藏 JavaScript 控制台
• I - 停靠/取消停靠调试器

我们稍后会探讨各种视图和 JavaScript 控制台，但首先，当我们打开一个控制台时，让我们看看如何操作页面的 CSS。

操作页面 CSS

我们使用了“Welcome to The Code Project”的 H1 标签来检查和访问浏览器。如果您已移开此元素或更改了视图，请切换回“Elements”（元素）视图 (A)（参见下方的图 2），然后单击相应的标签 (B)。在右侧，展开“Matched CSS Rules”（匹配的 CSS 规则）属性视图，您可以看到与此元素相关的 CSS 属性 (C)。如果您愿意，可以通过单击 (D) 中的文件名来进一步深入到实际的 CSS 文件。

每个属性在鼠标悬停在其 CSS 规则 (E) 上时都会出现一个复选框，您可以切换每个属性来观察它们的影响。如果您试图确定样式是从哪里继承来的，您可能希望这样做。在此示例中，如果您取消选中 color 属性，您会注意到页面会立即更新，绿色的“Welcome to.....”文本将变为黑色，这是 H1 标签的默认继承颜色。

现在，如果您在尝试样式和颜色时会怎样？可以编辑属性名称并更改其值。这可以通过双击属性名称或属性值来实现。让我们将“Welcome to....”文本更改为红色。对于 color 属性，双击值并输入 #FF0000，然后按回车键，您会看到文本变成红色。请记住，这只是在内存中；刷新页面后，更改将丢失！

还可以为元素添加额外的 CSS 属性。为此，双击结束花括号“}”，将添加一个新的空键/值对。让我们给这段“Welcome to....”文本添加一个背景颜色。当您键入属性名称时，调试器会提示您最接近的有效属性名称。

调试器控制台

调试器控制台可用于查看错误消息、显示对象值、编辑对象值、执行 JavaScript 方法等。可以通过单击图 1 项目 (H) 中的图标（下方图像左下角显示）来查看和隐藏控制台。

控制台也可以显示在主调试器视图（即 Elements、Resources、Network、Scripts、Timeline、Profiles、Audits）的底部。如果您单击“Console”（控制台）视图工具栏按钮（参见图 1 中的区域项目 (B)），控制台将占据整个调试器窗口。

识别代码错误

在本节中，我们将着眼于识别代码错误。为了使这更容易，我在下载文件中包含了一些示例。打开 example1.htm，其中有一个故意的代码错误，您将看到下方图 6 所示的页面。此页面显示两个自动更新的当前日期/时间显示。“Area 1”存在故意代码 bug，因此不更新，“Area 2”应每秒更新一次新的日期/时间戳。

如果我们右键单击“Area 1”并“Inspect Element”（检查元素），这将打开调试器。在调试器的右下角，您会看到一个红色的图标和一个数字。这是检测到的错误数量。如果您显示控制台，将列出错误。在每个错误消息的右侧，您将看到每个错误消息的文件名和行号（取决于选定的过滤器）。如果您单击文件名，它将在代码窗格中显示，并在错误行下方插入一个横幅，其中包含错误消息。这在下方的图 7 中显示：

在此示例中，您将看到我们有一个“Uncaught ReferenceError: now is not defined”（未捕获的引用错误：now 未定义）。查看横幅正上方的行，您可以看到一个方法 now()，这就是问题所在。这是一个虚构的方法，它不是核心 JavaScript 的一部分，也不是在任何引用脚本块或源文件中定义的。稍后在本文中，我们将研究如何在不打开任何源编辑器的情况下，动态地修复此问题以进行测试。

查看和编辑 JavaScript 变量和方法

如您在此示例的代码中所见，有两个变量：autoupdate 和 updateInterval。在控制台中，如果您键入变量名，您将看到它的当前值。您还可以设置新值。让我们将 updateInterval 设置为 5 秒，然后重新检查变量。该变量由 setTimeout 函数使用，该函数使用毫秒（因此是 5000）。

只需键入变量名并按回车键即可显示其当前值；以同样的方式分配新值。您还会注意到，当您键入变量名时，Chrome 会自动补全您已键入内容的最匹配的有效对象。如果显示了您想要的，只需按右箭头键，Chrome 就会完成其余部分。对于长对象名称非常方便。更改此变量后，您还应该注意到，在网页上，“Area 2”现在每 5 秒更新一次。控制台命令如下所示：

对函数也可以做同样的事情。如果我们键入有问题的函数名 updateDateTime，该函数将显示在控制台中：

现在，就像变量一样，您可以编辑函数。让我们将函数从代码视图复制并粘贴到控制台中，然后在控制台中，删除文本（Chrome 会复制错误横幅文本），并将无效的 now() 替换为 Date().toString()。当您输入更新后的函数时，控制台应返回 undefined。注意：您不能使用“Enter”键输入新行，必须使用“Shift + Enter”在编辑时添加新行。重新输入函数名，并确认您的更改已被接受。

现在您已经更新了内存中的函数，您可以对其进行测试。我们将在下一节中进行。

从控制台执行函数

在前一节中，我们修改了有问题的函数，现在让我们运行它。这次在控制台中，当您键入函数名时，请在其末尾添加括号 ()。当您按回车键时，函数将被执行而不是显示，网页应该开始以刷新速率自动更新。如下所示：

在此示例中，您还会看到网页使用了 jQuery。也可以从控制台执行 jQuery 并更新网页。在下面的图像中，您将看到我们首先通过将变量 autoupdate 设置为 false 来停止自动更新，然后执行两个 jQuery 语句：

添加变量和函数

您不仅可以编辑变量和函数，而且在测试期间您可能想添加一些。如果您关闭所有活动的调试控制台并关闭 Example 1 网页，这将清除内存中的更改。现在，让我们重新打开 Example 1，回到一个带有有问题函数的干净页面，并检查页面以显示控制台和相关的错误。

正如我们所知，函数 now() 是无效的。让我们将其添加到内存会话中。在控制台窗口中，只需键入函数。注意：您不能使用“Enter”键输入新行，必须使用“Shift + Enter”在编辑时添加新行。输入新函数后，按 Enter 键提交。现在，如果我们执行 updateDateTime() 方法，您将看到网页正在更新，这表明您新添加的 now() 函数正在工作。变量可以像在编辑器中定义它们一样添加，例如 var name="bob";。下面的图像显示了新函数被添加和执行：

控制台消息

在调试或开发代码时，您经常希望将消息输出到控制台以查看正在发生的情况。正如您所见，在控制台的底部有三个不同的消息过滤器：Errors（错误）、Warnings（警告）和 Logs（日志）。可以直接向这三个类别写入消息。如果我们现在切换到我提供的另一个示例文件（example2.htm），在 Chrome 中打开它，然后切换到控制台，您可以看到这些消息正在被写入。如果您将变量 autoupdate 设置为 false，您会看到一个控制台错误消息触发。这三个条目显示在下方：

您可以在页面的源代码中看到，这些消息只是由三个控制台方法之一生成：

console.log("message string");
console.warn("message string");
console.error("message string");

控制台计时器

控制台还提供了执行时间监控操作的方法。使用这些方法，您可以启动和停止秒表，以找出例如一个循环需要多长时间，或者一个操作需要多长时间来执行一个任务。控制台可以运行多个计时器，您只需为它们指定任何您选择的标识符即可访问它们。当计时器停止时，它将输出标识符后跟持续时间（以毫秒为单位）。

例如，如果您打开控制台并键入以下两个语句：

console.time(0) 
console.time("Some Timer") 

这将创建两个计时器，一个带有整数标识符 0，另一个带有字符串标识符“Some Timer”。

您只需调用 timeEnd(identifier) 方法即可输出经过的时间：

console.timeEnd(0) 
0: 12456ms 
console.timeEnd("Some Timer") 
Some Timer: 23489ms 

使用前面介绍的修改函数的技术，您当然可以将这些调用注入到内存代码中，或者包含在您的源标记中。这些方法可以帮助您识别运行缓慢的代码，并允许您为编写的任何算法的改进进行基准测试。

断点、监视和代码单步执行

在本节中，我们将研究使用断点暂停代码执行、添加监视和单步执行代码。在本节中，我们将使用 example2.htm 文件。关闭所有浏览器窗口并打开 Example 2 页面的新副本，然后调用调试器。您的页面应该正在更新计数器并且控制台消息正在被记录。

单击“Scripts”（脚本）视图，您将看到页面的代码。浏览它，您会发现我们有两个递增的计数器。counter 位于页面的全局范围内，而 x 位于 for 循环的作用域内。例如，我们可能希望检查这些变量并逐步执行代码，以查看它们的值何时更新，从而使我们能够遵循代码逻辑。在本例中，我们将使用两个断点和两个监视。因此，首先，让我们添加两个断点。在脚本中，单击第 15 行和第 19 行的边距。代码将暂停，并将设置两个断点。如下面的图像所示：

调试器还可以设置为在 3 种异常模式下运行：

1. 不暂停异常
2. 暂停所有异常
3. 暂停未捕获的异常

要更改模式，请单击上面图像底部所示的图标。

当代码命中断点时，它会暂停执行；然后可以使用指定的单步执行控件逐步执行代码。您现在也可以开始检查变量的值。让我们为要监视的变量添加两个监视。为此，单击监视区域中的“+”，然后在字段中输入变量名。将鼠标悬停在已定义的监视器上会显示左侧的“-”符号；单击它将删除该监视器。

如果您然后按播放以继续执行，当代码命中每个断点时，监视器将使用当前变量值进行更新。但是，如果您命中一个断点并且任何变量超出范围，则会显示 undefined。您还可以将鼠标悬停在代码中的任何变量上，并且会弹出一个窗口显示当前值。如下所示：

代码视图美化打印

您可能会发现自己试图挑选被最小化的代码文件。所有空格都已被删除，它可能看起来像一大块代码。在调试器（“Scripts”视图）中加载 Example 2 后，如果您切换到 jQuery 文件，您将看到最小化的 JavaScript。在代码窗格的底部，您将看到一个带有双花括号“{}”（鼠标悬停显示“Pretty Print”）的按钮。单击此按钮将把代码格式化为更易读的格式。以下两张图片显示了“Pretty Print”的之前和之后：

资源视图

资源视图基本上显示了页面使用的所有资源。这包括会话存储、本地存储、Cookie、后端代码文件、图像文件等。还可以从该视图中删除 Cookie 和单个 Cookie 属性。使用控制台，您还可以例如添加和编辑 localStorage 值。这可以通过 localStorage["item name"] = value 来完成。下面是 The Code Project 主页的资源视图快照：

网络视图

您是否曾经加载过一个页面，想知道为什么它有时在加载某些元素时似乎会停滞？使用“Network”（网络）视图，可以分析所有网络活动，加载资源的时间以及事情发生的顺序。这有助于诊断库、图像等问题。下图是加载 The Code Project 主页的部分捕获。鼠标悬停在图表上的元素上会提供更多信息。使用底部的过滤器，您可以过滤屏幕上显示的内容。

时间线视图

时间线可用于显示所有发生的事件、执行它们的时间、内存利用率等。还可以保存和加载捕获的数据以供以后分析（右键单击顶部的“Timelines”（时间线）或“Memory”（内存）标签）。可以使用各种过滤选项（例如，可以隐藏短持续时间，例如那些小于 15ms 的）。通过单击顶部的“Timelines”或“Memory”标签，您可以切换视图。下面是另一个 Code Project 捕获：

性能分析视图

“Profiles”（性能分析）视图是当您深入到浏览器的深层结构时，记录会话并拍摄内存使用情况的快照。由于这有点深入，我认为它远远超出了初学者的范围。总之，它在那里，您可能想去里面看看是什么。

审核视图

最后要看的是“Audits”（审核）视图。审核可以查看当前页面，或在页面重新加载时执行审核。审核将分析页面内容并提供改进页面性能的更改建议。正如在对 Code Project 主页执行的审核中所示，Chrome 提出了关于脚本和 CSS 位置的建议，以提高并行下载速度。同样，这只是为了提供信息，如果您想深入研究，可以自行决定。

摘要

正如您所见，调试器中有很多功能，它可能是一个非常强大的工具，尤其是在 JavaScript 编码方面。我肯定觉得它非常有用。与任何此类事物一样，最好的方法是亲自尝试。希望现在您知道可以在内存中编辑和调整 JavaScript 函数和变量，这将为您节省一些时间，在查找问题时不必在 IDE 和浏览器之间来回切换。

还有许多未涵盖的功能，例如事件断点或深入的对象检查。但是，如果您掌握了上述内容，您就可以自己找出这些额外功能。一如既往，只需通过实验来学习。

希望您觉得这对调试器有了有用的了解，也许我向您展示了一些您不知道的东西（我在编写它的过程中也发现了一些新东西！）

感谢阅读。

历史

• 2011 年 11 月 27 日 - V1.5，移除了无效的控制台引用，文本略作修改
• 2011 年 11 月 8 日 - V1.4，添加了控制台计时器部分
• 2011 年 10 月 29 日 - V1.3，修正了拼写错误
• 2011 年 10 月 28 日 - V1.2，修正了拼写错误，添加了异常模式引用
• 2011 年 10 月 25 日 - V1.1，修正了拼写错误，图片调整
• 2011 年 10 月 24 日 - V1.0，初次发布