Freigeben über

Vorlon.js: 同時測試多瀏覽器網頁呈現的好工具

  • Artikel

VorlonJS 是由微軟的開發體驗推廣部門所開發的一個測試及偵錯網頁在不同瀏覽器狀況的工具，網頁開發人員可以使用這個工具在同一處同時測試及除錯網頁（過去您可以需要每個瀏覽器各自開啟開發工具，甚至平板或行動裝置的除錯工具不方便操作等），這套工具全以 JavaScript 寫成，除了具有跨平台（Ｗindows, Linux 及 Mac OSX）執行的能力之外，可透過 npm 來安裝，而這套工具也完全開源在 GitHub 上。

如何使用

首先是安裝 VorlonJS，只要直接使用 npm 來安裝即可。（系統裡必須先安裝 Python 2.7）

 npm i -g vorlon

安裝完成後，直接執行 vorlon 指令就可以讓它執行起一個小的網頁伺服器跑 VorlonJS 的相關工具，而它預設會跑在 port 1337，如果要更換就設定 PORT 這個環境變數即可，像 Windows 下要使用 port 3000 的話就這樣執行：

 C:\> set PORT=3000 & vorlon

若順利執行起來，開啟瀏覽器到 https://localhost:1337/  （如果沒有更改 port 值的話）就可以開始使用 VorlonJS 的工具，會看到這樣的畫面：

同時，還要在你要除錯的網頁中加入一行 <script src="https://localhost:1337/vorlon.js"></script> 讓 VorlonJS 的工具可以與這網頁溝通，所以你可以把 VorlonJS 工具縮小，然後把網頁以不同的瀏覽器開啟，應該就會看到 VorlonJS 工具偵測到多個 clients 的情況。

這樣一來，你不必每個瀏覽器都開啟一個開發工具來除錯，可以都到 VorlonJS 上面來操作，許多網頁開發人員需要的工具都可以在上面使用到。

甚至是針對網頁語法的最佳化建議也會提出適當的說明：

相信有這樣的工具，對於前端開發人員的生產力應該有非常大的幫助。如果是團隊要共同使用，也可以將 VorlonJS 佈署到伺服器或雲端上，只要用 node.js 將它跑起來就可以了。

擴充性

除了 VorlonJS 本身就是開放源碼之外，它本身也做了一套外掛（plugin）的機制，目前已經有一些 plugins 可以安裝，而若您覺得預設的 VorlonJS 還有不足的地方，也非常歡迎您擴充它，或是分享 plugin 給其它的 VorlonJS 使用者。

如果您經常在開發網頁前端，那就不妨試試這套 VorlonJS 工具（Ｗindows, Linux 及 Mac OSX 都可以使用），相信會對您的除錯體驗有大幅的提升！

原始文章發佈於「開發者之魂」部落格

Comments

  • Anonymous
    November 06, 2015
    問題是他實跑出來的效果如何

  • Anonymous
    November 07, 2015
    安裝完跑起localhost:1337 CSS全部跑版，請問該如何解決！

  • Anonymous
    November 08, 2015
    可能是 css 沒載入 看一下路徑有沒有確實取得 css

  • Anonymous
    June 04, 2016
    如果放在 webview 的 Hybrid App，是不是就可以直接用 Device 來做偵錯了？感覺可以來試試看～