vscode如何调试vue


当前第2页 返回上一页

注意:URL中的端口号要跟WEBPACK配置的启动端口号一致。

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}/*"

      }

    }

  ]

}

061c12b221eb962015234880f9ac240.png

4.修改 webpack 配置

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

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

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

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

6134ad8ef11d04fe0a43e026b4b6ca1.png

5.开启调试

上述配置完成之后:

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

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

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

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

以上就是vscode如何调试vue的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vsCode lua断点失败怎么办

mac怎么下载安装vsCode

vsCode是什么作用

vsCode终端命令行无法使用的解决方法

浅谈vsCode中配置并生成自定义模板的方法

vsCode关闭错误提示

vsCode如何打开命令行终端工具

怎么使用vsCode写lua脚本

如何查看vsCode已安装插件

浅谈vsCode中没有css智能提示的解决方法

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



打赏

取消

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

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

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

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

评论

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