写算法、写后端开发的时候,在 IDE 打断点、条件断点、检测变量用的飞起,但是在 JS 以及 Vue 的前端开发中,这一套就有一些变化了。一是因为调试工具从各家 IDE 变为了浏览器,二是因为 Vue 的每个组件的变量不能在浏览器中直接访问,三是因为 Vue 代码需要转化为原生 JS 执行,所以看报错总会有一堆 vue.runtime.esm.js 之类的、来自 Vue 框架本身代码的报错,而不是指向具体某一行的报错。

vue.runtime.esm.js 报错
vue.runtime.esm.js 报错

经过一段时间的摸索,博主发现了几种调试的方法。

输出变量调试法

在刚学 C 语言、还不会用 IDE 的时候,我很喜欢使用 printf 输出变量进行调试。在 JavaScript 里,可以使用 console.log() 输出变量。

能不能在浏览器里的 Console 进行调试呢?答案也是可以的,只要在调试的时候,在代码里把 Vue 组件绑在 window 上。

在 Vue 组件的 activatedonload 函数开头加上一行:

1
window.my_component = this;

然后就可以在浏览器 Console 窗口使用 window.my_component 访问到组件的 this 及其变量啦~

在 Console 中查看变量
在 Console 中查看变量

断点调试法

通过打断点进行调试,也是常见的调试方法之一。我们在浏览器找到自己写的代码,然后就可以在代码上打断点了。

不过,我们的代码不是在 localhost:8080 目录,而是在 webpack:\\ 目录下:

webpack 下的代码
webpack 下的代码

不过这也是因为我配置了 webpack。如果实在找不到,还可以在 Source 这个页面按 Ctrl+Shift+F 全局搜索自己的代码内容;或者在你的代码的某个地方 console.log(1),然后在 Console 部分找到对应的超链接跳转到代码。

通过 console.log 找到源码
通过 console.log 找到源码

Chrome 插件 Vue.js devtools

Vue 也提供了 Chrome 和 Firefox 插件,利用插件,可以方便的查看当前页面的结构,以及观察 Vuex、Vue Router 的状态。

Vue.js devtools
Vue.js devtools