VSCode插件推薦-VSCode內(nèi)嵌瀏覽器插件-Browser Preview

很多小伙伴在開發(fā)html頁(yè)面的時(shí)候覺(jué)得很不方便。因?yàn)轱@示屏的大小是有限的，只能展示代碼或者瀏覽器窗口的其中一種，哪怕用上了LiveServer，也需要一直切換頁(yè)面，接下來(lái)小編帶來(lái)的這款插件，可以在VSCode內(nèi)打開一個(gè)瀏覽器窗口。接下來(lái)就讓小編來(lái)帶你了解一下VSCode內(nèi)嵌瀏覽器插件-Browser Preview吧！

Browser Preview介紹

Browser Preview可以讓用戶在VSCode中打開一個(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è)按鈕即可打開一個(gè)新的瀏覽器實(shí)例。

也可以在需要打開的HTML文件上右擊，點(diǎn)擊 open in Browser Preview，就能打開一個(gè)新的實(shí)例。

效果

還記得Live Server嘛？啟動(dòng)Live Server后會(huì)打開瀏覽器并跳轉(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è)面大小。如果想要更好的前端開發(fā)體驗(yàn)，最好還是選擇使用兩塊顯示屏。

更多優(yōu)秀前端開發(fā)課程，盡在W3Cschool前端微課。