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中如何配置markdown代码片段

vsCode如何彻底删除?

vsCode中文切换失败

vsCode编译c控制台输出乱码

vsCode中如何设置中文语言环境?

vsCode编写react报错怎么办

vsCode终端中无法使用npm命令

vsCode中一些常用插件和快捷键,助你提高开发效率!!

vsCode中如何预览网页

如何关闭vsCode中pylint报错

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



打赏

取消

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

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

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

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

评论

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