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,浏览器就会自动打开你要调试的页面

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容