VS Code 编译器的调试工具整理

工程师玉琅技术 2022年11月15日

0 收藏 891 点赞 3,525 浏览 753 个字

1 debbugeer for chrome的使用

下载安装，然后配置launch.json

{
                "name": "Chrome",//名称
                "type": "chrome",
                "request": "launch",
                "sourceMaps": false,//不用配置服务器，使用file协议
                "file": "${file}" //启动本页面的环境变量
            }

　　然后就就可以设置断点啦（ps：貌似只能在外引的js里面设置）

2 配置node服务

            {
                "type": "node",
                "request": "launch",
                "name": "node Program",
                "program": "${file}"
            }

　　有其他好实用的插件欢迎推荐～

3、在vs code中如何调试vue项目

　　首先按下F5，弹出launch.json文件，配置如下

{
    // 使用 IntelliSense 了解相关属性。
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动 Chrome 并打开 localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
           // "file": "${file}"
        }
    ]
}

　　然后在终端启动项目启动你的vue项目，注意launch.json下的url要跟你的vue启动的的devserver的host+port一致

　　启动好后你就可以开心的在你的编译器里面调试你的vue项目了