將Chrome瀏覽器變成「Web Server」方便行動裝置實機測試

梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
  隨著裝置愈來愈多元,因此現在在設計網頁,已不像五、六年那麼的單純,每當將頁面製作好後,大部分都會用拖拉視窗,來模擬在各裝置下的效果,雖然可大略看一下是否有狀況,但最終還是得到真的環境,才能確切的知道,當頁面行動裝置上時,文字大小是否洽當好閱讀,以及按鈕是否好按,和所寫的Javascript是否能正常的運作,而這時若要實現,將手機連進電腦,首先就是要先將電腦變成一台WEB Server,這時不外乎就會使用USBWebserver、Xampp、MAMAP....等,但這些頁面只是單純的HTML,也不會使用PHP與MYSQL資料庫,因此這時有個更快速且方便的作法,就是把Chrome瀏覽器,變成Web Server,如此一來就能將電腦中所編輯的網頁,讓手機連進來,並在實機上瀏覽結果,而這隻外掛操控也相當的簡易與方便,身為網頁設計人員,也趕快來看一下囉!

Web Server for Chrome:
外掛名稱:Web Server for Chrome
支援平台:Google Chrome
下載網址:https://chrome.google.com/

Step1
進入外掛的安裝畫面後,點右上角的加到CHROME鈕,依序就可完成安裝。
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step2
比較特別的是,這隻外掛安裝完畢後,並不會出現在網址列後方,而是在應用程式時,這時點一下Web Server圖示。
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step3
開啟後,點下CHOOSE FOLDER鈕,選擇目錄。
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step4
接著選擇專案目錄。
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step5
選擇完畢後,再網址列上方輸入127.0.0.1與埠號8887,就可看到剛所設定的專案目錄中的內容。
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step6
由於127.0.0.1是本機的意思,因此手機是無法連進來的,這時將下方的Accessible to other computers的選項勾起來。
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step7
接著再把上方的開啟鈕,關閉再開啟一次,這時下方就會出現該電腦,由分享器中所配置的一組虛擬ip。
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試
Step8
這時將手機與電腦連到同一個分享器上,再開啟瀏覽器,並輸入電腦的IP位置,這時就可瀏覽到電腦中的檔案啦!這樣就可即時的預覽啦!當電腦進行任何修改儲存時,手機重整瀏覽器,也會隨即顯示結果畫面,這對於在設計網頁人員來說,就相當的方便,因此身為網頁設計人員,也趕快來裝一下吧!
梅問題-Chrome瀏覽器變成Web Server方便行動裝置實機測試

相關文章

沒網路也不無聊~Google Chrome離線版限定「小恐龍」遊戲

沒網路也不無聊~Google Chrome離線版限定「小恐龍」遊戲

Chrome外掛-「Print Friendly & PDF」一鍵快速將當前網頁轉換成PDF檔

Chrome外掛-「Print Friendly & PDF」一鍵快速將當前網頁轉換成PDF檔

Google Chrome瀏覽器的網址列暗藏計算機功能,不但可加、減、乘、除還可開根號

Google Chrome瀏覽器的網址列暗藏計算機功能,不但可加、減、乘、除還可開根號

免裝軟體!打開瀏覽器,從LINE STORE隔空下載完整貼圖

免裝軟體!打開瀏覽器,從LINE STORE隔空下載完整貼圖

Chrome外掛-FireShot一鍵擷取整頁的網頁內容畫面

Chrome外掛-FireShot一鍵擷取整頁的網頁內容畫面





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    李智睿 說道:

    支援php嗎?

    回應:
    沒有喔!!!純html
  • 第1梅
    李智睿 說道:

    請問支援php嗎?