使用VSCode進行Web開發必備之-內嵌實時瀏覽器

最後更新於 2021 年 9 月 15 日

最近在學習React的過程中發現,一邊開著瀏覽器預覽效果一邊開著VSCode寫並不是很方便(因為個人一直都是在用 Live Server),於是開始找有沒有什麼辦法能讓瀏覽器直接內嵌在VSCode中,找到了許多類似的擴展,最後發現居然還有內建相關的命令。

使用命令

按 Ctrl+Shift+P 叫出命令選擇區,輸入「Simple Browser」

browser1 使用VSCode進行Web開發必備之-內嵌實時瀏覽器
browser2 使用VSCode進行Web開發必備之-內嵌實時瀏覽器

輸入要預覽的網址(可以是本機或其他)

browser3 1 使用VSCode進行Web開發必備之-內嵌實時瀏覽器

在右上角找到分屏圖示

browser4 1 使用VSCode進行Web開發必備之-內嵌實時瀏覽器

將 Simple Browser 頁籤往右邊拖移

browser5 1 使用VSCode進行Web開發必備之-內嵌實時瀏覽器

如此一來便能達到在 VSCode 中直接查看網頁實時變化:

browser6 1 使用VSCode進行Web開發必備之-內嵌實時瀏覽器

使用擴展

Live Preview

今年六月份時 Microsoft 自己開發了一個用於VSCode中實時瀏覽網頁的擴展,可以很清楚的看到上方寫了個紅底的「Preview」代表目前還在初始開發階段,並且在介紹中也用黃色警告提示使用者「⚠️警告:此擴展仍處於初始開發階段!使用風險自負。⚠️」

Snipaste 2021 07 10 12 09 19 使用VSCode進行Web開發必備之-內嵌實時瀏覽器

Github:https://github.com/microsoft/vscode-livepreview

VSCode Market:https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

要注意的是此擴展適用於尚未創建服務器的項目(例如,不適用於使用 React、Angular 等的應用程序)。要使用這些,請使用 Simple Browser: Show 命令。

通過單擊編輯器右上角的預覽按鈕或使用上下文菜單快速預覽 HTML 文件。

open preview btn 使用VSCode進行Web開發必備之-內嵌實時瀏覽器

注意:要使用這個擴展需要 Node.js v14+

其他

其實在VSCode market 搜索 Live 或者 Browser 的關鍵字就能查到一堆類似的擴展,比如:

  • VSCode Browser Sync
  • Five Server (Live Server)
  • Browse Lite
  • Lively Reload
  • view-in-browser
  • Live Server Preview
  • Live Frame

…. 等。

4e52d54f6bc42abb41d26eb5b0df6517?s=250&d=wavatar&r=g 使用VSCode進行Web開發必備之-內嵌實時瀏覽器
0 0 評分數
Article Rating
訂閱
通知
guest
0 Comments
在線反饋
查看所有評論