1.debugger源代码

我们学习vue源码采用的是Runtime+Compiler的版本 当我们vue-cli创建完成后

build/webpack.base.conf.js中

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },

我们知道了引入的vue.js文件是node_modules/vue/dist/vue.esm.js

node_modules/vue/dist/vue.esm.js：

function initMixin (Vue) { Vue.prototype._init = function (options) { debugger var vm = this; // a uid vm._uid = uid$3++; . . . } }

我们在initMixin函数的 Vue.prototype._init中加入‘debugger’，接下来我们就可以加入断点了

2.1 断点操作时按钮的含义

第一个按钮： 直接跳到下一个断点

第二个按钮 是步径的，会跳过函数 例如：

function asd() { init(); console.log() }

会跳过init();里面的代码

第三个按钮 一行一行代码执行的，例如上面的例子，就会直接进到init函数中

按钮的下面 是函数的调用关系