[套件]讓瀏覽器執行在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
#