Web Server for Chrome - 搭建本地Web服務器, 實現局域網共享文件夾

Web Server for Chrome背景簡介

前端開發都知道，修改 css 和 js 代碼簡直比眨眼頻率還要更高。為了能保持節奏提高效率，一般都會把環境部署到本地。每當將頁面制作好后，大部分都會用拖拉視窗，來模擬在各裝置下的效果，雖然可大略看一下是否有狀況，但最終還是得到真的環境，才能確切的知道，當頁面行動裝置上時，文字大小是否洽當好閱讀，以及按鈕是否好按，和所寫的Javascript是否能正常的運作，而這時若要實現，將手機連進電腦，首先就是要先將電腦變成一臺WEB Server，這時不外乎就會使用USBWebserver、Xampp、MAMAP….等，但這些頁面只是單純的HTML ，也不會使用PHP與MYSQL資料庫，因此這時有個更快速且方便的作法，就是把Chrome瀏覽器，變成Web Server，如此一來就能將電腦中所編輯的網頁，讓手機連進來，并在實機上瀏覽結果，而這只外掛操控也相當的簡易與方便，身為網頁設計人員，也趕快來看一下啰!

Web Server for Chrome簡介

Chrome 因為安全的因素，限制直接運行本地網頁文件，因此再進行網頁相關項目調試時，就需要再本地模擬出一個網頁服務器，而 Web Server for Chrome 就是這樣的一款 chrome擴展程序。雖說其無論是功能上還比不上 Apache 或者 Nginx 這樣的專業的網頁服務器應用，但就從網頁前端開發而言已經夠用，只需要再 Choose Folder 上指定項目目錄，然后點擊下方生成的 Web Server URLs，你就可以在瀏覽器中預覽項目實現的效果了；當然 Web Server For Chrome 也提供了一些基礎設置功能，比如說開機啟動、阻止電腦進入睡眠模式，默認直接進入 Index.html 頁面等等。

Web Server for Chrome簡介

Web Server for Chrome安裝及使用方法

1.Web Server for Chrome插件離線安裝的方法參照一下方法：老版本chrome瀏覽器，首先在標簽頁輸入【chrome://extensions/】進入chrome擴展程序，解壓你在本站下載的插件，并拖入擴展程序頁即可。

Web Server for Chrome安裝使用

2.最新版本的chrome瀏覽器直接拖放安裝時會出現“程序包無效CRX-HEADER-INVALID”的報錯信息，參照：Chrome插件安裝時出現"CRX-HEADER-INVALID"解決方法。安裝好后即可使用。

3.比較特別的是，這款插件安裝完畢后，并不會出現在網址列后方，而是在應用程序。

Web Server for Chrome安裝使用

3.下圖教你怎么開啟一個http服務，選擇完畢后，再網址列上方輸入127.0.0.1與8887，就可看到剛所設定的專案目錄中的內容。

Web Server for Chrome安裝使用

4.按下方按鈕可開關http服務，由于127.0.0.1是本機的意思，因此手機是無法連進來的，這時將下方的 Accessible to other computers的選項勾起來。

Web Server for Chrome安裝使用

5、接著再把上方的開啟鈕，關閉再開啟一次，這時下方就會出現該電腦，由分享器中所配置的一組虛擬ip。

Web Server for Chrome使用方法
6、這時將手機與電腦連到同一個分享器上，再開啟瀏覽器，并輸入電腦的IP位置，這時就可瀏覽到電腦中的檔案啦!這樣就可即時的預覽啦!當電腦進行任何修改儲存時，手機重整瀏覽器，也會隨即顯示結果畫面，這對于在設計網頁人員來說，就相當的方便，因此身為網頁設計人員，也趕快來裝一下吧!