获得徽章 2
DOM断点
当想对DOM节点发生变化时进行断点，请使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。设置 DOM 断点：
单击Elements选项卡
找到要设置断点的元素
右键单击该元素
将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
breakpoint
console虽然简单，但是对于bug调试，源码查看，或者大家都不想遇到的历史老项目排错，同事项目排错等较为复杂的场景，起到的作用就没那么大了，还是需要断点调试更为直观高效。
console.$i
这个功能是让我们可以在 devtool 开发者工具直接使用npm包，当然这个按需功能，需要扩展程序Console Importer作为辅助工具
以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
console.table
这个方法可能比较少人知道，可以将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的。
console.dir
对于DOM节点的打印输出，如果采用console.log，会以标签的形式输出，和直接查看没有太大的差异，有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
console.assert
第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
console.warn
在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
console.error
在控制台输出错误信息，用于代码错误和异常的提示
console.log
这应该是我们最常用的功能，基本上每天都会使用到，作用也很简单，在控制台输出内容，这边有个小技巧。
假设你有多个变量需要输出，如果直接输出，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法，可以更直观的查看变量对应。
Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制
函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果
还可以通过 transition 的回调函数动态设置按钮禁用态
这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的
