JavaScript - 调试

什么是调试？

在 JavaScript 中进行调试是检查 JavaScript 代码并查找错误并修复它们的过程。开发人员在编码时时不时地会犯错误。此错误可以是逻辑错误、语法错误或运行时错误。程序或脚本中的错误称为 Bug。

查找和修复 bug 的过程称为调试，是开发过程的正常部分。本节介绍可帮助您完成调试任务的工具和技术。

让我们看看不同的调试方法。

使用 JavaScript 调试器

调试器是一种应用程序，它将脚本执行的所有方面置于程序员的控制之下。调试器通过一个界面提供对脚本状态的精细控制，该界面允许您检查和设置值以及控制执行流。

将脚本加载到调试器中后，可以一次运行一行脚本，也可以指示脚本在某些断点处停止。一旦执行停止，程序员就可以检查脚本的状态及其变量，以确定是否有问题。您还可以观察变量的值是否发生变化。

如今，所有现代浏览器都带有内置调试器。您可以使用浏览器的控制台调试 JavaScript 代码。

如何在浏览器中打开控制台？

在本节中，您将学习如何在不同的浏览器中打开控制台。

在 Chrome 中打开控制台

按下面键。

Windows/Linux − Ctrl + Shift + I 或 Ctrl + Shift + J
macOs − Cmd + Option + I 或 Cmd + Option + J

或

第 1 步 - 打开 Chrome 网络浏览器并在新窗口中打开网页。
第 2 步 - 右键单击网页上的任意位置。
第 3 步 - 它将弹出菜单。选择最后一个选项，即 'inspect'。
第 4 步 - 它将打开一个 Chrome 开发者工具。
第 5 步 - 转到控制台选项卡。

在 Firefox 中打开控制台

按下面键。

Windows/Linux − Ctrl + Shift + I 或 Ctrl + Shift + J
macOs − Cmd + Option + I 或 Cmd + Option + J

或

第 1 步 - 打开 Firefox 网络浏览器并在新窗口中打开网页。
第 2 步 - 右键单击网页上的任意位置。
第 3 步 - 从弹出菜单中选择最后一个选项，即 'inspect（Q）'。
第 4 步 - 它将打开一个开发人员工具。
第 5 步 - 您可以从“检查器”选项卡移动到“控制台”选项卡。

在 Microsoft Edge 中打开控制台

按下面键。

Windows/Linux − Ctrl + Shift + I 或 Ctrl + Shift + J
macOs − Cmd + Option + I 或 Cmd + Option + J

或

第 1 步 - 打开 Microsoft Edge 浏览器。
第 2 步 - 右键单击网页上的任意位置。
第 3 步 - 点击弹出菜单中的“检查”。
第 4 步 - 您将看到开发人员工具已打开。
第 5 步 - 接下来，您可以在开发人员工具中将“元素”选项卡更改为“控制台”选项卡。

在 Safari 中打开控制台

按下面键。

Windows/Linux − Ctrl + Shift + I 或 Ctrl + Shift + J
macOs − Cmd + Option + I 或 Cmd + Option + J

或

第 1 步 - 打开 Safari 网络浏览器。
第 2 步 - 从顶部菜单栏中打开 Safari 主菜单。
第 3 步 - 在下拉菜单中选择“首选项”。接下来，选择 'advanced' 选项。
第 4 步 - 选中名为“启用在菜单栏中显示开发菜单”的复选框以启用开发人员工具。接下来，关闭首选项窗口。
第 5 步 - 接下来，重新打开主菜单并选择“开发”。之后，选择 'Show Error Console'。

在 Opera 中打开控制台

按下面键。

Windows/Linux − Ctrl + Shift + I 或 Ctrl + Shift + J
macOs − Cmd + Option + I 或 Cmd + Option + J

或

第 1 步 - 打开 Opera 浏览器。
第 2 步 - 从右上角打开主菜单。
第 3 步 - 在主菜单中，选择“开发人员”。它将打开子菜单。
第 4 步 - 在子菜单中，选择“开发人员工具”。
第 5 步 - 接下来，选择“控制台”。它将打开一个控制台。

使用 console.log（）方法

console.log（）方法在 Web 浏览器的控制台中打印消息。它可以打印原始值、对象、变量值等。

您可以在要调试的控制台中打印变量的值。

语法

用户可以按照以下语法使用 console.log（）方法。


 Console.log(val1, val2, ...);

console.log（）方法采用逗号分隔的参数在 Web 浏览器的控制台中打印。

例

在下面的代码中，我们添加了 num1 和 num2 变量的值。在浏览器中，您可以看到总和是 32 而不是 5。

因此，您需要调试代码。

当您将 num1 和 num2 的类型打印到控制台中时，它显示 num1 的类型是一个字符串。因此，它将 num2 变量的值转换为字符串，并在其后附加 num1 的值。


<html>
<body>
	 	<div id = "output"> </div>
	 	<p>Note: To see the resullt in console, please open it before you run the code.</p>
	 	<script>
	 	 	 let num1 = "3";
	 	 	 let num2 = 2;
	 	 	 let sum = num1 + num2;
	 	 	 document.getElementById("output").innerHTML = "The sum is: " + sum;
	 	 	 console.log("typeof num1 is " + typeof num1);
	 	 	 console.log("typeof num2 is " + typeof num2);
	 	</script>
</body>
</html>

输出

The sum is: 32
Note: To see the resullt in console, please open it before you run the code.

它将在 Web 控制台中产生以下结果 -

typeof num1 is string
VM75616:7 typeof num2 is number

例

在下面的代码中，我们有一个包含各种属性的 person 对象。我们在 Web 浏览器中打印 person 对象的 firstname 和 lastname 属性。它打印 undefined。

要查找错误，您需要调试代码。接下来，我们在控制台中打印对象，发现 Person 对象不包含 firstname 和 lastname 属性;相反，它包含 'name' 属性。


<html>
<body>
	 	<div id = "demo"> </div>
	 	<p>Note: To see the resullt in console, please open it before you run the code.</p>
	 	<script>
	 	 	 let output = document.getElementById("demo");
	 	 	 let person = {
	 	 	 	 	name: "John",
	 	 	 	 	age: 25,
	 	 	 	 	city: "New York"
	 	 	 }
	 	 	 output.innerHTML = "The name of the person is: " + person.name + "<br>";
	 	 	 output.innerHTML += "The city of the person is: " + person.city + "<br>";
	 	 	 console.log(person);
	 	</script>
</body>
</html>

输出

The name of the person is: John
The city of the person is: New York
Note: To see the resullt in console, please open it before you run the code.

它将在 Web 控制台中产生以下结果 -

{name: 'John', age: 25, city: 'New York'}

使用 debugger 关键字

您可以转到浏览器控制台的 'source' 面板来调试代码。

'debugger' 关键字允许您强制停止 JavaScript 代码的执行。

停止 JavaScript 代码的执行允许您逐行调试代码。

找到 bug 或一切正常后，您可以继续执行 JavaScript 代码。

您可以打开控制台并在浏览器中运行以下代码。它将自动暂停代码，您可以观察变量的值来调试代码。

例

下面的示例与上述相同。我们在打印对象属性的值之前添加了 'debugger' 关键字。

它将在打印属性值之前暂停代码的执行。之后，当您单击恢复按钮时，它将恢复代码的执行。


<html>
<body>
	 	<div id = "demo"> </div>
	 	<script>
	 	 	 const output = document.getElementById("demo");
	 	 	 const person = {
	 	 	 	 	name: "John",
	 	 	 	 	age: 25,
	 	 	 	 	city: "New York"
	 	 	 }
	 	 	 debugger;
	 	 	 output.innerHTML = "The name of the person is: " + person.name + "<br>";
	 	 	 output.innerHTML += "The city of the person is: " + person.city;
	 	</script>
</body>
</html>

输出

The name of the person is: John
The city of the person is: New York

您将在控制台中看到类似于以下屏幕截图的结果。要在控制台中查看 resullt，请在运行代码之前打开它。

上图显示了浏览器窗口顶部的暂停按钮和右下角的对象或变量。这样，您可以检查变量值并调试代码以修复错误。

在浏览器的 Debugger 中设置断点

设置断点与使用 'debugger' 关键字调试 JavaScript 代码相同。所以，这是一种替代方法。

在 'source' 面板中，您可以单击要添加断点的行号，如下图所示。

之后，当您执行 JavaScript 代码时，它将停止代码的执行，您可以在右侧观察变量值。

调试断点

例

我们在下面的示例代码中定义了 test（）函数。test（）函数连接 str1 和 str2 字符串。

我们已经在开发人员工具的浏览器中打开了“源”面板。之后，我们在 'let res = str1.concat（str2）;' 行上添加了断点。因此，调试器将在这一行停止代码的执行，您可以单击 resume 按钮恢复代码的执行。


<html>
<body>
	 	<div id = "output">The resultant string after appending str2 to str1 is: </div>
	 	<script>
	 	 	 function test() {
	 	 	 	 	let str1 = "Hi";
	 	 	 	 	let str2 = "";
	 	 	 	 	let res = str1.concat(str2);
	 	 	 	 	document.getElementById("output").innerHTML += res;
	 	 	 }
	 	 	 test();
	 	</script>
</body>
</html>

输出

The resultant string after appending str2 to str1 is: Hi

您将在控制台中看到类似于以下屏幕截图的结果。要在控制台中查看 resullt，请在运行代码之前打开它。

调试断点输出

给开发者的有用提示

您可以牢记以下提示，以减少脚本中的错误数量并简化调试过程 -

使用大量评论。注释使您能够解释为什么以这种方式编写脚本，并解释代码中特别困难的部分。
始终使用缩进使您的代码易于阅读。缩进语句还使您可以更轻松地匹配开始和结束标记、大括号以及其他 HTML 和脚本元素。您可以在 IDE 中使用代码格式化程序。
编写模块化代码。尽可能将 statement 分组到 functions 中。函数允许您对相关语句进行分组，并以最少的工作量测试和重用代码的某些部分。
在命名变量和函数的方式上保持一致。尝试使用足够长且有意义的名称，并描述变量的内容或函数的用途。
在命名变量和函数时使用一致的语法。换句话说，将它们全部保持为小写或全部大写;如果您更喜欢 Camel-Back 表示法，请始终使用它。
以模块化方式测试长脚本。换句话说，在测试脚本的任何部分之前，不要尝试编写整个脚本。在添加下一部分代码之前，编写一段并使其工作。
使用描述性变量和函数名称，避免使用单字符名称。
注意引号。请记住，引号在字符串周围成对使用，并且两个引号必须具有相同的样式（单引号或双引号）。
注意你的等号。您不应使用单个 = 进行比较。
使用 var 关键字显式声明变量。

打印本页

JavaScript - 调试

什么是调试？

使用 JavaScript 调试器

如何在浏览器中打开控制台？

在 Chrome 中打开控制台

在 Firefox 中打开控制台

在 Microsoft Edge 中打开控制台

在 Safari 中打开控制台

在 Opera 中打开控制台

使用 console.log（） 方法

语法

使用 debugger 关键字

在浏览器的 Debugger 中设置断点

给开发者的有用提示

使用 console.log（）方法