手機訪問本地項目實現遠程調試的幾種辦法

一、在服務器環境下通過IP訪問

1. 首先搭建一個服務器環境或者下載現成的程序集成包（比如phpstudy、jspstudy等）。

2. 確保服務器和手機連接在同一網段。如果是筆記本的話，手機和筆記本直接連接在同一wifi下，如果是臺式機，則需要插入無線網卡或者其他的無線措施確保兩個在同一網段下。

3. 通過本機IP+端口訪問需要測試的項目。
   ###二、liveStyle

4. liveStyle是個提供“樣式實時預覽”插件，在編輯器和控制檯能夠單向/雙向實現樣式修改的同步，而且對移動頁面的遠程調試也是非常方便。

5. 在sublimeText通過package安裝liveStyle，在chrome安裝擴展liveStyle插件。

6. 點擊chrome瀏覽器右上角的liveStyle圖標選擇同步方式，添加需要修改的css,然後打開編輯器修改對應樣式或者在控制檯修改樣式即可實現雙向同步。

7. 移動設備的遠程調試
   在liveStyle（http://livestyle.io/）官網下載Emmet LiveStyle APP。安裝成功之後打開APP，執行上面的三步，然後完成下圖操作後在手機打開生成的網址即可訪問本地的項目。

###三、Browser-sync（https://www.browsersync.io/#install）

1. 安裝 Node.js （http://blog.csdn.net/frontender_way/article/details/51497343）
   Browsersync依賴node，所以需要先安裝node.js

2. 安裝 Browsersync
   在命令行裏通過npm安裝：npm install -g browser-sync

3. 啓動Browsersync

//靜態項目：
// 監聽css文件 
browser-sync start --server --files "css/*.css"
// 監聽css和html文件 files爲靜態文件地址
browser-sync start --server --files "css/*.css, *.html"

//動態項目
// myproject.dev可以是ip或域名
// 監聽css文件
browser-sync start --proxy "myproject.dev" --files "css/*.css"
// 監聽css和html文件
browser-sync start --proxy "myproject.dev" --files "css/*.css, *.html"

然後在移動設備上通過ip+端口訪問，這樣就搞定了手機訪問本地項目的問題。當然也可以和gulp等自動構建工具結合使用，https://www.browsersync.io/docs/gulp。

###四、使用charles代理（https://www.charlesproxy.com/latest-release/download.do）
具體可查看http://www.cnblogs.com/wonyun/p/charles_proxy.html?tdsourcetag=s_pctim_aiomsg 這篇文章的介紹