debugger是浏览器提供的调试语句,其主要是通过停止JS的执行,相当于设置断点。它的使用方法很简单, 只需要在我们的JS语句中, 插入一行debugger; 即可。
在JS代码编写的过程中,我们都会通过浏览器的调试模式(F12)来检查代码逻辑是否正确,大多数我们都是通过设置断点来进行调试。
应用debugger调试Vue项目,需要在项目中需要的位置写debugger,项目运行后,打开浏览器按F12,在chrome sources页签中就会直接进入断点,至此就可以可以进行单步、跳步调试。
1
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
这种方式依赖source-map,需要在configureWebpack中配置devool:source-map
module.exports = {configureWebpack: {devtool: 'source-map'}
}
3谷歌浏览器设置解决
这个在浏览器上设置也是可行的,个人比较建议这个办法,谷歌浏览器-更多工具-开发者工具-设置-Ignoer List-取消勾选/node_modules/|/bower_components/即可