初入职场,接触不少新鲜的东西,从最初入门的工具是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,浏览器就会自动打开你要调试的页面
然后想看哪个页面,自己点击那个就好了。
网友评论