Javascript 简明教程

JavaScript - Debugging

What is Debugging?

在 JavaScript 中调试是一个检查 JavaScript 代码并查找和修复错误的过程。开发人员在编码时总会出现错误。这些错误可能是逻辑错误、语法错误或运行时错误。程序或脚本中的错误称为软件缺陷。

查找和修复软件缺陷的过程称为调试，这是开发过程的正常部分。本部分介绍可以帮助执行调试任务的工具和技术。

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

Use a JavaScript Debugger

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

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

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

How to Open Console in the Browser?

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

Open Console in Chrome

按下以下键。

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

或

Step 1 − 打开 Chrome 网页浏览器并在新窗口中打开网页。
Step 2 − 在网页的任意位置右键单击。
Step 3 − 它会弹出一个菜单。选择最后一个选项，即“检查”。
Step 4 − 它将打开一个 Chrome 开发人员工具。
Step 5 − 转到控制台选项卡。

Open Console in Firefox

按下以下键。

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

或

Step 1 − 打开 Firefox 网页浏览器并在新窗口中打开网页。
Step 2 − 在网页的任意位置右键单击。
Step 3 − 从弹出菜单中选择最后一个选项，“inspect(Q)”。
Step 4 − 它将会打开一个开发人员工具。
Step 5 − 您可以从“inspector”选项卡移动到“console”选项卡。

Open Console in Microsoft Edge

按下以下键。

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

或

Step 1 − 打开 Microsoft Edge 浏览器。
Step 2 − 在网页的任意位置右键单击。
Step 3 − 点击弹出菜单中的“inspect”。
Step 4 − 您将看到开发人员工具已打开。
Step 5 − 接下来，您可以在开发人员工具中将“Elements”选项卡更改为“Console”选项卡。

Open Console in Safari

按下以下键。

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

或

Step 1 − 打开 Safari 网络浏览器。
Step 2 − 从顶部菜单栏中打开 Safari 主菜单。
Step 3 − 在下拉菜单中选择“preferences”。接下来，选择“advanced”选项。
Step 4 − 勾选名为“Enable Show Develop menu in menu bar”的复选框以启用开发人员工具。接下来，关闭首选项窗口。
Step 5 − 接下来，重新打开主菜单并选择“Develop”。然后，选择“Show Error Console”。

Open Console in Opera

按下以下键。

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

或

Step 1 − 打开 Opera 浏览器。
Step 2 − 从顶部角落打开主菜单。
Step 3 − 在主菜单中，选择“Developer”。它将打开子菜单。
Step 4 − 在子菜单中，选择“developer tools”。
Step 5 − 接下来，选择“console”。它将打开一个控制台。

Using the console.log() method

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

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

Syntax

用户可以使用下方的语法来使用console.log()方法。

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

console.log()方法需要以逗号分隔的参数来在网络浏览器的控制台中打印。

Example

在下方的代码中，我们对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.

它将在网页控制台中生成如下结果：

typeof num1 is string
VM75616:7 typeof num2 is number

Example

在下面的代码中，我们有一个包含不同属性的person对象。我们在网页浏览器中打印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.

它将在网页控制台中生成如下结果：

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

Using the debugger Keyword

你可以到浏览器的控制台去“source”面板来调试代码。

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

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

一旦你找到错误或看起来一切正常，你就可以继续执行JavaScript代码。

你可以在浏览器中打开控制台并运行下面的代码。它会自动暂停代码的执行，然后你就可以观察变量的值来调试代码。

Example

下面的例子与上面的例子相同。在打印对象属性的值之前，我们添加了’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

你将在控制台中看到与下方截屏相似的结果。为了在控制台中看到结果，请在运行代码之前打开控制台。

上方的图片显示了浏览器窗口顶部的暂停按钮，以及右下角的对象或变量。通过这种方式，你能够检查变量值并在代码中调试来修复错误。

Setting Break Points in the Browser’s Debugger

设置断点与使用’debugger’关键字来调试JavaScript代码是相同。所以这是一个替代方式。

在’source’面板中，你可以点击你要添加断点的那行行号，如下方的图片所示。

之后，当您执行 JavaScript 代码时，它会停止代码执行，您可以在右侧看到变量值。

Example

我们已在以下示例代码中定义了 test() 函数。test() 函数连接了 str1 和 str2 字符串。

我们在开发人员工具的浏览器的“source”面板中打开该面板。之后，我们在“let res = str1.concat(str2);”行上添加断点。这样，调试器将在此行停止代码执行，您可以单击恢复按钮继续执行代码。

<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

你将在控制台中看到与下方截屏相似的结果。为了在控制台中看到结果，请在运行代码之前打开控制台。

Useful Tips for Developers

你可以记住以下提示以减少脚本中的错误数量并简化调试过程 −

充分利用 comments 。注释使你可以解释编写脚本的方式以及解释特别困难的代码部分。
始终使用 indentation 使您的代码更易于阅读。语句缩进还可以更容易地匹配起始和结束标签、花括号以及其他 HTML 和脚本元素。您可以在 IDE 中使用代码格式化程序。
编写 modular code 。尽可能将您的语句分组到函数中。函数允许您将相关的语句分组并以最小的工作量测试和重复使用部分代码。
对变量和函数的命名方式保持一致。尝试使用足够长的名称以具有意义并描述变量的内容或函数的用途。
给变量和函数命名时使用一致的语法。换句话说，保持它们全部小写或全部大写；如果你喜欢骆驼命名法，请始终如一地使用它。
Test long scripts 的模块化方式。换句话说，不要在测试它任何部分之前尝试编写整个脚本。编写一部分并让它在添加下一部分代码之前起作用。
使用 descriptive variable and function names 并且避免使用单字符名称。
Watch your quotation marks 。记住，引号成对地用于字符串周围，并且两个引号都必须是同一种样式（单引号或双引号）。
Watch your equal signs 。您不应将单个 = 用于比较目的。
使用 var 关键字声明 variables explicitly 。