vue项目怎么使用 chrome 打断点 debug

  1. 常见的一种方式是在你的chorme浏览器安装dev-tools, 安装教程和使用教程, 自行百度;
    如果 显示的 是 Vue.js is detected on this page. Open DevTools and look for the Vue panel. 这时候你的devtools插件是不能用的
    你可以在你main.js 里面 添加 一行代码 其实就是开启 devtools
Vue.config.devtools = true

开启了后 F12 可以看见 如图
vue项目怎么使用 chrome 打断点 debug_第1张图片

  1. 比如想debug一个方法,在你想debug的地方加上 debugger 即可 如图
    vue项目怎么使用 chrome 打断点 debug_第2张图片
    效果 如图, 如果没有效果 请刷新
    vue项目怎么使用 chrome 打断点 debug_第3张图片
  2. 我直接写正确的方法, 自己瞎鼓捣了半天, 文件找错了 vue项目怎么使用 chrome 打断点 debug_第4张图片
    上图 让自己记住
    vue项目怎么使用 chrome 打断点 debug_第5张图片
    vue项目怎么使用 chrome 打断点 debug_第6张图片
    文件是webpack中的.vue文件!!!
    文件是webpack中的.vue文件!!!
    文件是webpack中的.vue文件!!!

你可能感兴趣的:(vue)