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

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

Browser Preview介紹

Browser Preview可以讓用戶在VSCode中打開一個真實的瀏覽器預覽，它提供了一種在VSCode中呈現(xiàn)web內(nèi)容的安全方式，并啟用了一些有趣的功能，比如編輯器內(nèi)調(diào)試等。

該預覽由chromium提供支持，所以需要電腦有Chrome或者最新的Edge。

安裝

在插件市場搜索 Browser Preview，點擊安裝即可。

使用

如上圖所示，小編已經(jīng)安裝了Browser Preview，左側(cè)功能欄多出來一個按鈕，點擊這個按鈕即可打開一個新的瀏覽器實例。

也可以在需要打開的HTML文件上右擊，點擊 open in Browser Preview，就能打開一個新的實例。

效果

還記得Live Server嘛？啟動Live Server后會打開瀏覽器并跳轉(zhuǎn)到一個固定的URL去，在內(nèi)嵌的瀏覽器窗口中輸入這個固定的URL，你就能實現(xiàn)左邊進行代碼修改，右邊實時查看頁面變化了（需要結(jié)合自動保存使用）。

小結(jié)

使用Browser Preview可以實現(xiàn)頁面的實時預覽，但是實際上這個插件還不夠完美。比如右側(cè)窗口不能縮放，要想看到完整的頁面需要手動調(diào)整頁面大小。如果想要更好的前端開發(fā)體驗，最好還是選擇使用兩塊顯示屏。

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