chrome 不能断点调试的解决方法

在调试时出现一种情况,不能设置断点,也不能跟踪调试,。

JS也是非常简单的,也没有压缩。为什么就不能调试呢?

网上狂搜也没找到什么原因,经过自己一翻瞎折腾,终于解决问题


在调试<source>的左下方有一个{}图标,提示“pretty print”,点击,chrome就会另外打开一个:formatted的文件,在里面就可以调试了。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
您可以使用Vue官方提供的两种方式进行Vue断点调试: 方式一是使用Vue Dev***助您调试Vue应用。您可以在浏览器的开发者工具中找到Vue Devtools插件。安装后,您可以在开发者工具中查看Vue组件的状态和数据,并进行调试。 方式二是在VS Code中安装Debugger for Chrome插件进行调试。以下是Debugger for Chrome插件的安装和使用方式: 1. 打开VS Code,并点击左侧的扩展插件按钮,搜索并安装Debugger for Chrome插件。 2. 按住键盘上的Ctrl+Shift+D快捷键,选择创建一个Chrome类型的launch.json文件。 3. 打开launch.json文件,并输入以下代码: ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] } ``` 解释一下其中的字段: - type:调试类型,这里我们使用Chrome浏览器调试。 - name:调试名称,您可以随意起名。 - url:调试的地址,一般是http://localhost:8080。 - webRoot:项目的根目录,一般是src文件夹。 - breakOnLoad:是否在加载时打断点。 - sourceMapPathOverrides:用于解决源映射路径的问题。 4. 使用npm run dev命令来运行Vue项目。 5. 运行好项目后回到VS Code页面,按下F5键,这时浏览器将自动打开一个新的网页,地址就是刚刚输入的url地址。 6. 在需要设置断点的位置,点击一下鼠标左键,即可看到一个小圆圈,表示断点设置成功。 7. 在页面上进行相应的操作,即可看到页面已经进入断点状态。 通过以上步骤,您可以使用Vue Devtools插件或Debugger for Chrome插件进行Vue断点调试。希望对您有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值