1. 阅读报错信息
报错信息一般能够知道大致报错的位置，以及错误产生的原因，因此定位bug的首要操作就是先阅读相关的报错信息。
这里简单总结一些前端常见的报错类型
SyntaxError：语法错误
ReferenceError：引用错误，当不存在的变量被引用时发生的错误
RangeError：范围错误，设置的数值超出范围触发
TypeError：类型错误，值的类型不是预期
举一些例子
ReferenceError: "x" is not defined
// 这种错误通常产生于使用了未定义的变量，或者在变量申明前就使用了变量
SyntaxError: Identifier 'x' has already been declared
// 这种错误经常出现在重复申明了同一个变量
2. 日志监控系统
在实际项目中，当项目交付出去用户的使用过程中报错可能就不是那么容易能够得到准确的报错信息了，毕竟用户只会告诉你：我网页崩了之类的。所以这个时候日志监控系统就能发挥它的作用了。
这样的系统有很多，有开源的，也有自己写的。在这里简单的用Sentry来举例。
在如上的界面中，会显示错误信息，和相关的文件信息，能够大致定位。
同时也可以通过使用webpack上传soureMap，Sentry可以定位到对应的代码片段并展示出来（即如上图）
3. 合理利用console
举个栗子：当在页面中点击了一个确认按钮，但发现发送的数据不符合预期，这时，就可以在点击按钮之后执行的方法中利用console在函数不同的阶段（比如不同的逻辑判断语句中）输出出问题的这个数据，定位到数据不准确的片段。
tip：使用console时的小技巧，可以在打印的数据前面添加关键字，便于在多个数据打印时进行区分
如：
console.log('用户信息', userInfo);
4. 排除法
当整个页面报错，但是报错又不够明显，无法定位具体是哪一段代码报错的话，可以在该页面相关的代码中分模块去进行注释。
如果报错消失，那证明问题大概率出在注释掉的代码片段中；
如果报错未消失，那证明注释掉的代码大概率没有问题，则继续在未注释的代码中按照上述方法进行排除。
5. 利用开发者工具的断点调试功能
类似上图，Chrome内置的开发者工具提供了断点功能。可直接在页面中，通过浏览器定位到的报错位置跳转到对应的代码中，通过打断点的方式进行调试。
在这里就不赘述具体的方法，后面有时间再单独用一篇博客来对此进行总结
6. 关键词搜索
这个方法就很简单粗暴了，根据错误提示信息，复制关键词到代码编辑器中进行全局搜索，但智能大致的得到报错的代码文件。然后再通过以上的方法去具体进行定位即可。
