很多小伙伴在開(kāi)發(fā)html頁(yè)面的時(shí)候覺(jué)得很不方便。因?yàn)轱@示屏的大小是有限的，只能展示代碼或者瀏覽器窗口的其中一種，哪怕用上了LiveServer，也需要一直切換頁(yè)面，接下來(lái)小編帶來(lái)的這款插件，可以在VSCode內(nèi)打開(kāi)一個(gè)瀏覽器窗口。接下來(lái)就讓小編來(lái)帶你了解一下VSCode內(nèi)嵌瀏覽器插件-Browser Preview吧！
Browser Preview介紹
Browser Preview可以讓用戶在VSCode中打開(kāi)一個(gè)真實(shí)的瀏覽器預(yù)覽，它提供了一種在VSCode中呈現(xiàn)web內(nèi)容的安全方式，并啟用了一些有趣的功能，比如編輯器內(nèi)調(diào)試等。
該預(yù)覽由chromium提供支持，所以需要電腦有Chrome或者最新的Edge。
安裝
在插件市場(chǎng)搜索 Browser Preview，點(diǎn)擊安裝即可。
使用
如上圖所示，小編已經(jīng)安裝了Browser Preview，左側(cè)功能欄多出來(lái)一個(gè)按鈕，點(diǎn)擊這個(gè)按鈕即可打開(kāi)一個(gè)新的瀏覽器實(shí)例。
也可以在需要打開(kāi)的HTML文件上右擊，點(diǎn)擊 open in Browser Preview，就能打開(kāi)一個(gè)新的實(shí)例。
效果
還記得Live Server嘛？啟動(dòng)Live Server后會(huì)打開(kāi)瀏覽器并跳轉(zhuǎn)到一個(gè)固定的URL去，在內(nèi)嵌的瀏覽器窗口中輸入這個(gè)固定的URL，你就能實(shí)現(xiàn)左邊進(jìn)行代碼修改，右邊實(shí)時(shí)查看頁(yè)面變化了（需要結(jié)合自動(dòng)保存使用）。
小結(jié)
使用Browser Preview可以實(shí)現(xiàn)頁(yè)面的實(shí)時(shí)預(yù)覽，但是實(shí)際上這個(gè)插件還不夠完美。比如右側(cè)窗口不能縮放，要想看到完整的頁(yè)面需要手動(dòng)調(diào)整頁(yè)面大小。如果想要更好的前端開(kāi)發(fā)體驗(yàn)，最好還是選擇使用兩塊顯示屏。
更多優(yōu)秀前端開(kāi)發(fā)課程，盡在W3Cschool前端微課。
