前端技术进阶:用浏览器来断点调式

前端自从出现了MVVM架构之后，一直火爆到现在，据说阿里巴巴当时不管有用没用的前端都招过来了，说实在不管是vue、还是react他们的核心语言也是JavaScript，而技术的进阶的话还是要看基本功就是对JavaScript的了解程度，所以你会发现一些程序编程大牛，到最后还是会回头看JavaScript的基础，因为架构可能发生改变但是原生基础是改变不了的。

那么想要深入了解JavaScript的话，就必须对浏览器中的调式工具应用的熟练，浏览器中拥有一个神一样的调式工具，这通常是前端程序员进阶的分水岭。那就是"断点调式"，千万别小瞧这个，很多公司通过一个项目的bug来看程序员是如何打断点并且找到解决方案，来判断前端程序员的水平的。
以chorme浏览器调式为例子：

快捷键F12或者通过设置打开开发者工具看到sources就是断点调式的入口

首先在实例之前的话我要介绍下断点的类型：
普通断点：

这种蓝色的就是普通的断点

条件断点：

通过打完断点之后右键选择Edit Breakpoint...”可以设置触发断点的条件，就是写一个表达式，表达式为 true 时才触发断点。

断点要怎么打才合适？
虽然说打断点的操作是比较简单的，但是打断点到底应该如何打呢？通常来说一个程序拥有bugs时我们运用到断点是比较多的，比如下图所示：

本来点击加载更多完之后会有更多的数据

有经验的程序员看到这种情况一般来说要么是后端的接口产生问题了，要么自己的ajax出现了问题，这个时候就可以用断点进行调式。其实可以现用postman调式一下后端的数据是否出现问题了，如果后端访问的是正常的，那么基本是我们的前端代码出现问题了。前端点击无效果如果细分的话也有很多因素（选择器错误，语法错误，被选择的元素是后生成），这些的话，就需要程序员通过采用console来配合基本功来慢慢调式。最终找到问题所在，然后来改掉bug！