vscode怎么断点调试


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

{

  // Use IntelliSense to learn about possible attributes.

  // Hover to view descriptions of existing attributes.

  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

  "version": "0.2.0",

  "configurations": [

    {

      "type": "chrome",

      "request": "attach",

      "name": "Attach to Chrome",

      "port": 9222,

      "webRoot": "${workspaceRoot}/src",

      "url": "http://localhost:8080/#/", 

      "sourceMaps": true,

      "sourceMapPathOverrides": {

        "webpack:///src/*": "${webRoot}/*"

      }

    }

  ]

}

336b6ca8e341ab34f4c442f1e3f809e.png

4、修改 webpack 配置

如果是基于 webpack 打包的 vue 项目, 可能会存在断点不匹配的问题, 还需要做些修改:

(1)打开根目录下的 config 目录下的 index.js 文件

(2)将dev 节点下的 devtool 值改为 'eval-source-map'

(3)将dev节点下的 cacheBusting 值改为 false

398963e87c724960daa79d6eb69e1dd.png

5、开启调试

上述配置完成之后:

(1)通过第一步的方式以远程调试打开的方式打开 Chrome

(2)在 vue 项目中执行 npm run dev 以调试方式启动项目

(3)点击 VS Code 左侧边栏的调试按钮,选择 Attach to Chrome 并点击绿色开始按钮,正常情况下就会出现调试控制条。

现在就可以在 vue 文件的 js 代码中打断点进行调试了。

相关文章教程推荐:vscode教程

以上就是vscode怎么断点调试的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vsCode中如何检查代码的对错

vsCode怎么还原默认设置

vsCode中eslint插件不起作用

vsCode如何更换代码编辑框背景

vsCode如何打开md文件

如何删除一键安装的vsCode

vsCode怎么将本地项目上传到github

如何用vsCode写python程序

ubuntu如何使用vsCode

vsCode如何安装插件?常用插件介绍

更多相关阅读请进入《vsCode》频道 >>



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...