Vue中使用debugger在浏览器中不起作用的问题及解决

马永颖

使用debugger在浏览器中不起作用


问题描述

使用vscode编辑器，运行vue项目时想要断点调试，奈何始终进不了断点。
先后尝试Edge和chrome浏览器，均不生效，排除浏览器因素，定位为代码问题。

解决方案

找到文件vue.config.js，或全局搜索

1. configureWebpack

复制代码

，在如下位置加入

1. devtool:"source map"

复制代码

，重新启动项目，debugger即可生效。

vue中debugger报错 unexpected ‘debugger’ statement no-debugger


说下原因

Vue中debugger报错 unexpected

1. 'debugger'

复制代码

statement no-debugger（意外的“调试器”语句没有调试器）

1. eslink

复制代码

规则没有开启

1. 'debugger'

复制代码

，被规则屏蔽了，需要手动放开

方式一

找到

1. .eslintrc

复制代码

文件，在

1. .eslintrc

复制代码

文件下的

1. rules

复制代码

添加

1. "no-debugger": "off"

复制代码

方式二

1.找到项目中的

1. package.json

复制代码

文件
2.在文件中找到

1. "eslintConfig"

复制代码

进行配置参数
3.在

1. "eslintConfig"

复制代码

里面找到

1. "rules"

复制代码

,在

1. "rules"

复制代码

中 添加

1. "no-debugger": "off"

复制代码

,

1. "no-console": "off"

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322339iw3.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！