vue(4)-debugger与tool

vue的debugger需要配置一下，怕将来忘记又要去查，索性随手记一笔。

devtools安装

1.github下载：git clone https://github.com/vuejs/vue-devtools
2.下载好后进入vue-devtools工程 执行

npm install
npm run build

3.修改vue-devtools\shells\chromemainifest.json 中的persistant为true
4.扩展Chrome插件
Chrome浏览器 > 更多程序 > 拓展程序
点击加载已解压程序按钮, 选择 vue-devtools > shells > chrome 放入进去。安装完后F12会出现vue的小标志。

5. 问题
   有时候突然小标志会没有，我F12再刷新一下，就好了。

debuger

• config下index.js中使用 devtool: '#cheap-module-eval-source-map' 在 Chrome 下 debug，打了断点是不进去的，所以将其改为 devtool: '#source-map'。
• 假设我们想调试App.vue这个组件，可以在想要调试的代码前添加debugger
  比如我们接下来把debugger加在getData()方法中。

完事后效果如下图，就这么简单。