JS `Chrome DevTools` `Conditional Breakpoints` 与 `Logpoints` 进阶

各位观众老爷，大家好！今天咱们聊点高级的，关于 Chrome DevTools 里面那些个“断点”和“日志点”的骚操作，让你的调试效率直接起飞！

第一部分：欢迎来到断点进阶班！

断点，这玩意儿就像电影里的暂停键，能让你的代码在指定的地方停下来，让你好好审视它。但普通的断点用多了，你会发现有点笨，总是停在不该停的地方，浪费时间。这时候，就需要“条件断点”来拯救你了！

1. 啥是条件断点？

简单来说，条件断点就是带有“条件”的断点。只有当这个条件满足时，代码才会停下来。就像你跟代码说：“嘿，兄弟，只有当 x > 10 的时候，你才许停下来，不然就给我老实跑着！”

2. 怎么玩转条件断点？

• 设置方法：

  • 在 Chrome DevTools 的 Sources 面板中，找到你想加断点的行号。
  • 右键点击行号，选择 "Add Conditional Breakpoint…"
  • 输入你的条件表达式。

• 条件表达式的写法：

  条件表达式必须是 JavaScript 表达式，并且最终结果是一个布尔值（true 或 false）。

  • x > 10：当 x 大于 10 时暂停。
  • typeof myVariable === 'undefined'：当 myVariable 未定义时暂停。
  • myArray.length > 5 && myArray[0] === 'hello'：当 myArray 长度大于 5 并且第一个元素是 "hello" 时暂停。
  • i % 2 === 0：当 i 是偶数时暂停（循环中常用）。

• 示例：

  假设我们有以下代码：

  function processArray(arr) {
    for (let i = 0; i < arr.length; i++) {
      let value = arr[i];
      console.log("Value:", value); //假设这行是第4行
    }
  }
  
  let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  processArray(data);

  如果我们只想在 value 大于 5 的时候暂停，就可以在第 4 行设置一个条件断点，条件是 value > 5。

  这样，只有当 value 大于 5 的时候，代码才会停下来，方便你观察它的状态。

• 高级用法：

  • 使用函数作为条件： 你可以在条件表达式中使用函数。 例如：isEven(i)。 但要注意，函数必须在当前作用域内可用。
  • 访问闭包中的变量： 条件断点可以访问闭包中的变量，这在调试一些复杂的异步操作时非常有用。
  • 结合 this 关键字： 在对象的方法中，你可以使用 this 关键字来访问对象的属性。 例如：this.name === 'John'。

3. 一些实用的场景：

• 调试循环： 只在循环的特定迭代中暂停。
• 调试递归： 只在递归的特定深度暂停。
• 调试异步代码： 只在异步操作完成后的特定状态下暂停。
• 找出导致错误的值： 设置条件断点，当某个变量的值超出预期范围时暂停。
• 追踪特定函数的调用： 在函数入口处设置条件断点，只在满足特定条件时暂停。

第二部分：Logpoints：比 console.log 更好用的调试神器！

console.log 是我们最常用的调试工具，但它也有一些缺点：

• 需要修改代码，添加 console.log 语句。
• 调试完成后，需要手动删除这些语句，容易遗漏。
• 如果需要输出复杂的表达式，console.log 语句会变得很冗长。

而 Logpoints，就是为了解决这些问题而生的！

1. 啥是 Logpoints？

Logpoints 允许你在不修改代码的情况下，在指定的位置输出日志信息。它就像一个隐形的 console.log，可以让你在不打断程序运行的情况下，观察变量的值和程序的执行流程。

2. 怎么玩转 Logpoints？

• 设置方法：

  • 在 Chrome DevTools 的 Sources 面板中，找到你想加 Logpoint 的行号。
  • 右键点击行号，选择 "Add Logpoint…"
  • 输入你想输出的表达式或字符串。

• 表达式的写法：

  Logpoints 支持输出任何 JavaScript 表达式，甚至可以包含多个表达式。

  • Value:, value：输出 "Value:" 字符串和 value 变量的值。
  • i:, i, value:, value, arr.length:, arr.length：输出多个变量的值。
  • {x: x, y: y}：输出一个包含 x 和 y 属性的对象。
  • calculateSomething(value)：调用函数并输出返回值。

• 示例：

  还是用上面的代码：

  function processArray(arr) {
    for (let i = 0; i < arr.length; i++) {
      let value = arr[i];
      console.log("Value:", value); //假设这行是第4行
    }
  }
  
  let data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  processArray(data);

  如果我们想在每次循环迭代时输出 i 和 value 的值，就可以在第 4 行设置一个 Logpoint，内容是 i:, i, value:, value。

  这样，每次循环迭代时，控制台都会输出类似这样的信息：

  i: 0 value: 1
  i: 1 value: 2
  i: 2 value: 3
  ...

• 优势：

  • 无需修改代码： 这避免了在调试完成后忘记删除 console.log 语句的风险。
  • 输出复杂的表达式： Logpoints 可以输出任何 JavaScript 表达式，让你可以更方便地观察复杂的数据结构。
  • 不打断程序运行： Logpoints 不会像断点那样暂停程序的执行，让你可以在不影响性能的情况下，观察程序的运行流程。
  • 更容易管理： DevTools会管理你设置的Logpoints，方便你随时开启和关闭。

3. 一些实用的场景：

• 追踪变量的值： 在变量变化的关键位置设置 Logpoints，观察变量的值的变化。
• 记录函数的调用： 在函数入口和出口处设置 Logpoints，记录函数的调用次数和参数。
• 监控异步操作： 在异步操作的关键阶段设置 Logpoints，监控异步操作的进度和结果。
• 性能分析： 在代码的关键路径上设置 Logpoints，记录代码的执行时间，找出性能瓶颈。

第三部分：条件断点 + Logpoints = 调试界的王炸！

当条件断点和 Logpoints 结合起来使用时，威力会更加强大。你可以利用条件断点来控制 Logpoints 的输出，只在满足特定条件时才输出日志信息。

示例：

假设我们想在 processArray 函数中，只在 value 大于 5 的时候才输出日志信息。

我们可以这样做：

1. 在第 4 行设置一个条件断点，条件是 value > 5。
2. 在第 4 行设置一个 Logpoint，内容是 i:, i, value:, value。

然后，在条件断点的 Action 中，选择 "Log Message"，输入你想输出的表达式，例如 i:, i, value:, value。

这样，只有当 value 大于 5 的时候，控制台才会输出日志信息。

另一种方法：

直接在Logpoint中使用条件判断，虽然看起来稍显复杂，但也能达到同样的效果。

在第4行设置一个Logpoint，内容是： value > 5 ? "i:" + i + " value:" + value : ""

这个Logpoint的表达式使用了三元运算符，只有当value > 5时才会输出字符串，否则输出空字符串，实际上相当于什么都不输出。

表格总结：条件断点 vs Logpoints

特性	条件断点	Logpoints
作用	在满足条件时暂停代码执行	在不修改代码的情况下输出日志信息
是否修改代码	否	否
是否暂停执行	是	否
使用场景	需要深入分析代码执行过程，找到错误原因	需要观察变量的值和程序的执行流程，进行监控
表达式	必须是布尔值表达式	可以是任何 JavaScript 表达式

第四部分：一些需要注意的地方

• 性能问题： Logpoints 也会对性能产生一定的影响，尤其是在高频率调用的函数中。 因此，在使用 Logpoints 时，要注意控制输出的频率，避免过度输出。
• 作用域问题： 条件断点和 Logpoints 只能访问当前作用域内的变量。 如果需要访问其他作用域的变量，可以使用闭包或者将变量传递到当前作用域。
• 复杂的表达式： 虽然 Logpoints 支持输出复杂的表达式，但过长的表达式会降低代码的可读性。 建议将复杂的表达式拆分成多个简单的表达式，或者使用函数来封装。
• 不要滥用： 断点和日志点都是调试工具，不要过度依赖它们。 良好的代码习惯和清晰的逻辑思维才是解决问题的根本。

第五部分：高级技巧和最佳实践

1. 利用 Scope 面板： 在断点暂停时，利用 DevTools 的 Scope 面板可以查看当前作用域内所有变量的值，这对于理解代码的执行状态非常有帮助。
2. 使用 Watch 表达式： Watch 表达式可以让你实时监控特定变量的值，即使代码没有暂停，你也可以看到变量的变化。
3. 善用 Call Stack： Call Stack 可以告诉你当前函数是从哪里被调用的，这对于理解代码的调用关系非常有帮助。
4. 结合 Source Maps： 如果你的代码经过了编译或压缩，可以使用 Source Maps 将调试信息映射回原始代码，方便你进行调试。
5. 代码审查： 与其花费大量时间调试代码，不如在编写代码时更加认真，进行代码审查，避免出现低级错误。

第六部分：实战案例分析

假设我们正在开发一个电商网站，用户可以在网站上搜索商品，并将商品添加到购物车。

现在，我们发现一个 bug：当用户搜索某个商品时，有时候购物车中的商品数量会突然变成 0。

为了找到 bug 的原因，我们可以这样做：

1. 分析代码： 首先，我们需要分析处理购物车逻辑的代码，找出可能导致购物车数量变成 0 的地方。
2. 设置断点： 在可能导致购物车数量发生变化的代码处设置断点，例如添加商品到购物车、删除商品、修改商品数量等。
3. 使用条件断点： 如果购物车数量只在特定情况下才会变成 0，可以使用条件断点来缩小调试范围。 例如，可以设置条件断点，当购物车数量小于 0 时暂停。
4. 使用 Logpoints： 在关键的代码路径上设置 Logpoints，输出购物车数量、商品信息等，观察数据的变化。
5. 利用 Scope 面板： 在断点暂停时，利用 Scope 面板查看购物车相关的变量的值，例如购物车对象、商品列表等。
6. 逐步调试： 一步一步地执行代码，观察数据的变化，找到 bug 的根源。

通过以上步骤，我们可以逐步缩小调试范围，最终找到导致购物车数量变成 0 的 bug。

结束语：

好了，今天的讲座就到这里。希望通过今天的讲解，大家能够掌握 Chrome DevTools 中条件断点和 Logpoints 的使用技巧，提高调试效率，写出更健壮的代码！记住，工欲善其事，必先利其器！ 调试工具用得好，下班回家早！

谢谢大家！