能很好地使⽤ DevTools 的话，它能够很好地帮助你提⾼⽣产⼒和解决问题的能⼒。

Elements

这个功能肯定是⼤家经常⽤到的，我们可以通过它来可视化所有的DOM 标签，可以查看任何 DOM 的属性，接下来我们就来学习⼀下关于这⽅⾯的 Tips。

Element 状态

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

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

当点击这个选项的时候，⻚⾯就会⾃动滚动到元素所在的位置，这样
⽐边滚动边查看是否找到元素的⽅式⽅便多了。

给 JS 打断点想必各位都听过，但是 DOM 断点知道的⼈应该就少了。如果你想查看⼀个 DOM 元素是如何通过 JS 更改的，你就可以使⽤这个功能。
当我们给 ul 添加该断点以后，⼀旦 ul ⼦元素发⽣了改动，⽐如说增加了⼦元素的个数，那么就会⾃动跳转到对应的 JS 代码.

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

不知道你是否遇到过这样的问题，找不到之前查看过的 DOM 元素在
哪⾥了，需要⼀个个去找这就有点麻烦了，这时候你就可以使⽤这个
功能。

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

当你点击这个选项时，⻚⾯⽴⻢会跳转⾄元素所在位置，并且 DevTools 也会变到 Elements 标签.

给 JS 打断点想必⼤家都会，但是打断点也是有⼀个不为⼈知的 Tips
的。

for (let index = 0; index < 10; index++) {
    // 各种逻辑
    console.log(index)
}

对于这段代码来说，如果我只想看到 index 为 5 时相应的断点信息，但是⼀旦打了断点，就会每次循环都会停下来，很浪费时间，那么通过这个⼩技巧我们就可以圆满解决这个问题

⾸先我们先右键断点，然后选择 Edit breakpoint… 选项

在弹框内输⼊ index === 5，这样断点就会变为橙⾊，并且只有当
符合表达式的情况时断点才会被执⾏

虽然这篇文章的内容并不多，但是涉及到的⼏个场景都是⽇常经常会碰
到的。虽然日常开发我一直 console.log 比较多。