Chrome调试折腾记之JS断点调试技巧

介绍

Web开发中调试是必不可少的环节之一，Chrome提供了丰富的调试工具来帮助我们定位问题。本文将着重介绍Chrome的JS断点调试技巧。

步骤

步骤一：打开调试工具

打开需要调试的页面，按下 F12 或右键选择 审查元素 ，即可打开 Chrome 的调试工具。

步骤二：在JS代码中插入断点

在需要调试的代码行左侧单击即可插入断点，Chrome会在此处暂停代码执行，等待用户进一步操作。

步骤三：调试

一旦代码执行到断点处，Chrome会暂停执行并高亮断点所在的行。我们可以逐行调试、查看当前的变量值以及调用栈等。

逐行调试

按下 F10 或点击工具栏上的单行步过按钮，可以逐行跳过执行，查看所执行的代码和变量值。按下 F11 或点击工具栏上的 单行步入，可以进入当前函数内部执行。

查看变量值

在 Sources 面板上，选择要查看的变量所在的作用域，可以查看到当前域内的所有变量。也可以使用命令行输入变量名查看值。

查看调用栈

在 Call Stack 面板上，可以查看当前执行代码所处的调用栈。在此面板上选择不同的栈帧，可以跳转到对应堆栈的位置查看代码执行过程中的上下文。

步骤四：解除断点

在调试过程中，用户可以随时解除插入的断点，继续执行程序。

示例说明

示例1

在下面这个代码中加入断点，然后逐步执行代码来查看执行过程中变量的取值：

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

foo(3);

示例2

当无法精确定位问题所在时，可以逐行查看执行过程中哪一行代码引起了异常：

function foo() {
  var a = 1;
  var b = null;
  var c = a + b;
  console.log(c);
}

foo();

以上就是Chrome调试折腾记之JS断点调试技巧的介绍。尽情享受Chrome调试带来的愉悦吧！