[套件]讓瀏覽器執行在VScode內 — Browse Lite

平常在做網頁開發相關工作的大家有沒有想過一個問題 —

如何在VScode嵌入瀏覽器呢?

每次調整CSS後視窗都要在Browser和VScode切來切去的(如果是單螢幕),切一次1秒那一年會花掉多少時間呢?

今天我想分享一個套件解決這個問題,提升DX(Developer Experience)!

Browse Lite — Visual Studio Marketplace

Browse Lite 由Vue團隊核心成員Anthony Fu等開發者製作的套件,以下Demo執行畫面:

注意 瀏覽器是以分頁呈現(可以拖曳)

要達到上面Demo的步驟:

  1. VScode先安裝 Live Server
  2. VScode安裝 Browse Lite
  3. 開啟網頁伺服器 ex: http://127.0.0.1:5501/demo.html 將網址複製
    (編輯html檔案時,右鍵Open with Live Server)
  4. 在VScode 按下F1呼叫指令面板 輸入Browse Lite: Open 並執行,這樣就開啟內建瀏覽器了!
  5. 貼上複製的網址! 右上角蟲子icon可以呼叫檢查(如上面demo)
注意前面要有 符號">"

6. 最後調整完頁面可以用Lock固定住分頁,之後就是愉快地開發~

目前用起來缺點就是解析度比較低,不過這是小問題,當功能完成後再到真正的瀏覽器測試就好了。

以上分享,希望對大家有幫助~

#瀏覽器嵌入VScode
#

--

--

--

這邊主要分享自己查資料找不到的資訊,若之後有人遇到相同的問題便可省去不少時間。

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
亂叫阿醇

亂叫阿醇

這邊主要分享自己查資料找不到的資訊,若之後有人遇到相同的問題便可省去不少時間。

More from Medium

A simple step by step guide for installing and using the Epic Cash Server and CLI wallet.

Bloch Sphere

Excerpt from “Only One Life” by Vera Kuschnir

CS373 Spring 2022 Week 7: Nathaniel Nemenzo