无法使用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/即可
相关推荐
光影少年1 小时前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿1 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
西洼工作室3 小时前
Vue CLI为何不显示webpack配置
前端·vue.js·webpack
程序员王天6 小时前
【开发AGIC】Vue3+NestJS+DeepSeek AI作业批改系统(已开源)
vue.js·ai编程·nestjs
昔冰_G7 小时前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
aklry7 小时前
elpis之动态组件机制
javascript·vue.js·架构
羊锦磊8 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
Roadinforest8 小时前
水墨风鼠标效果实现
前端·javascript·vue.js
金梦人生10 小时前
Pinia 基本使用
vue.js
追逐时光者11 小时前
找 Vue 后台管理系统模板看这个网站就够了!!!
vue.js