chrome调试插件

Vue.js devtools

去google 更多工具 拓展程序 添加Vue.js devtools

常用调试方法

console.log()

console.error()

alert()

debugger

js中debugger 调试

debugger：停止JS的执行，相当于设置断点。 在JS代码编写的过程中，我们都会通过浏览器的调试模式（F12）来检查代码是否正确，大多数我们都是通过设置断点来进行调试。 打开浏览器按F12：

在12行设置断点（鼠标点击12）：

按F5刷新界面（当前浏览器会执行你设置断点的位置的时候）：

然后按F10一步一步执行下去，这是我们传统的JS调试方法，但是如果遇见JS代码过多并且杂乱的时候（比如上千行的时候），我们自己找位置设置断点的时候就会发现每次都要向下滑一会儿；要么就ctrl+F查找（可能出现相同的变量等等情况）；或者记住当前代码编写的行数位置，再在浏览器调试模式中滑到相应的位置设置断点，总感觉很烦。

这个时候我们就可以使用JS中提供的debugger语句：

按F5刷新：

————————————————

slow 3G

f12右上角，可以缓慢加载，查看状况

cdn 引用vue的时候 f12里app.某一项数据