透過 Chrome Extension 將靜態網頁開啟成網站

這個好用的 Chrome 套件是在參加 Kuro 大的 Vue.js 課程時，由 Kuro 介紹的開發輔助工具，看到 demo 時驚為天人 也太好用了吧，所以特別筆記一下

以往收到網頁靜態檔，大多都是切版完成的成品，雖然不一定需要部署成網站，但以網站的型式開啟還是可以幫助了解整個畫面流程及有利組件拆分規劃，在這之前我一直都是使用 WebMatrix 的功能，它也可以將靜態網頁以網站方式開啟

WebMatrix 的用法

  1. 將靜態以網站方式開啟

    File –> Open –> Folder as Site

    1openassite

  2. 將網頁使用瀏覽器開啟

    在想要的網頁(index.html)上 按右鍵 –> Launch in browser

    2launch

  3. 在瀏覽器中使用網頁

    會自動指定 port

    3siteview

Web Server for Chrome 的用法

  1. 在 Chrome App Store 針對 應用程式 搜尋 web server，將 Web Server for Chrome 加到 Chrome

    4addtochrome

  2. 在 Chrome Apps 按下 Web Server

    5apps

  3. 選擇網頁資料夾

    6choosefolder

  4. 啟動 Web Server，啟動後會出現連線 url

    7url

  5. 選擇想要開啟的頁面

    8page

  6. 開啟網頁

    9page

心得

比起 WebMatrix 輕量許多，單純以開啟靜態頁面的需求而已，使用 Web Server for Chrome 就足夠了，設定很簡潔、操作上也很簡便，非常優優秀的小工具，可以列入開發必備工具清單之中了

參考資訊

  1. Chrome Web Server - an HTTP web server for Chrome (chrome.sockets)