无法使用debugger,debugger在项目中不生效,导致无法有效排查问题

debugger是浏览器提供的调试语句,其主要是通过停止JS的执行,相当于设置断点。它的使用方法很简单, 只需要在我们的JS语句中, 插入一行debugger; 即可。

在JS代码编写的过程中,我们都会通过浏览器的调试模式(F12)来检查代码逻辑是否正确,大多数我们都是通过设置断点来进行调试。

应用debugger调试Vue项目,需要在项目中需要的位置写debugger,项目运行后,打开浏览器按F12,在chrome sources页签中就会直接进入断点,至此就可以可以进行单步、跳步调试。

1

javascript 复制代码
package.json->eslintConfig找到rules属性填写这段代码后重新运行项目

"rules": {
            "no-debugger": "off",
            "no-console": "off",
            "generator-star-spacing": "off",
            "no-tabs": "off",
            "no-unused-vars": "off",
            "no-irregular-whitespace": "off"
}

2开启sourcemap

javascript 复制代码
这种方式依赖source-map,需要在configureWebpack中配置devool:source-map
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

3谷歌浏览器设置解决

javascript 复制代码
这个在浏览器上设置也是可行的,个人比较建议这个办法,谷歌浏览器-更多工具-开发者工具-设置-Ignoer List-取消勾选/node_modules/|/bower_components/即可
相关推荐
华仔啊9 分钟前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
ttod_qzstudio17 分钟前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript
通往曙光的路上18 分钟前
day9_elementPlus2
javascript·vue.js·elementui
一只小风华~20 分钟前
Vue Router 的三种历史模式详解
前端·javascript·vue.js·笔记·学习·前端框架·ecmascript
前端_Coder23 分钟前
Vue 3 watch 与 watchEffect ,哪个更好?
前端·vue.js·前端框架
一只小风华~24 分钟前
Vue Router 导航守卫
java·前端·javascript·vue.js·笔记·html
龙仔CLL2 小时前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
reembarkation2 小时前
vue 右键菜单的实现
前端·javascript·vue.js
2301_7683502310 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:10 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf