七、调试工具

在本章中，我们将学习能够使我们的工作更容易的调试工具。 我们将使用市场上主要浏览器提供的调试工具，如 Internet Explorer、Firefox、谷歌 Chrome 和 Safari。

我知道在 Internet 上有大量的文档，因此，在本章中，我将非常简要地介绍这些特性，然后通过一个简单的示例介绍如何利用调试特性使您的工作更轻松。

一般来说，您将了解上述针对每个浏览器的调试工具的每一个主题:

  • 在哪里以及如何获得调试工具
  • 如何使用工具调试 HTML, CSS 和 JavaScript
  • 高级调试，例如设置断点和监视变量
  • 如何使用调试工具执行分析

让我们开始吧。

ie8 开发者工具(以及 IE6 和 ie7 的开发者工具栏插件)

在本节中，我们将重点关注 Internet Explorer 8 的开发人员工具栏。

注释

如果你使用的是 ie6 或 ie7，以下是如何安装 ie6 或 ie7 的开发者工具栏。

您需要访问http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en并下载开发者工具栏。 如果你正在阅读这本书的纸质版本，并且不能复制和粘贴上面的 URL，谷歌“IE6 或 IE7 的开发者工具栏”，那么你应该进入你需要的下载页面。

请注意，上述网页中的工具栏不兼容 Internet Explorer 8。

如果你不希望单独安装开发工具，我建议你安装 Internet Explorer 8; IE8 自带开发工具，与单独为 IE6 或 IE7 安装开发工具相比，它更方便。

从这里开始，我将介绍使用 Internet Explorer 8 内置工具的开发人员工具。

使用 IE 开发工具

现在我们已经获得了插件，是时候通过一个例子来了解它是如何工作的。 我在本章的 source code文件夹中准备了一个示例代码; 进入该文件夹并在浏览器中打开名为 IE-sample.html的文档。 基本上这个例子所做的是，它要求您输入两个数字，然后它将对这两个数字执行加、减、乘和除运算。 结果将显示在表格右侧的一个框中。

现在对它进行测试，一旦你完成了测试，我们将开始学习如何使用 IE8 的调试工具来调试这个网页。

打开

我假设文件在您的浏览器中仍然是打开的。 如果没有，在浏览器中打开 IE-sample.html(当然是使用 Internet Explorer)。 打开示例之后，您需要打开调试工具。 您可以浏览Tools，然后点击Developer Tools。 您也可以按键盘上的键+F12键进入调试工具。

用户界面简介

在我们进入实际的调试过程之前，我将简要地关注一下 IE 调试工具的关键特性。

A brief introduction to the user interface

  1. HTML选项卡显示当前正在浏览的脚本或网页的源代码。 当你点击这个选项卡时，你会在右边看到相关的选项卡，如上面的截图所示。
  2. CSS选项卡显示你正在浏览的当前网页使用的 CSS 样式表。
  3. 脚本:脚本选项卡是执行 JavaScript 调试任务的地方。 当您单击此选项卡时，您将得到与调试任务相关的特性列表，如控制台、Breakpoints、Locals和Watch。
  4. 分析器:当您选择执行分析器时，分析器选项卡显示网页的分析器数据。

调试基础 IE 调试工具

一般来说，IE 的调试工具有两种使用方式:

  • 在一个单独的窗口
  • 停靠在浏览器中

您可以在浏览器中停靠调试工具，方法是转到调试窗口的右上角，单击大头针图标。 在我的例子中，我更喜欢把它停靠在浏览器中，这样屏幕上就有更多的浏览空间。 此外，由于示例代码相当小，将其停靠在浏览器上就足够了。

一般来说，调试面板的左边是 IE 团队所说的主要内容面板。 这个面板显示网页的文档对象模型; 这个面板为我们提供了网页源代码的程序化概述。

以下是使用 IE 调试工具时的一些调试基础。

使用 IE8 开发工具进行 HTML 动作调试的时间到了

  1. 查看网页的 HTML 元素，点击主要内容面板中的HTML标签。 我们可以点击位于主内容面板第一行的+图标。 【显示】
  2. 当你点击+图标时，当<html>标签展开时，你会看到<head>和<body>出现; 再次点击它们将显示包含在<head>和<body>标签中的其他元素。 例如，让我们用 id wrap点击 div元素。

  3. On clicking the div element, you can immediately see the various properties associated with wrap, such as its parent element, its inherited HTML and CSS, and the CSS properties that belong to wrap.

    我们可以通过点击在属性窗格上找到的各种命令来执行进一步的检查:

    • Style:该Style命令通过提供应用于所选元素的所有规则的列表来改进 CSS 调试。 规则按优先顺序显示; 因此，那些最后应用的元素会出现在底部，任何被另一个属性覆盖的属性都会被划掉，这让您能够快速理解 CSS 规则如何影响当前元素，而无需手动匹配选择器。 您可以通过切换规则旁边的复选框来快速打开或关闭 CSS 规则，该操作将立即在页面上生效。 在我们的例子中，您将看到 #wrap元素的两个继承:body 和 HTML。 您可以通过点击属性值并输入 #eee将颜色属性更改为 #eee。 一旦你完成，按输入，你可以立即看到变化。
    • TraceStyles:该命令包含与Style相同的信息，只是它按属性分组。 如果您正在查找有关特定属性的信息，请切换到Trace Styles命令。 只需找到您感兴趣的属性，单击加号(+)图标，并查看设置该属性的所有规则的列表—同样按照优先顺序。
    • Layout:Layout命令提供框的模型信息，如元素的偏移量、高度、填充等。 在调试元素定位时使用此命令。
    • Attributes命令允许您检查所选元素的所有已定义属性。 此命令还允许您编辑、添加或删除选定元素的属性。

使用 IE8 开发工具进行动作调试的时间

现在让我们将注意力转移到主要内容面板。

  1. 点击CSS标签，这样我们就可以访问所有的 CSS(外部或内部)文件。 一旦你这样做了，你会看到一个相同的 CSS，我们的网页使用。
  2. 现在我想让你点击一个样式属性，在BODY中找到color，并将其更改为#ccc。 您将立即看到我们网页中文字颜色的变化。

刚才发生了什么事?

我们刚刚完成了调试的基础，这为我们在使用 IE 的调试工具调试 JavaScript 之前提供了必要的知识。

我们在上面所做的简单例子就是我们所说的“实时编辑资源”; 我们可以编辑任何 HTML 或 CSS 属性，而不需要回到我们的源代码，修改它，保存它，然后在浏览器中重新加载文件。 在我看来，这些特性是我们应该使用调试工具的一些关键原因。

但是，请注意，您所做的更改仅存在于 Internet Explorer 网站的内部表示中。 这意味着刷新页面或导航会返回原来的站点。

然而，在某些情况下，您可能想要保存更改，为了做到这一点，您可以单击保存按钮来保存当前的 HTML 或 CSS 文件。 这样做是为了防止意外覆盖您的原始源代码。

让我们继续讨论 JavaScript。

调试 JavaScript

现在是时候学习如何使用 IE 的开发工具调试 JavaScript 了。

使用 IE8 开发工具调试 JavaScript

下面是开始调试的步骤:

  1. 点击主要内容面板中的脚本选项卡。
  2. 接下来，点击按钮说开始调试。

  3. After clicking on Start Debugging, you will have all of the functionality of a proper debugger.

    如果在调试过程中需要在任何点停止调试，请点击停止调试。

    现在让我们看看使用调试工具的各种功能可以做些什么。 让我们从第一个开始:设置断点。

    我们通常设置断点来控制执行。 在前面的章节中，我们通常依靠alert()或其他函数来控制程序的执行。

    然而，使用 IE 的调试工具，你可以通过设置断点来控制程序的执行; 您可以节省大量的alert()，或其他自定义函数。

    现在，让我们使用断点来控制执行。

  4. 您可以通过右键单击行号并选择插入断点来设置断点。 在我们的例子中，让我们转到包含 buildContent(answerB, "minus"); 右键单击，然后选择插入断点。

  5. Now try running the example by entering some values into the input fields in your browser. You will see that the dynamic content will not be created on the black square on the right-hand side. This is because the code execution stops at buildContent(answerB, "minus");.

    我们通常使用断点来检查变量; 我们需要知道代码是否按照我们希望的方式执行，以确保它是正确的。 现在，让我们看看如何设置断点和检查变量。

    我们通过使用监视功能来检查变量。 继续前面的示例，我们可以通过单击 watch 窗格来使用监视功能。 或者，您可以单击 Locals，它提供了类似的功能，并允许我们查看一组变量。 这样做可以监视自定义的变量列表，也可以检查变量的当前状态。

    要做到我们刚才描述的，我们需要执行以下步骤:

  6. 点击Start Debugging，为包含 var answerA = add(numberA, number)的行设置断点; buildContent(answerA, "add");

  7. 现在，运行示例，并分别输入5和3作为输入字段。 然后点击提交。

  8. Now go to your Debugger panel, and click on Locals. You will see the output as shown in the following screenshot:

    Time for —more Debugging JavaScript by using the IE8 developer tool

    • What this panel shows is a list of local variables that are local to the function where breakpoints are set

      注意,answerA,answerB,answerC,【显示】和answerD 目前未定义当我们没有执行任何计算,因为我们有在var answerA = add(numberA, number)设置断点;。

  9. Next, click on Watch. You can now add the variables that you want to inspect. You can achieve this by typing in the name of the variables. Type in answerA and numberB, and then press Enter. You will see a screen similar to the example shown in the following screenshot:

    Time for —more Debugging JavaScript by using the IE8 developer tool

    • 如前所述，answerA还没有定义，因为它还没有被我们的程序计算出来。 此外，因为我们输入了numberA和numberB的值，所以numberB自然就被定义了。 【显示】

    注释

    你注意到我们输入的类型不正确了吗? 这是因为我们使用了 .value方法来访问输入字段的值。 作为一名优秀的 JavaScript 程序员，我们应该使用 parseFloat()将值转换为浮点数。

    • We can continue to execute the code (in debugging mode) by performing Continue, Step In, Step Over, and Step Out operations in the debugging window.

      我们将快速进入示例，了解 Continue、Step In、Step Over 和 Step Out 是如何工作的。 继续上面的例子:

  10. Click on the Continue button, which is green and looks like a "play" button. Immediately, you will see that the code will execute until the next breakpoint. This means that the variables that were previously undefined will now be defined. If you click on Locals, you will see output similar to the example shown in the next screenshot:

    Time for —more Debugging JavaScript by using the IE8 developer tool

  11. Click on Watch, and you will see a screen similar to the example displayed in the next screenshot:

    Time for —more Debugging JavaScript by using the IE8 developer tool

    这意味着 Continue 的效果是，它将从一个断点执行代码到下一个断点。 如果没有第二个断点，代码将一直执行到最后。

    你可能想尝试一下“一步进来”、“一步过去”和“一步出去”。

    一般来说，他们是这样做的:

    • Step In:在代码执行时跟踪代码。 例如，除了点击Step in而不是Continue之外，您可以执行上述示例中所示的步骤。 您将注意到您正在有效地跟踪代码。 接下来，您可以检查Locals和Watch窗口，您将注意到前面未定义的变量将随着代码的进展而被定义。
    • Step Over:这只是移到下一行代码，而不像 Step in 中那样跳到其他函数中。

    • Step Out: This simply "steps out" of the current breakpoint until the next breakpoint. It is similar to Continue. If you use Step Out after Step In, it will continue to the next breakpoint (if any).

      现在让我们转向下一个有用的特性，当遇到错误时停止代码。

      要启用该功能，您需要点击Break on Error按钮，或者您可以简单地按ctrl+Shift+E。 一旦开始调试，应该自动启用该特性。

      这个特性的作用是在发现任何错误时停止执行代码。 例如，取消注释:buildContent(noSuchThing, "add");一行，并在调试模式下运行代码。 在控制台的调试窗口中，你会看到下面的截图:

    Time for —more Debugging JavaScript by using the IE8 developer tool

    这是使用调试器的一个很酷的事情; 它可以帮助您在运行时发现错误，以便您可以快速识别您所犯的错误。

    现在我们已经对 IE 调试工具的一些高级特性有了基本的了解和了解，是时候关注一下我们的 JavaScript 程序的性能了。

    Internet Explorer 调试工具自带一个内置的分析器，称为 JavaScript 分析器，它可以通过改进性能将您的站点提升到一个新的水平。

    一般情况下，分析器会提供关于每个站点的 JavaScript 方法甚至内置 JavaScript 函数所花费时间的数据。 下面是如何使用该功能。

  12. 在浏览器中使用示例源代码，打开开发工具，然后点击Profile选项卡。 然后单击Start Profiling，开始会话。

  13. Go to your browser, and enter some sample values. For instance, I entered 5 and 3. Once you have entered the sample values, go to your debugging window and click on Stop Profiling. A screen similar to the one shown in the following screenshot will be displayed:

    Time for —more Debugging JavaScript by using the IE8 developer tool

  14. 注意，Jscript Profiler 包含了花费在每个函数上的时间(还给出了每个函数的名称)。 还给出了每个函数的使用次数，如 Count 列所示。 您可能已经注意到，我们的每个函数所花费的时间是 0.00; 这是因为我们的示例程序相对较小，所以所需的时间接近于零。

刚才发生了什么事?

我们刚刚介绍了 Internet Explorer 的开发人员工具，它可以帮助我们以一种非常精简的方式执行调试任务。

如果你想知道手动调试和使用调试工具之间的区别，我可以根据经验告诉你，单独使用调试工具节省的时间足够让我们使用调试工具了。

您可能会理解，在为 Internet Explorer 开发时，会涉及到各种各样的怪癖; 使用其内置的调试工具将帮助您以一种更有效的方式找出这些怪癖。

记住这一点，让我们继续使用下一个工具。

Safari 或谷歌 Chrome Web Inspector 和 JavaScript 调试器

在本节中，我们将学习在 Safari 和谷歌 Chrome 中使用的 JavaScript 调试器。 这两种浏览器都有相似的代码库，但是有细微的区别，所以让我们先来了解一下 Safari 和谷歌 Chrome 之间的区别。

Safari 和谷歌 Chrome 的区别

如果你是苹果的粉丝，毫无疑问你会觉得 Safari 可能是地球上最好的浏览器。 尽管如此，谷歌 Chrome 和 Safari 都起源于一个叫做 WebKit 的开源项目。

Safari 和谷歌 Chrome 使用不同的 JavaScript 引擎。 从Safari 4.0开始，Safari 使用了一个名为 SquirrelFish 的新的 JavaScript 引擎。 谷歌 Chrome 使用 V8 JavaScript 引擎。

然而，就 JavaScript 调试而言，当我们使用谷歌 Chrome 和 Safari 提供的内置调试器时，这两者几乎是相同的; 甚至连界面也很相似。

在下面的小节中，我将使用 Chrome 来解释这些示例。

使用 Chrome 调试

对于谷歌 Chrome，我们不需要下载任何外部工具来执行调试任务。 调试工具直接与浏览器一起提供。 现在，我们将看到如何使用 sample.html启动调试会话。

打开和启用:我们将开始在 Chrome 中打开和启用调试。 谷歌 Chrome 中有两个工具，你可以使用它们来帮助你执行 web 应用的调试任务:web 检查器和 javascript 调试器。

Web Inspector:谷歌 Chrome 的 Web Inspector 的主要用途是检查你的 HTML 和 CSS 元素。 要使用 Web 检查器，右键单击网页上的任何组件来启动 Web 检查器。 您将能够看到与所单击的组件相关联的元素和资源，包括 DOM 的层次结构视图和 JavaScript 控制台。 使用 Web Inspector，在谷歌 Chrome 中打开 example.html。 将鼠标移动到写有第 2 栏的侧边栏。 右键单击列 2，您将看到一个弹出菜单。 选择检查元素。 打开一个新窗口。 这是 Web 检查器。

现在，我们将继续讨论 JavaScript 调试器。

JavaScript 调试器:使用 Chrome 浏览器的 JavaScript 调试器,选择页面菜单图标,可以发现右边的URL 输入字段,然后去开发商|调试 JavaScript 控制台。 也可以按键+键+J键启动 JavaScript 调试器。 如果您正在使用 Safari 浏览器,您必须首先将使开发者通过单击菜单显示设置图标,找到【t16.1】页面的右边图标,选择的偏好,然后先进去。 在此屏幕上，启用菜单栏中的选项【显示开发】菜单。 点击Page图标，进入Develop，选择Start Debugging JavaScript，即可进入该菜单栏。 界面几乎和我们在谷歌 Chrome 中看到的一样。**

请注意，通过打开 JavaScript 调试器，您将打开与在 Web 检查器中看到的相同的窗口。 然而，默认选项卡现在是Scripts**。 在这个选项卡中，您可以查看前面小节中提到的示例的源代码。

这是我们将用来执行调试任务的主屏幕。 在接下来的会话中，我们将开始做一些基本的调试工作。

如果您已经参加了关于使用 Internet Explorer 开发人员工具的调试会议，那么您要执行的大多数任务和操作在概念上应该是相似的。

我们刚刚探索了打开和启动 Web 检查器和 JavaScript 调试器的基本操作。 现在让我们简要介绍一下用户界面，以便让您快速了解。

用户界面简介

以下是谷歌 Chrome 调试工具的关键功能的简要说明，如下截图所示:

A brief introduction to the user interface

  1. 元素:元素选项卡显示你当前显示的脚本或网页的源代码。 当你点击Elements图标时，你会看到相关的选项卡(如上面的截图右侧所示)，例如Computed Style。
  2. 脚本:脚本选项卡是执行 JavaScript 调试任务的地方。 当你点击Scripts图标时，你会得到一个相关功能的调试列表，如Watch Expressions, Call Stack, Scope Variables和Break。 【显示】
  3. 配置文件:当您选择执行配置文件时，配置文件选项卡显示您的网页配置数据。

使用 Chrome 进行动作调试

  1. 现在，我们将学习如何使用控制台并使用断点来简化调试会话。 我们将从控制台开始。
  2. 控制台基本上显示了您在调试会话中所做的工作。 我们首先看看如何访问控制台。
  3. 首先在你的谷歌 Chrome 浏览器中打开文件 sample.html，如果你还没有这样做。 完成这些操作后，执行以下步骤以显示控制台:

  4. 打开你的 JavaScript 调试器通过选择页面菜单Time for —debugging with Chrome图标,可以发现右边的URL 输入字段,然后去|开发人员调试 JavaScript【显示】。 也可以按键+键+J*键启动 JavaScript 调试器。 Once you have completed step 4, click on the console icon, which can be found at the bottom of the JavaScript debugger. Once you are done, you will see a screen similar to the example shown in the following screenshot:

    Time for —debugging with Chrome

    现在我们已经打开了控制台，接下来讨论调试器最常用的特性。 在此过程中，您还将看到控制台如何记录我们的操作。

    现在，我们将通过学习如何设置断点来继续讨论断点。

    如前所述，设置断点是调试过程的重要部分。 因此，我们将通过设置一个断点来开始实际的调试过程。

    • With sample.html opened in Google Chrome, start your debugger and make sure that you are in the Scripts tab. You can set a breakpoint by clicking on the line number at which we want to set our breakpoint. Let use try going to the line that contains buildContent(answerB, "minus"); and click on the line number. You will see a screen similar to the example shown in the following screenshot:

    Time for —debugging with Chrome

    注意，第 130 行现在有一个蓝色箭头(高亮显示的行)，在源代码面板的右边，您将看到断点面板。 它现在包含了我们刚刚设置的断点。

    运行该示例并在浏览器的输入字段中输入一些值。 我要你在第一个输入栏中输入*4，在第二个输入栏中输入3。 然后点击提交。 您将看到，动态内容不会在右边的黑色方框中创建。 这是因为代码在 buildContent(answerB, "minus")处停止了。* Now go back to your debugger, and you will see the next screenshot on the right-hand side of your source code, similar to the example shown below:

    Time for —debugging with Chrome

    您将看到Call Stack和Scope 变量现在正在被值填充，而 Watch Expressions 没有。 我们将在接下来的几段中详细讨论这些内容。 但现在，我们首先从Call Stack和Scope Variables开始。

    如上面的截图所示，调用栈和作用域变量现在在我们执行程序时用值填充。 一般来说，调用栈包含了正在执行的函数序列，作用域变量显示了在断点或执行结束之前可用的变量值。 【显示】

    下面是当我们点击Submit按钮时发生的情况:执行的第一个函数是formSubmit()，并在该函数中计算var answerA、var answerB、var answerC和var answerD。 这就是作用域变量被我们的值填充的方式。

    总的来说，这是谷歌 Chrome 中调用栈和范围变量的工作方式。 现在，让我们关注一个一直萦绕在我们脑海中的功能，Watch Expression。

    在我们解释什么是观看表情之前，我们最好先看看它的行动。 回到上一个截图，你会注意到Watch Expression在此时没有填充。 现在，我们将尝试通过执行以下步骤来填充 Watch Expression:

    • 刷新浏览器并返回调试器。 在Watch Expression面板中，点击Add，输入 document.sampleform.firstnumber.value、 document.getElementById("dynamic")。 Go back to your browser and enter 4 and 3 for the input values. Click on Submit. Assuming that you have not removed the breakpoint that we set in the previous subsection, you will see the information shown in the next screenshot in the Watch Expression panel:

    Time for —debugging with Chrome

    Watch Expression现在已经普及。 document.sampleform.firstnumber.value和document.getElementById("dynamic")是从我们的 JavaScript 程序中复制的代码行。 如果要跟踪代码，您会注意到document.sampleform.firstnumber.value用于导出第一个输入字段的值，而document.getElementById("dynamic")用于引用div元素。

    到此为止，你就会明白Watch Expression对于查看表达是有用的。 您所要做的就是添加您想要看到的表达式，并且，在执行程序之后，您将看到该表达式的含义、指向或当前值是什么。 这允许您在程序执行时观察表达式的更新。 您不必完成程序就可以看到变量的值。

    现在可以继续调试窗口中的 Continue、Step In、Step Over 和 Step Out 操作了。

    这里的概念与我们在 Internet Explorer 开发人员工具中看到的非常相似。 如果你想知道执行这些操作的按钮在哪里，你可以在Watch Expression面板上找到它们。 以下是每个操作的相关概念:

    • Step In:在代码执行时跟踪代码。 假设您仍然在我们的示例中，您可以单击带有向下箭头的图标。 您将看到您正在有效地跟踪代码。 当您继续点击Step In时，您将看到Scope Variables和Call Stack中的值发生变化。 这是因为在代码的不同位置，不同的变量或表达式有不同的值。
    • Step Out:这只是转移到下一行代码，而不跳转到其他函数，类似于 Step In 的工作方式。

    • Step Over: This simply moves to the next line of code.

      在最后一小节中，我们将重点讨论如何暂停异常。 一般来说，这意味着程序将在遇到问题的那一行停止。 以下是我们将采取的行动:

      • 在编辑器中打开 sample.html。 搜索写着 buildContent (noSuchThing, "add")的行; 并取消它。 保存文件并在谷歌 Chrome 中打开。 打开调试器。 点击Show Console按钮右侧带有暂停符号Time for —debugging with Chrome的按钮。 这将导致调试器在遇到错误时停止执行。 As usual, enter some values for the input fields. Click on Submit. Once you have done so, go back to your debugger, and you will see the information shown in the following screenshot:

    Time for —debugging with Chrome****

* 通常，如果启用异常暂停特性，就可以得到这种可视化消息。

刚才发生了什么事?

我们已经涵盖了使用谷歌 Chrome 的基础知识。 如果您遵循了前面的教程，那么您将学会如何使用控制台、设置、进入、退出和越过断点、在异常时暂停以及观察变量。

通过混合使用上述特性，您将能够快速地嗅出并发现意想不到的 JavaScript 错误。 甚至可以跟踪 JavaScript 代码执行时的工作情况。

在接下来的几节中，您将开始注意到大多数工具都有非常相似的特性，尽管对于同一特性，有些工具可能有不同的术语。

现在是时候转向另一个工具了，Opera JavaScript 调试器。

Opera JavaScript 调试器

Opera 的 JavaScript 调试器叫做 Dragonfly。 为了使用它，你需要做的就是下载最新版本的 Opera; “蜻蜓”已经包含在 Opera 的最新版本中。

既然您已经安装了必要的软件，现在就可以执行调试任务了。

使用蜻蜓

我们首先从 example.html文件开始。 在 Opera 浏览器中打开此文件。 现在我们来看看如何启动蜻蜓。

启动蜻蜓

要访问蜻蜓，请进入菜单选项工具。 选择Advanced，然后点击Developer Tools。 一旦你这样做了，蜻蜓就会出现。 和往常一样，我们将首先简要介绍该工具的用户界面。

用户界面简介

下面是我们将要使用的最重要的功能的简要概述，如下面的截图所示:

Brief Introduction to the User Interface

  1. DOM:该标签用来检查 HTML 和 CSS 元素
  2. Scripts:这个选项卡在调试 JavaScript 时使用
  3. 错误控制台:这个选项卡显示了调试 JavaScript 时的各种错误信息。

我们现在从调试 example.html开始。

使用 Opera Dragonfly 进行动作调试

  1. In this section, we'll learn how to use the debugging facilities of the Dragonfly. We'll start by setting breakpoints.

    以下是我们如何在 Dragonfly 中设置断点:

  2. 在 Opera 中打开 sample.html，启动蜻蜓，点击Scripts选项卡页面。 您可以通过单击要设置断点的行号来设置断点。 让我们尝试到包含 buildContent(answerB, "minus")的那一行; 然后点击行号。

  3. 进入你的浏览器并执行 example.html。 输入5、3作为输入。 点击提交。 和往常一样，您不会看到动态创建的任何内容。 程序的断点在包含 buildContent(answerB, "minus");。

  4. Now go back to Dragonfly, and you will notice that the panels for Call Stack and Inspection are now populated. You should see similar values to those shown in the next screenshot if you enter the same values as I did:

    Time for —debugging with Opera Dragonfly

  5. Inspection和Call Stack中显示的值是到断点为止已经计算并执行的值和函数。

刚才发生了什么事?

我们刚刚使用 Dragonfly 设置了一个断点，在执行 JavaScript 程序时，我们已经看到了 Dragonfly 的各种字段是如何填充的。 现在我们将详细讨论每个领域。

检查和调用栈

如前面的截图所示，当我们执行程序时，Call Stack和Inspection被填充了值。 一般来说，调用栈显示了在特定函数调用时运行时环境的性质——调用了什么，以及以什么顺序调用。 检查面板列出当前调用的所有属性值和其他属性值。 栈帧是调用栈的特定部分。 检查在概念上类似于在谷歌 Chrome 中看到的范围变量。

线程日志

线程日志面板显示了正在调试的脚本中运行的不同线程的详细信息。

现在，我们将进一步了解关于 Dragonfly 功能的更多细节。

Continue, Step Into, Step Over, Step Out, Stop at Error

在调试代码时，我们还可以执行通常的 Continue、Step Into、Step Over 和 Step Out 任务。 下面是一个截屏，告诉我们在哪里可以找到之前提到的功能:

Continue, Step Into, Step Over, Step Out, and Stop at Error

  1. Continue:这将在当前选定的脚本在断点停止后继续执行。 这将继续到下一个断点(如果有的话)，或者继续到脚本的末尾。
  2. 步进:这允许您步进到堆栈中的下一个函数中，位于包含断点的当前函数之后。 它在代码执行时有效地跟踪代码。 假设你仍然在我们的例子中，你可以点击Step Into图标，箭头指向下方。 您将看到您正在有效地跟踪代码。 当您继续点击Step In时，您将看到Inspection和Call Stack中的值发生变化。 这是因为在代码的不同位置，不同的变量或表达式有不同的值。
  3. 步进:这允许您步进到设置断点的行之后的下一行——您可以多次使用此命令来跟踪脚本的执行路径。
  4. Step out:这导致您步出函数。

  5. Stop at error: This allows you to stop executing your script at the point where an error is encountered. To see this in action, open the file example.html in your editor, and search for the line that says buildContent(noSuchThing, "add"); and uncomment it. Save the file and then open it again, using Opera. Go to Dragonfly and click on the icon. Now execute your program in Opera and enter some sample values. Once you are done, you will see the following screenshot in Dragonfly:

    Continue, Step Into, Step Over, Step Out, and Stop at Error

注意，在46行有一个指向右边的黑色箭头。 这意味着在这行代码中有一个错误。

在我们结束蜻蜓部分之前，我们将看看一个更重要的特性——设置特性。

设置

Opera 的 Dragonfly 有一个漂亮的特性，允许我们为调试任务创建不同的设置。 这些设置有一个完整的列表，所以我不会一一列举。 但我将重点讨论那些对调试过程有用的。

  • 脚本:在这个面板中，当您有多个 JavaScript 文件要调试时，启用在选择 window 时自动重新加载文档可以极大地节省时间，因为它将帮助您自动重新加载文档。
  • 控制台:此面板允许您控制在调试会话期间希望看到的信息。 从 XML 到 HTML，您可以启用或禁用消息，以查看最重要的信息。

到此为止，我们将结束蜻蜓这一节，继续讨论 Firefox 和 Venkman 扩展。

Firefox 和 Venkman 扩展

我们知道 Firefox 有很多插件和工具，其中一些是为 web 开发而设计的。 在本节中，我们将学习 Venkman 扩展，这是 Mozilla 的 JavaScript 调试器。

使用 Firefox 的 Venkman 扩展

我们将从获得扩展开始; 我们假设您已经安装了 Firefox。 在本例中，我使用的是 Firefox 3.6.3。

获取 Venkman JavaScript 调试器扩展

获取 Venkman JavaScript 调试器扩展，去https://addons.mozilla.org/en-US/Firefox/addon/216/，然后点击Add To Firefox。 安装完成后，Firefox 会提示您重新启动 Firefox，使更改生效。

开启 Venkman

要开始调试，让我们在 Firefox 中打开文件 example.html。 现在，我们可以启动 Venkman。 进入Tools，选择JavaScript Debugger。 如果你使用的是旧版本的 Firefox，你可以通过Tools|Web Development|JavaScript Debugger 菜单访问它。

现在我们先简单介绍一下 Venkman 的用户界面。

用户界面简介

下一个截图显示了 Venkman 扩展的用户界面:

A brief introduction to the user interface

  1. 已加载的脚本:已加载的脚本面板显示了可加载用于调试的脚本列表。 加载脚本后，您将在源代码面板中看到它。
  2. 本地变量和监视:在执行调试任务时，本地变量面板显示可用的本地变量。 如果您点击手表选项卡，您将看到手表面板。 您将使用这个输入您想要观看的表达式。
  3. 断点和调用栈:断点面板允许您添加一个断点列表，调用栈面板显示了一个按顺序执行的函数或变量列表。
  4. 源代码:源代码面板显示您当前正在调试的源代码。
  5. 交互式会话:交互式会话面板是此调试器的控制台。

我们现在开始调试使用 Venkman 扩展:

使用 Firefox 的 Venkman 扩展进行动作调试

在深入讨论更详细的内容之前，我们将从设置断点开始:

与所有调试器一样，我们可以通过执行以下步骤来设置断点:

  1. 首先在 Firefox 中打开文件 example.html。
  2. 打开 JavaScript 调试器，将显示调试器窗口。
  3. 当你看到调试器窗口时，转到Load Scripts面板，你会看到文件 example.html在其中。 点击它，您将看到代码正在加载的源代码面板。

  4. To set a breakpoint, click on the line at which you want the breakpoint to be set. For instance, I have set it on line 130, which contains the code: buildContent(answer, "minus");. You should see something like the following screenshot:

    Time for —debugging using Firefox's Venkman extension

刚才发生了什么事?

首先要注意的是，在红色矩形中有一个白色的 B，如上面的截图所示。 这表明已经设置了断点。

在 Venkman 中，有时候你会在黄色框中看到白色 F; 这意味着 Venkman 只能设置一个未来断点。 当您选择的行没有源代码时，或者当 JavaScript 引擎已经卸载了这行代码时(顶级代码有时会在执行完成后不久卸载)，就会发生这种情况。

Future Breakpoint 意味着 Venkman 现在无法设置硬断点，但是如果文件稍后加载，并且它在选定的行号处有可执行代码，Venkman 会自动设置硬断点。

要注意的第二件事是断点面板。 它包含我们在此调试会话中设置的所有断点的列表。

现在，在我们继续下面的小节之前，我需要您通过浏览器为示例应用输入一些输入。 在我的例子中，我分别为第一个和第二个输入字段输入了5和3。 一旦你完成了，点击提交。

同样，您将注意到原来为空的面板现在被值填充了。 我们将在以下小节中讨论这个问题。

断点或调用堆栈

我们在前一小节中简要介绍了断点。 如果您查看Breakpoints面板，您会注意到在该面板中，在Breakpoint面板的右侧有另一个标签，称为Call Stack。

点击Call Stack，你应该会在这个新面板中看到一些数据。 假设您已经输入了相同的输入和相同的断点，您将看到一个类似于下一个截图示例的屏幕:

Breakpoints or Call Stack

一般来说，调用栈显示了运行时环境的性质，在特定的函数调用时——调用了什么，以及以什么顺序调用。 在 Venkman 中，它显示了函数的名称、文件名、行号和 pc(程序计数器)。

本地变量和手表

现在让我们关注局部变量和手表。 Local Variables和Watches面板位于Breakpoints和Call Stack面板上方。 如果你已经按照我的指示，直到这一点与完全相同的输入，你应该看到以下的局部变量面板:

Local Variables and Watches

局部变量面板根据创建或计算的顺序，简单地显示了具有值(由于代码执行)直到断点或程序结束的变量的值。

我们要讨论的下一个面板是手表面板。 Watches面板的功能与 watch 表达式相同，就像我们之前为其他浏览器所做的一样。 但是，由于我们还没有为手表面板添加任何东西，让我们采取一些行动来看看手表面板是如何工作的:

时间行动更多调试与 Venkman 扩展

在本节中，我们将介绍更多调试特性，如 Watch、Stop、Continue、Step Into、Step Over、Step Out、edge 触发器和 throw 触发器。 但首先，让我们执行以下步骤，以便看到手表面板的行动:

  1. 点击手表标签。
  2. 在手表面板内右键单击，选择添加手表。
  3. 输入 document.sampleform.firstnumber.value。

  4. Repeat steps 2 and 3, and this time enter document.getElementById("dynamic").

    完成后，您将看到如下截图所示的输出:

    Time for —more debugging with the Venkman extension

    手表面板所做的是允许我们添加一个我们想要跟踪的表达式列表，并向我们显示表达式的值。

    现在让我们继续讨论停止和继续特性。

    Venkman 提供了一些有用的功能，包括停止和继续。 Stop 基本上停止在下一个 JavaScript 语句，而 Continue 继续代码执行。

    你可以让 Venkman 在下一个 JavaScript 语句中停止。

  5. Click on the large red X on the toolbar, or you can go to the menu and select Debug and then choose Stop.

    有些时候没有 JavaScript 被执行。 如果是这种情况，你会看到一个省略号(…)出现在工具栏的X上，菜单项将被选中。 当遇到下一行 JavaScript 代码时，调试器将停止。 您可以通过点击X或再次选择Stop来取消该操作。

    除了停止和继续，Venkman 还提供标准的步进、步过和步出功能。

    • Step In:执行一行 JavaScript 代码，然后停止。 你可以点击这个图标，上面写着Step Into。 如果您多次单击它，您将注意到局部变量发生了变化，并且您将看到代码正在执行，就像您正在跟踪代码一样。
    • 跨步执行:这用于跨步执行即将调用的函数，并在调用返回时将控制权返回给调试器。 如果你点击Step Over，你会看到新的内容正在你的浏览器中创建。 对于文件 example.html，假设您从断点点击Step Over，您将看到从 buildContent(answer, "minus");创建的内容。

    • Step Out: This executes until the current function call exits.

      现在我们将看到如何使用 Error 触发器和 Throw 触发器。

      错误触发器用于让 Venkman 在下一次错误时停止，而 Throw 触发器用于让 Venkman 在下一次异常被抛出时停止。

      为了看到它的实际作用，我们将执行以下操作:

  6. 在编辑器中打开 example.html文件，再次搜索 buildContent(noSuchThing, "add"); 并取消它。 保存文件并使用 Firefox 再次打开它。

  7. 在 Firefox 中打开该文件后，打开 Venkman。
  8. 打开 Venkman 后，进入Debug|Error Trigger，选择Stop for Errors。 然后，再次返回Debug|Throw Trigger，选择Stop for Errors。
  9. 在浏览器中输入任意两个数字，分别是5和3。 点击提交。

  10. Return to Venkman and you will see that the line with buildContent(noSuchThing, "add"); is highlighted, and within the Interactive Session (or console) panel, you will see an error message that says X Error. noSuchThing not defined.

    现在我们已经看到了如何使用 Venkman 在遇到错误时停止程序，接下来让我们看看它的分析特性。

    正如我们在前几章中提到的，分析用于度量脚本的执行时间。 启用剖析:

  11. 点击工具栏上的Profile按钮。 启用分析后，您将在工具栏按钮上看到一个绿色的复选标记。

  12. 启用 Profiling 后，转到浏览器并输入一些示例值。 我还是坚持5和3。 然后点击提交。
  13. 返回 Venkman，选择文件，选择保存配置数据为。 我已经包含了一个例子，我们刚刚做了什么，并保存到 data.txt文件。 您可以打开该文件并查看分析会话的内容。 您可以通过在文件 data.txt中搜索 example.html来找到文件 sample.html的分析数据。 【显示】

  14. When you are done, click on Profile again to stop collecting the data.

    当开启分析功能时，Venkman 将对每一个被调用的功能收取呼叫计数、最大呼叫时长、最小呼叫时长和总呼叫时长。

    您还可以使用清除配置文件数据菜单项清除选定脚本的配置文件数据。

刚才发生了什么事?

我们已经了解了 Venkman 扩展的各种特性。 在这个阶段，断点的停止、继续、进入、退出和结束等特性对您应该不陌生，因为它们在概念上与我们前面介绍的工具相似。

现在让我们转向最后一个工具，Firebug 扩展。

Firefox 和 Firebug 扩展

我个人认为不需要进一步介绍 Firebug 扩展。 它可能是目前市场上最流行的(如果不是最流行的话)Firefox 调试工具之一。 Firebug 是免费和开源的。

具有以下特点:

  • 点击你的网页查看和编辑 HTML
  • 调试和分析 JavaScript
  • 快速发现 JavaScript 错误
  • 日志 JavaScript
  • 在运行中执行 JavaScript

Firebug 可能是 Internet 上记录最好的调试工具之一。 因此，我们将看看你可以访问的 url，以利用这个免费的、开源的、强大的调试工具:

小结

这一章终于讲完了。 我们已经介绍了用于调试任务的各种浏览器的特定工具。

具体来说，我们涵盖了以下主题:

  • ie 浏览器的开发工具
  • 谷歌 Chrome 浏览器和 Safari 浏览器的 JavaScript 调试器和 Web Inspector
  • 蜻蜓的歌剧
  • Firefox 的 Venkman 扩展
  • Firebug 资源

如果你需要关于每个特定工具的更多信息，你可以在本章中提到的每个工具和特性后面加上关键字“教程”。

我们已经介绍了可以帮助您开始调试 JavaScript 应用的工具的最重要的特性。 在我们的最后一章中，我们将重点讨论当您的测试需求无法手动满足时可以使用的各种测试工具。**

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/1496.html