、在 Chrome 中调试

调试 是指在一个脚本中找出并修复错误的过程。所有的现代浏览器和大多数其他环境都支持调试工具 —— 开发者工具中的一个令调试更加容易的特殊用户界面。它也可以让我们一步步地跟踪代码以查看当前实际运行情况。

在这里我们将会使用 Chrome（谷歌浏览器），因为它拥有足够多的功能，其他大部分浏览器的功能也与之类似。

二、“资源（Sources）”面板

你的 Chrome 版本可能看起来有一点不同，但是它应该还是处于很明显的位置。

• 在 Chrome 中打开 示例页面。
• 使用快捷键 F12（Mac：Cmd+Opt+I）打开开发者工具。
• 选择 Sources（资源） 面板。

如果你是第一次这么做，那你应该会看到下面这个样子：

点击箭头所指向得切换按钮 会打开文件列表的选项卡。

让我们在预览树中点击和选择 hello.js。这里应该会如下图所示：

资源（Sources）面板包含三个部分：

1. 文件导航（File Navigator） 区域列出了 HTML、JavaScript、CSS 和包括图片在内的其他依附于此页面的文件。Chrome 扩展程序也会显示在这。
2. 代码编辑（Code Editor） 区域展示源码。
3. JavaScript 调试（JavaScript Debugging） 区域是用于调试的，我们很快就会来探索它。

现在你可以再次点击切换按钮 隐藏资源列表来给代码腾出一些空间。

三、控制台（Console）

如果我们按下 Esc，下面会出现一个控制台，我们可以输入一些命令然后按下 Enter 来执行。

语句执行完毕之后，其执行结果会显示在下面。

例如，1+2 将会返回 3，hello("debugger") 函数什么也不返回，因此结果是 undefined：

四、断点（Breakpoints）

我们来看看 示例页面 发生了什么。在 hello.js 中，点击第 4 行。是的，就点击数字 "4" 上，不是点击代码。

恭喜你！你已经设置了一个断点。现在，请在第 8 行的数字上也点击一下。

看起来应该是这样的（蓝色是你应该点击的地方）：

断点 是调试器会自动暂停 JavaScript 执行的地方。

当代码被暂停时，我们可以检查当前的变量，在控制台执行命令等等。换句话说，我们可以调试它。

我们总是可以在右侧的面板中找到断点的列表。当我们在数个文件中有许多断点时，这是非常有用的。它允许我们：

• 快速跳转至代码中的断点（通过点击右侧面板中的对应的断点）。
• 通过取消选中断点来临时禁用对应的断点。
• 通过右键单击并选择移除来删除一个断点。
• ……等等。

条件断点 Conditional breakpoints

在行号上 右键单击 允许你创建一个 条件 断点。只有当给定的表达式为真（即满足条件）时才会被触发。

当我们需要在特定的变量值或参数的情况下暂停程序执行时，这种调试方法就很有用了。

五、Debugger 命令

我们也可以使用 debugger 命令来暂停代码，像这样：

function hello(name) {
  let phrase=`Hello, ${name}!`;

  debugger;  // <-- 调试器会在这停止

  say(phrase);
}

当我们在一个代码编辑器中并且不想切换到浏览器在开发者工具中查找脚本来设置断点时，这非常方便。

六、暂停并查看

在我们的例子中，hello() 函数在页面加载期间被调用，因此激活调试器的最简单的方法（在我们已经设置了断点后）就是 —— 重新加载页面。因此让我们按下 F5（Windows，Linux）或 Cmd+R（Mac）吧。

设置断点之后，程序会在第 4 行暂停执行：

请打开右侧的信息下拉列表（箭头指示出的地方）。这里允许你查看当前的代码状态：

1. 察看（Watch） —— 显示任意表达式的当前值。你可以点击加号 + 然后输入一个表达式。调试器将随时显示它的值，并在执行过程中自动重新计算该表达式。
2. 调用栈（Call Stack） —— 显示嵌套的调用链。此时，调试器正在 hello() 的调用链中，被 index.html 中的一个脚本调用（这里没有函数，因此显示 “anonymous”）如果你点击了一个堆栈项，调试器将跳到对应的代码处，并且还可以查看其所有变量。
3. 作用域（Scope） —— 显示当前的变量。Local 显示当前函数中的变量，你还可以在源代码中看到它们的值高亮显示了出来。Global 显示全局变量（不在任何函数中）。这里还有一个 this 关键字，目前我们还没有学到它，不过我们很快就会学习它了。

七、跟踪执行

现在是 跟踪 脚本的时候了。

在右侧面板的顶部是一些关于跟踪脚本的按钮。让我们来使用它们吧。

—— “恢复（Resume）”：继续执行，快捷键 F8。

继续执行。如果没有其他的断点，那么程序就会继续执行，并且调试器不会再控制程序。

我们点击它一下之后，我们会看到这样的情况：

执行恢复了，执行到 say() 函数中的另外一个断点后暂停在了那里。看一下右边的 “Call stack”。它已经增加了一个调用信息。我们现在在 say() 里面。

—— “下一步（Step）”：运行下一条指令，快捷键 F9。

运行下一条语句。如果我们现在点击它，alert 会被显示出来。

一次接一次地点击此按钮，整个脚本的所有语句会被逐个执行。

—— “跨步（Step over）”：运行下一条指令，但 不会进入到一个函数中，快捷键 F10。

跟上一条命令“下一步（Step）”类似，但如果下一条语句是函数调用则表现不同。这里的函数指的是：不是内置的如 alert 函数等，而是我们自己写的函数。

“下一步（Step）”命令进入函数内部并在第一行暂停执行，而“跨步（Step over）”在无形中执行函数调用，跳过了函数的内部。

执行会在该函数执行后立即暂停。

如果我们对该函数的内部执行不感兴趣，这命令会很有用。

—— “步入（Step into）”，快捷键 F11。

和“下一步（Step）”类似，但在异步函数调用情况下表现不同。如果你刚刚才开始学 JavaScript，那么你可以先忽略此差异，因为我们还没有用到异步调用。

至于之后，只需要记住“下一步（Step）”命令会忽略异步行为，例如 setTimeout（计划的函数调用），它会过一段时间再执行。而“步入（Step into）”会进入到代码中并等待（如果需要）。详见 DevTools 手册。

—— “步出（Step out）”：继续执行到当前函数的末尾，快捷键 Shift+F11。

继续执行代码并停止在当前函数的最后一行。当我们使用 偶然地进入到一个嵌套调用，但是我们又对这个函数不感兴趣时，我们想要尽可能的继续执行到最后的时候是非常方便的。

—— 启用/禁用所有的断点。

这个按钮不会影响程序的执行。只是一个批量操作断点的开/关。

—— 启用/禁用出现错误时自动暂停脚本执行。

当启动此功能并且开发者工具是打开着的时候，任何一个脚本的错误都会导致该脚本执行自动暂停。然后我们可以分析变量来看一下什么出错了。因此如果我们的脚本因为错误挂掉的时候，我们可以打开调试器，启用这个选项然后重载页面，查看一下哪里导致它挂掉了和当时的上下文是什么。

Continue to here

在代码中的某一行上右键，在显示的关联菜单（context menu）中点击一个非常有用的名为 “Continue to here” 的选项。

当你想要向前移动很多步到某一行为止，但是又懒得设置一个断点时非常的方便。

八、日志记录

想要输出一些东西到控制台上？console.log 函数可以满足你。

例如：将从 0 到 4 的值输出到控制台上：

// 打开控制台来查看
for (let i=0; i < 5; i++) {
  console.log("value", i);
}

普通用户看不到这个输出，它是在控制台里面的。要想看到它 —— 要么打开开发者工具中的 Console（控制台）选项卡，要么在一个其他的选项卡中按下 Esc：这会在下方打开一个控制台。

如果我们在代码中有足够的日志记录，那么我们可以从记录中看到刚刚发生了什么，而不需要借助调试器。

九、总结

我们可以看到，这里有 3 种方式来暂停一个脚本：

1. 一个断点。
2. debugger 语句。
3. 一个错误（如果开发者工具是打开状态，并且按钮 是开启的状态）。

当脚本执行暂停时，我们就可以进行调试 —— 检查变量，跟踪代码来查看执行出错的位置。

开发人员工具中的选项比本文介绍的多得多。完整的手册，请搜索chrome-devtools。

本章节的内容足够让你上手代码调试了，但是之后，尤其是你做了大量关于浏览器的东西后，推荐你查看上面开发者工具更高级的功能。

对了，你也可以点击开发者工具中的其他地方来看一下会显示什么。这可能是你学习开发者工具最快的方式了。不要忘了还有右键单击和关联菜单哟。

avaScript调试是业内公认的难题。但一旦你掌握技巧，了解了工具本身，便能节省一大把时间。以下16条调试技巧，可供您在下次调试JavaScript代码时使用！

这些技巧大多数都适用于Chrome和Firefox，许多技巧也可以与其他检查员一起使用。另外，如果您想更快地找到JavaScript错误，请尝试Raygun Crash Reporting，它会提醒您注意错误并提供堆栈跟踪。

1、调试器

在console.log之后，调试器是我最喜欢的快速调试工具。如果放置调试器，在您的代码行中，Chrome将在执行时自动在那里停止，您甚至可以将其包装在条件句中，因此它仅在需要时运行。

2、将对象显示为表格

有时，您要查看一组复杂的对象。您可以console.log它们并在列表中滚动，也可以使用console.table帮助器。它使您更轻松地查看正在处理的内容！

将输出：

3、尝试所有尺寸

虽然桌上有每个移动设备都很棒，但在现实世界中这是不可行的。如何调整视口的大小呢？Chrome为您提供所需的一切。跳到检查器中，然后单击切换设备模式 按钮。观看您的媒体查询成真！

4、如何快速找到您的DOM元素

在元素面板中标记一个DOM元素，然后在控制台中使用它。Chrome浏览器检查器会保留其历史记录中的最后五个元素，以便最后标记的元素显示为$ 0，倒数第二个标记的元素为$ 1，依此类推。

如果按照“ item-4”，“ item-3”，“ item-2”，“ item-1”，“ item-0”的顺序标记以下项，则可以在控制台中访问这样的DOM节点：

5、使用console.time（）和console.timeEnd（）进行基准循环

确切地知道执行某项操作要花多长时间可能特别有用，尤其是在调试慢循环时。您甚至可以通过为方法分配标签来设置多个计时器。让我们看看它是如何工作的：

将输出：

6、获取函数的堆栈跟踪

您可能知道JavaScript框架可以快速生成大量代码。

您将拥有很多视图并触发许多事件，因此最终您将遇到一种情况，您想知道是什么导致了特定的函数调用。由于JavaScript不是一种结构化的语言，因此有时可能难以掌握发生的情况和时间。

这是当console.trace（或只是在控制台中的跟踪）派上用场时才能调试JavaScript的时候。想象一下，您想在car实例中看到函数调用funcZ的整个堆栈跟踪：

将输出：

现在我们可以看到func1叫做func2，它叫做func4。然后Func4 创建Car的实例，然后调用函数car.funcX，依此类推。即使您认为自己非常了解脚本，这仍然非常方便。假设您要改善代码。获取跟踪和所有相关功能的详细列表。每一个都可以单击，现在您可以在它们之间来回切换。就像一个菜单只适合您。

7、最小化代码是调试JavaScript的简便方法

有时您可能在生产中遇到问题，而源映射并没有完全到达服务器。不要害怕。Chrome可以将您的Javascript文件缩小为更易于阅读的格式。该代码不会像您的实际代码那样有用-但至少您可以看到正在发生的事情。单击检查器中源查看器下方的{}漂亮打印按钮。

8、快速找到要调试的功能

比方说，你要设置一个断点在function.The两种最常见的方式做到这一点是：

1.找到你检查线路，并添加一个断点

2.在脚本中添加调试器

在这两种解决方案，您必须手动浏览文件以隔离要调试的特定行。可能不太常见的是使用控制台。在控制台中使用debug（funcName），当脚本达到您传递的功能时，脚本将停止。

它很快，但是缺点是它不适用于私有或匿名函数。否则，这可能是找到要调试的函数的最快方法。（注意：尽管命名类似，但有一个名为console.debug的函数不是同一回事。）

在控制台中键入debug（car.funcY），当脚本获得对car.funcY的函数调用时，该脚本将在调试模式下停止：

9、不相关的黑匣子脚本

今天，我们的Web应用程序上经常有一些库和框架。它们中的大多数都经过了良好的测试，并且相对没有错误。

但是，调试器仍会进入与此调试任务无关的所有文件。解决方案是将不需要调试的脚本黑框。这可能还包括您自己的脚本。在本文中阅读有关调试黑匣子的更多信息。

10、查找复杂调试中的重要内容

在更复杂的调试中，有时我们希望输出许多行。要使输出保持更好的结构，您可以做的一件事是使用更多控制台功能，例如console.log，console.debug，console.warn，console.info，console.error等。

然后，您可以在检查器中过滤它们。有时，当您需要调试JavaScript时，这并不是您真正想要的。如果愿意，您可以发挥创意并设置信息样式。要调试JavaScript时，请使用CSS并制作自己的结构化控制台消息：

将输出：

在console.log（）中，您可以将％s设置为字符串，将％i设置为整数，并将％c设置为自定义样式。您可能会找到使用这些样式的更好方法。如果使用单个页面框架，则可能需要一种样式用于查看消息，而另一种样式用于模型，集合，控制器等。

11、观察特定的函数调用和参数

在Chrome控制台中，您可以关注特定功能。每次调用该函数时，都会使用传入的值进行记录。

将输出：

这是查看将哪些参数传递给函数的好方法。理想情况下，控制台可以告诉您期望多少个参数，但是不能。在上面的示例中，func1需要三个参数，但仅传入两个参数。如果代码中未对此进行处理，则可能导致错误。

12、快速访问控制台中的元素

在控制台中执行querySelector的更快方法是使用美元符号。$（'css-selector'）将返回CSS选择器的第一个匹配项。$$（'css-selector'）将全部返回。如果您多次使用某个元素，则值得将其另存为变量。

13、Postman很棒（但是Firefox更快）

许多开发人员正在使用Postman来处理Ajax请求。Postman非常出色，但是打开一个新的浏览器窗口，编写新的请求对象然后进行测试可能会有些烦人。

有时使用浏览器会更容易。当您这样做时，如果您要发送到密码安全页面，则不再需要担心身份验证cookie。

这是您在Firefox中编辑和重新发送请求的方式。打开检查器，然后转到“网络”选项卡。右键单击所需的请求，然后选择“编辑并重新发送”。

现在，您可以更改任何所需的内容。更改标题并编辑参数，然后单击重新发送。

下面，我两次提出一个具有不同属性的请求：

14、中断节点更改

DOM可能很有趣。有时情况会发生变化，而您不知道为什么。但是，当您需要调试JavaScript时，Chrome可让您在DOM元素更改时暂停。

您甚至可以监视其属性。在Chrome Inspector中，右键单击该元素，然后选择要使用的设置中断：

15、使用页面速度服务

有很多服务和工具可用于审核页面的JavaScript，并帮助您发现速度下降或问题。这些工具之一是Raygun Real User Monitoring。

除了查找JavaScript问题外，这还可能因其他原因而有用-加载外部脚本缓慢，不必要的CSS，图像过大。它可以帮助您了解导致意外加载时间过长或无法正确执行的JavaScript问题。

您还可以衡量JavaScript性能的改进并随时间进行跟踪。

16、到处都有断点

最后，久经考验的真正断点可以成功。尝试针对不同情况以不同方式使用断点。

您可以单击一个元素并设置一个断点，以在修改某个元素时停止执行。您还可以进入开发人员工具中的“调试器”选项卡或“源”选项卡（取决于浏览器），并为任何特定源设置XHR断点以在Ajax请求上停止。

在同一位置，还可以让它在发生异常时暂停代码执行。您可以在浏览器工具中使用这些各种类型的断点，以最大程度地发现错误，而不必花费时间在外部工具集上。

*本文翻译自https://raygun.com/learn/javascript-debugging-tips?utm_medium=newsletter&utm_source=javascriptweekly&utm_campaign=cooperpress&utm_content=article，如有侵权请联系删除

了调试Javascript编码，JavaScript 有很多种调试器可供使用，以下是其中几个常用的调试器：

• Chrome DevTools：这是一个由 Google 开发的调试器，可以在 Chrome 浏览器中使用。它提供了一整套调试工具，包括查看代码、断点调试、监视变量、网络监控等功能。

• Firefox Developer Tools：这是一个由 Mozilla 开发的调试器，可以在 Firefox 浏览器中使用。它的功能和 Chrome DevTools 类似，包括查看代码、断点调试、监视变量、网络监控等功能。

• Visual Studio Code：这是一个由 Microsoft 开发的代码编辑器，内置了一个调试器。它可以用来调试 JavaScript 代码以及其他语言的代码，包括 Node.js、TypeScript、Python 等等。

• Node.js 自带的调试器：如果你使用 Node.js 来运行 JavaScript 代码，那么可以使用 Node.js 自带的调试器。它提供了一些命令行工具，可以用来设置断点、查看变量等等。

以上是几个常用的 JavaScript 调试器，你可以根据自己的需要选择使用。也可以自编一个简单的Javascript代码调试器，这样可以方便地插入自编的网页中。

1、Javascript调试器自编代码

<!DOCTYPE html>
<html>
<head>
<title>银河统计</title>
<meta content="text/html; charset=UTF-8">
<style>
<!--
//-->
</style>
</head>
<body>
<img id="myLogo" style="width:120px; padding:0px; margin:5px;" img src="http://www.galaxystatistics.com/webTJX/mobile/logo1.png"/>
<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)" style="margin-left:2em; font-size:14pt;">点击运行代码窗口</a>
<center>
<textarea id="oCode" style="width:94%; height:300px; border:1px solid #555555; text-align:left; padding-left:5px;">
console.clear();
let a1=1; b1=-2; c1=-1;
let a2=2; b2=1; c2=1;
let v=a1*b2-a2*b1;
if (v==0) {
		console.log("无解");
} else {
    x=(b2*c1-b1*c2)/v;
    y=(a1*c2-a2*c1)/v;
    console.log("x="+x+"; y="+y);
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本编辑快捷键：Ctrl+A - 全选；Ctrl+C - 复制； Ctrl+X - 剪切；Ctrl+V - 粘贴</div><p/>
</div>
<i>注：Console对象用于JavaScript调试，为了显示Console.log输出结果，通过按Control+Shift+i（PC平台）来打开Console窗口</i>
</body></html>

网页代码代码运行效果如下：

2、console对象常用方法

JavaScript 中的 console 是一个对象，它提供了一些方法用于向控制台输出信息。控制台是一个在浏览器 环境中提供的命令行界面，可以用来显示程序的输出信息以及调试信息。

Console对象用于JavaScript调试，为了显示Console.log输出结果，通过按【Control+Shift+i】（PC平台）来打开Console窗口。如图：

常用的 console 方法：

• console..clear()：清空控制台信息；
• console.log()：向控制台输出普通信息，通常用于调试和输出程序的运行状态；
• console.error()：向控制台输出错误信息，通常用于捕捉和显示程序的错误信息；
• console.warn()：向控制台输出警告信息，通常用于显示程序的警告信息；
• console.info()：向控制台输出信息，通常用于显示一些额外的信息。；
• console.table()：以表格形式输出一个数组或者对象的属性；
• console.time() 和 console.timeEnd()：用于计算程序执行时间，可以用来优化程序性能；
• console.group() 和 console.groupEnd()：用于将输出信息分组显示，方便查看。

以上是 console 对象的一些常用方法，使用这些方法可以方便地在控制台中输出调试信息，帮助开发者调试程序和解决问题。

本文介绍的Javascript调试器自编代码可以随时插入各类网页中。以下是进一步精简的代码片段：

<div style="margin-left:1em;">
<a href="#" onclick="eval(document.getElementById('oCode').value)">点击运行代码窗口</a>
<textarea id="oCode" style="width:94%; height:300px; text-align:left; padding-left:5px;">
console.clear();
//代码块
console.log();
}
</textarea><br/>
</center>
<div style="color:#ff5555; width:98%; text-align:center;">文本编辑快捷键：Ctrl+A - 全选；Ctrl+C - 复制； Ctrl+X - 剪切；Ctrl+V - 粘贴</div>
</div>

通常将这段代码复制到网络统计学网页后面，这样就可以随时调试网页中介绍的代码。