vs没有显示本机服务器,VScode怎么开启本地服务器及本地调试？

初入职场，接触不少新鲜的东西，从最初入门的工具是HBuilder，到现在逐渐熟悉的vscode，想记录下自己的成长，不想一边学着，一边忘着。想把自己接触到的东西都记录下来吧。有需要的小伙伴，也可以参考~

今天因为一些原因呢，要开启本地调试，以前用HBuilder打开本地的文件，你会发现文件的路径前面就会有localhost：端口号/路径名，HBuilder会自动开启本地服务，但是用vscode直接打开本地文件，你会发现它的路径是这个样子的：

然而，我又不想再重新装回HBuilder,于是我去百度自学了(百度是个好东西，哈哈，当然这只是在有些方面)

1、首先，如果我们想开启vscode的本地服务，首先在他的商店里找到Debugger for Chrome这个插件，点击安装，下图我已经安装好了，所以就没有安装俩字了。

2、接下来就是配置，图中我标了步骤,应该不难看懂吧，第三补是配置自己的文件路径，这个是要经常改动的，测试哪个文件就写上那个文件的名字就好，文件前面的${workspaceRoot}这个不需要变动，变动的是后面的，第四步下拉选择那个你需要开启本地服务的文件夹就好

3、接下来还要用npm安装一个包来开启本地服务器，使用ctrl+`快捷键打开终端，然后输入npm install -g live-server，出现红框标注的那个部分就说明安装成功了

4、然后在命令行里输入 live-server,浏览器就会自动打开你要调试的页面

然后想看哪个页面，自己点击那个就好了。