调试中的隐藏技巧💎

任何能减少你繁重工作时间的方法都有利于提高你的效率。调试就是这样一项费力的任务。开发者都力求编写无bug的代码，但我们都知道这并非易事。没有人喜欢看到代码里有bug——那些红色的线条实在让人不忍直视，对吧？然而，如果你能及早发现错误，它们其实是有益的。正确地调试错误会让你学到新知识，并获得成就感。我曾经无数次在调试自己的代码时学到很多东西，也从中看到了它如何挑战我原有的认知。

我们都是在犯错中学习的，而且会再次犯错以吸取更多教训。

激励的话就到此为止，让我们进入正题。

今天，我将分享一些能大幅提升你调试技能的技巧和窍门。这些技巧我只在 Chrome 开发者工具中测试过（抱歉，Firefox 用户），但其中一些技巧与浏览器无关。

1. 在 console.log 中使用简写对象属性值表示法

这是我最喜欢的console.log技巧，必须把它排在首位。你肯定在代码库里写过大量的console语句来尝试找出某个变量的值。console 的便捷性使其成为调试领域的佼佼者🏆。这句黄金法则如下：

 console.log(a);

这很棒，你可以打开控制台开发者工具查看数值。但是，随着代码行数的增加，追踪特定数值的引用就变得困难了。

 console.log(a); // prints 20
 console.log(b); // prints 30
 console.log(c); // prints 40
// Sorry what was the reference variable for '30'? I am kind of lost😕

一个非常显而易见的解决方案是，将变量的字符串表示形式一起输出。这要归功于控制台的强大功能。

 console.log('a', a); // prints a 20
 console.log('b', b); // prints b 30
 console.log('c', c); // prints c 40

但正如我所说，我们需要节省时间，减少代码行数，才能提高效率和生产力，对吧？所以，诀窍在于将变量放在花括号“ {} ”内。这其实不是什么技巧，而是一种语言特性，称为对象属性值简写表示法。你可以在这里了解更多信息。

  // use object shorthand property value notation
  console.log({ a }); // prints { a: 20 };
  console.log({ b }); // prints { b: 30 };

这样做，就能得到引用变量及其值。代码越少，价值越高。

额外提示：在 Chrome 控制台标签页中声明变量时，请使用 'var' 而不是 'const' 或 'let'，以避免烦人的语法错误。'var' 就像你的临时记事本一样好用。

2. 不再需要为箭头函数包裹花括号

你现在应该已经用过箭头函数了吧（如果还没用过，你应该开始用了）。箭头函数简洁明了，而且在编写函数定义时，无需使用花括号和return语句。

   const foo = x => 2 * x; // how awesome is that 😊

一个常见的用例是在数组实用回调函数（map、filter、reduce等）内部使用。

   let arr = [1, 2, 3];
   let newArr = arr.map(el => el * el); // [1, 4, 9]

现在，假设你想调试 map 回调函数，该如何打印el值呢？一个简单的办法是重构回调函数，用花括号括起来，并插入 return 语句。

 let arr = [1, 2, 3];

 // using curly braces and return statement
 let newArr = arr.map(el => {
  console.log({ el }); // prints {el: 1}, {el: 2}, {el: 3}
  return el * el;
});

什么！你在开玩笑吗🙈？这可不是理想的解决方案。不仅耗时，而且恢复原状也需要更多时间。更好的解决方案是这样的：

   let arr = [1, 2, 3];

   // more concise and inline 🎉
   let newArr = arr.map(el => console.log({ el } ) ||  el * el);

哇！那是什么？别担心，只是 JavaScript 代码。我来解释一下：

这里涉及两件事：

• console.log()总是返回undefined，这是一个假值。
• 给定一个类似expr1 || expr2的语句，逻辑或运算符(||)如果 expr1 可以转换为真，则返回expr1；否则，返回expr2。

所以，`console.log({ el }) ` 的返回值是未定义的，因此执行了第二个表达式`el * el`。这个改动的好处在于，你可以直接看到输出值，无需调试器或繁琐的curl语句。是不是很棒？😊

如果你是函数式编程的爱好者，并且使用像Ramda这样的库，这将非常方便。

3. 添加日志点——减少代码中 console.log 的使用

console.log已经成为我们调试过程中不可或缺的一部分。我们倾向于在代码中到处使用它；它已经成为我们抵御 bug 的第一道防线。问题
在于清理这些日志语句非常耗时。你当然可以找到每一条 console.log 语句并手动删除它们。但如果我说有一个更好的解决方案呢？不妨试试这个新来的小家伙——logpoint。

谷歌在 Chrome 73 中加入了这项功能。它允许你直接从开发者工具向源代码中添加控制台语句。

步骤：

• 打开开发工具的开源部分，找到你的源代码。
• 单击要添加控制台语句的任意行号。
• 将出现一个选项列表；选择“添加日志点”。
• 此时会弹出一个断点编辑器，允许您输入变量名。这与在console.log()函数中编写表达式的方式类似。
• 输入我上面展示的简写属性表示法。点击编辑器外部或按回车键保存。
• 橙色徽章将代表您的 Logpoint 积分，一切就绪。

现在，每次脚本执行时，您都会在开发工具的控制台部分看到输出的值。您可以添加多个日志点。

行动胜于雄辩：

额外提示：您还可以使用条件断点功能，在条件评估为真时插入断点。

4. 存储和复制

我大部分调试时间都花在 Chrome 开发者工具上。我把它当作我的 JavaScript 草稿本。它内置了很多功能，供我们使用。其中一个对我来说特别有用的功能就是将变量值复制到剪贴板。

要将任何引用变量（例如x）复制到剪贴板，只需在控制台标签页中输入copy(x)并按 Enter 键。Chrome 会将该变量复制到剪贴板，然后您可以使用普通的粘贴命令将其粘贴到任何位置。

当您处理网络响应时，这项功能的优势就显现出来了。您可以将此复制功能与另一个名为“存储为全局变量”的出色功能结合使用。

让我们看看实际效果：

• 打开“网络”选项卡，然后从列表中选择一个请求。
• 打开右侧的预览部分。
• 右键单击属性名称，然后选择“存储为全局变量”。
• 该变量将显示在您的控制台选项卡中，您可以使用copy()函数将其复制到剪贴板。

一举两得。

额外功能：您可以使用“Ctrl + f”在预览部分的整个响应对象中搜索特定的字符串匹配项。

5. 网络请求的断点

理想情况下，在构建客户端时，你应该尽量减少 HTTP 请求的数量。这不仅能带来流畅的性能，还能帮助避免bug。

在一家保险公司的一个项目中，我们构建了一个数据驱动的用户界面。表单中的每个后续问题都基于用户之前的操作，并通过网络获取数据。
我们需要分析特定类型的请求触发时，如何准确地调试请求负载。最终，我找到了一个很棒的解决方案，叫做XHR/fetch 断点。它允许我在 fetch 请求上设置条件断点。

XHR 断点允许您在所有网络请求上设置断点。但它真正的强大之处在于可以通过“ URL 包含”部分应用断点。您可以在那里输入任何关键字，Chrome 浏览器会在遇到包含匹配词的请求 URL 时暂停。是不是很棒！

步骤如下：

• 在开发工具的右侧面板中，找到“开源”选项卡。
• 您应该在“断点”下方看到“XHR/fetch 断点”部分。
• 点击“+”按钮，应该会弹出一个断点编辑器，要求你输入关键字。
• 输入关键词并按回车键。

6. 将您的请求复制为 cURL

当您想通过命令行（例如cmd或bash）触发请求时，这非常方便。您还可以将复制的链接粘贴到Postman 应用中，它会自动填充所有请求头。这对于可视化请求非常有帮助。

• 打开Chrome开发者工具中的“网络”选项卡。
• 找到要复制的请求，右键单击以显示多个选项。
• 将鼠标悬停在“复制”选项上，将显示您可以将请求复制为的其他格式列表。
• 选择“复制为 cURL”，它将保存到剪贴板。

7. 不要放弃你的 CSS 更改——刷新页面时要保留样式。

本技巧专为我们的UI/设计师朋友们准备。我们知道，可以通过“元素”选项卡的“样式”部分修改CSS 。但是，刷新页面后，这些更改不会保留。如果您希望对现有样式表所做的修改生效，可以按照以下步骤操作：

• 打开“源代码”选项卡，然后选择“覆盖”。
• 单击“选择覆盖文件夹”，然后选择要保存更改的文件夹。
• 会弹出权限对话框询问您是否允许。请点击允许。
• 选择你的文件夹，一切就绪，可以开始摇滚了。

现在，无论何时您对现有样式进行更改，即使刷新页面，这些更改也不会消失。

注意：添加新的样式更改不会保留！

最后想说的

编写完全没有bug 的代码几乎是不可能的，这是无法改变的事实。与其为此抓耳挠腮，不如我们调整策略，提升调试技能。相信我，通过探究 bug 的根本原因，你会受益匪浅。

如果你喜欢这篇文章，点几个❤️肯定会让我很开心😀。现在，去…… 杀现在就清除一些虫子🐞。