无法使用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/即可
相关推荐
咪库咪库咪8 小时前
vue3-组件
vue.js
10share8 小时前
100行代码 模拟实现Vue 响应式系统
前端·vue.js
用户40993225021211 小时前
Vue状态管理入门第四章:组合式store和SSR风险
前端·vue.js·后端
锋行天下1 天前
半秒开!还有谁!!!
前端·vue.js·架构
JING小白1 天前
Day 1 重学Vue:响应式系统的“底层逻辑”变更,Vue2旧时代的终结与Vue3新时代的开启
前端·vue.js
OpenTiny社区1 天前
从零开发 AI 聊天页要两周?试试这款 Vue3 垂直对话组件库 TinyRobot,直接开箱即用
前端·vue.js·github
Cobyte1 天前
22.Vue Vapor 组件 props 的实现
前端·javascript·vue.js
白雾茫茫丶1 天前
探索 Nuxt.js 全栈能力:用 Better-Auth 打造类型安全的 RBAC 权限系统
前端·vue.js·nuxt.js
向阳而生6602 天前
文件上传也能玩出花?Vue3 教你优雅实现“选择文件”和“选择文件夹”🚀
vue.js
3630458412 天前
Signal 带来的架构问题思考
前端·vue.js