用VS code有一段時(shí)間了予颤,但有些功能依然沒(méi)有被開(kāi)發(fā)出來(lái)囤官,那天看到一個(gè)同行用VS code開(kāi)啟本地服務(wù),引起了我的好奇蛤虐,于是網(wǎng)上查了查党饮,找到正確開(kāi)啟它的方法,于是趕緊記錄下來(lái)驳庭,以后方便查閱刑顺,也分享給大家~
1.要想開(kāi)啟本地服務(wù),首先要在VS code視口中安裝插件“Debugger for Chrome”,如下面所示捏检,按步驟安裝插件:
安裝Debugger for Chrome插件.jpg
2.接著按下圖中的步驟調(diào)出配置文件launch.json
配置launch.json.png
3.然后再在打開(kāi)的aunch.json里進(jìn)行如下配置
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "使用本機(jī)chrom調(diào)試",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"file":"${workspaceRoot}/setWebGLContext.html", //${workspaceRoot}/這塊不用改荞驴,后面的名稱與路徑要隨需求修改
}
]
}
4.設(shè)置保存好之后,按F5鍵就可以能打開(kāi)一個(gè)瀏覽器的空白頁(yè)贯城,同時(shí)在編輯器的下面會(huì)彈出一個(gè)終端調(diào)試窗口,如下圖所示:
開(kāi)啟終端.jpg
當(dāng)然這個(gè)終端調(diào)試窗口也可以按菜單里的 View(查看) -> Terminal(終端)調(diào)出來(lái)霹娄。
5.在“Terminal(終端)”中輸入: npm install -g live-server
運(yùn)行完了之后能犯,在下面出現(xiàn)類似如下版本號(hào)信息,說(shuō)明live-server安裝成功了犬耻。
- live-server@1.2.1
updated 2 packages in 48.524s
6.下面就可以開(kāi)啟服務(wù)了踩晶,我的設(shè)置里不是自動(dòng)啟動(dòng)服務(wù),所以要運(yùn)行npm run dev手動(dòng)啟動(dòng)枕磁,ok渡蜻!就這樣輕松搞定!