在vs code中进行本地调试和开启本地服务器

我就是我 2022-05-21 10:35 363阅读 0赞

在vs code中进行本地调试

**1、首先在****VSCode 上装一个插件**：Debugger for Chrome ，如下图所示：在搜索框中输入Debugger for Chrome 然后点击安装

![70][]

**2、配置文件**，从左到右依次点击红圈中的按钮，然后出现launch.json文件，在里面添加配置信息

![70 1][]

配置信息如下：

{
        // 使用 IntelliSense 了解相关属性。 
        // 悬停以查看现有属性的描述。
        // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "使用本机chrom调试",
                "url": "http://localhost:8080",
                "webRoot": "${workspaceFolder}",
                "file":"${workspaceRoot}/setWebGLContext/setWebGLContext.html", //这个是在浏览器中要运行的文件的路径，每次运行不同项目的时候需要修改里面的运行路径
            }
        ]
    }

3、配置好之后，选择调试方式，如图所示，点击下拉箭头会有之前配置好的名称，这里是“使用本机chrom调试”

![70 2][]

4、选择好名称之后，直接按F5，就会弹出浏览器界面，就可以进行调试了

![70 3][]

以上配置还没有开启服务器，上面的操作相当于直接在浏览器中打开界面

开启本地服务器

1、打开VS Code，然后点击“查看”  =》“调试控制台”或者直接按快捷键 ctrl+shift+y调出控制面板

![70 4][]

2、点击“终端”，在里面直接输入

npm install -g live-server

![70 5][]

3、安装完成后会出现live-server的版本信息，表示安装成功

4、在终端输入：live-server会出现下面的信息

![70 6][]

然后直接在浏览器弹出的界面

![70 7][]

ok，按照上面的操作就可以在本地开启服务器进行调试了

[70]: /images/20220521/510fba8dc2ff4d7b86009d7e41f22160.png
[70 1]: /images/20220521/6f8b4a21240d495b96cb5970a9c7df22.png
[70 2]: /images/20220521/3e8de2f95fcd46f7a5a62756c47db65f.png
[70 3]: /images/20220521/4d51cc7a49bd46dcad9090c4485869a7.png
[70 4]: /images/20220521/99661a411f924483a1d9d8958b1d0e88.png
[70 5]: /images/20220521/9e53e717d6c844eeb48be83f85c8b56c.png
[70 6]: /images/20220521/467ece11eda548e3be5cf1449aec0cd5.png
[70 7]: /images/20220521/31e47ee61dec49549c5102cd6e5b4cbd.png