Devtools使用

为什么要使用 debugger

console.log 是前端开发最常用的调试手段，它简单直接解决一部分问题。但当遇到十分复杂的问题，console.log 就会变得不趁手。比如：

• 一个逻辑复杂的算法
• 一个复现步骤十分繁琐的bug。
• 一段运行流程冗长的代码
• 一段没有注释、起名随意的代码
• server 端代码

在这些情况下，断点调试是非常有价值的，将 debug 的时间复杂度从 O(n) 降到 O(1)。

DOM

可以通过它来可视化所有的 DOM 元素，可以查看任何 DOM 的属性

1. Element状态

你可能会在开发中遇到这么一个场景：给一个 a 标签设置了多种状态下的样式，但是如果手动去改变状态的话就有点麻烦，这时候这个 Tips 就能帮你解决这个问题。

可以从上图中看到，无论你想看到元素的何种状态下的样式，都只需要勾选相对应的状态就可以了，这是不是比手动更改方便多了？

2. 快速定位 Element

通常页面都是可以滚动的，那么如果想查看的元素不在当前窗口的话，你还需要滚动页面才能找到元素，这时候这个 Tips 就能帮你解决这个问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

当点击这个选项的时候，页面就会自动滚动到元素所在的位置，这样比边滚动边查看是否找到元素的方式方便多了。

3. 找到之前查看过的 DOM 元素

我们可以通过 $0 来找到上一次查看过的 DOM 元素，$1 就是上上次的元素，之后以此类推。这时候你可能会说，打印出来元素有啥用，在具体什么位置还要去找啊，不用急，马上我就可以解决这个问题

当你点击这个选项时，页面立马会跳转至元素所在位置，并且 DevTools 也会变到 Elements 标签。

4. DOM 断点

如果你想查看一个 DOM 元素是如何通过 JS 更改的，你就可以使用这个功能。

当我们给 ul 添加该断点以后，一旦 ul 子元素发生了改动，比如说增加了子元素的个数，那么就会自动跳转到对应的 JS 代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pNrMl57e-1646231283687)(C:\Users\USER\Desktop\前端面试\书籍\读书笔记\图片\devtool-4.png)]

其实不光可以给 DOM 打断点，我们还可以给 Ajax 或者 Event Listener 打断点。

事件

1. 查看事件

我们还可以通过 DevTools 来查看页面中添加了多少的事件。假如当你发现页面滚动起来有性能上的问题时，就可以查看一下有多少 scroll 事件被添加了

2. Event Listener 断点

在 Chrome Devtools 的 Sources 面板还可以添加 Event Listener 的断点，指定当发生什么事件时断住，可以用来调试事件相关代码。

JS

1. 普通断点

在想断住的那一行左侧单击一下就可以添加一个断点，运行到该处就会断住。

这是最基础的断点方式，VSCode 和 Chrome Devtools 都支持这种断点。

2. 条件断点

右键单击代码所在的行左侧，会出现一个下拉框，可以添加一个条件断点。

输入条件表达式，当运行到这一行代码并且表达式的值为真时就会断住，这比普通断点灵活些。

URL

在 Chrome Devtools 的 Sources 面板可以添加 XHR 的 url 断点，当 ajax 请求对应 url 时就会断住，可以用来调试请求相关的代码。