深入探究JS调试：从断点开始

小蓝 • 2024-11-25 17:24 • 编程

断点是调试JS程序中常用的一种技术手段，用于暂停程序的执行，方便开发人员查看各种状态、调用栈、变量值等信息。我们可以在代码中通过设置断点，例如：

function foo() {
  let a = 1;
  let b = 2;
  console.log(a + b);
}

foo();

在DevTools中，我们可以点击行号将断点设置到给定的位置，并打开调试面板；当代码执行到这个位置时，程序会中断执行，以便于我们查看当前的状态变量以及调用栈等。

当然，我们也可以在JS代码中加入debugger语句，这样当程序执行到该语句时，程序同样会中断。

在程序中设置了断点后，我们可以单步执行程序，以便观察每一步的执行结果和状态变化。

DevTools 提供了几种单步执行方式，如下所示：

我们可以通过点击上述的按钮或使用对应的快捷键进行单步执行。

JS调试中，常常需要观察变量的值随着程序执行的变化情况。我们可以在 DevTools 中的 Scope 面板上查看变量值和作用域。

我们可以通过设置变量的监视点，以便于在断点命中时自动观察其变量值。例如，下面的代码为 “name” 添加了一个监视点：

let name = "Tom";
console.log(name); // 输出 "Tom"
name = "Jerry";

在 DevTools 中打开 Scope 面板，我们可以看到每个变量的当前值和作用域范围。同时，我们可以对变量进行编辑，以实现动态调试。

条件断点是一种特殊类型的断点，它只在符合特定条件时才会命中。在代码中，有时某个断点会由于某些原因反复命中，从而导致程序的性能下降，这时候我们可以使用条件断点进行限制。

在设置断点时，我们可以设定条件。例如，我们可以为下面的代码设置条件断点，只在 x 大于 5 时才命中：

function foo(x) {
  for (let i = 0; i < 10; i++) {
    console.log(i);
    if (i === x) {
      debugger;
    }
  }
}

foo(5);

在前端开发过程中，我们经常需要和后端进行交互，通过XHR（XML Http Request）请求获取数据。JS调试中，我们经常需要观察XHR请求的状态和响应数据等，以便检测接口的正确性。

在 DevTools 中，我们可以在 Network 面板中查看所有的网络请求，包括XHR请求、资源请求等。我们可以选定某个XHR请求并打开 Preview 窗口，可以查看其返回的数据以及响应状态，以便于调试接口。

JS开发中，异常处理是程序健壮性的重要组成部分。例如，在程序出现异常时，我们需要捕捉并记录错误信息，以便于进行问题定位和排查。

在 DevTools 的 Console 面板中，我们可以捕捉到运行时产生的异常，并显示栈内部的相关信息。同时，我们还可以在 Sources 面板中设置异常断点，以便于在程序抛出异常时自动中断调试程序。

本篇文章从断点的含义及作用、单步执行程序、监控变量的值、条件断点、XHR调试、异常处理等方面介绍了JS调试的相关知识。在日常开发中，熟练掌握JS调试技术非常重要，可以大大提高开发效率，同时也可以减少出错的概率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/184497.html