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

思考ing--2024-03-08 21:06

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

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

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

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/即可