相信很多前端在開發移動端網站時，目前只能在Chrome瀏覽器中模擬手機調試。但是在chrome中模擬手機瀏覽器畢竟和真實的效果有很多的差別，那么如何做到在繁瑣的發布到外網能訪問的服務器上之前，我們前端就可以自己先行在手機端預覽效果+調試css、js呢？

如果只是想預覽下效果，不需要手機端調試

• 查找到本機的ip地址

 mac上終端命令：ifconfig
 windows上終端命令：ipconfig

• 本地啟動你那個所在所在的服務

我本地有個項目（大家如果本地還沒有可以啟動服務的項目，你可以在git上clone我的一個項目來試驗，見文末鏈接）;
我本地通過再項目文件夾下執行npm start把我的這個項目跑起來了；

• 確保手機和PC連得是同一個wifi，然后設置手機的wifi

wifi列表 => 選擇你需要連接的wifi =>  代理 => 主機名+端口號設置
主機名設置為和您的PC的ip地址相同，端口號設置為8888

• 本地下載一個網絡封包截取工具，打開此軟件

我用的是Charles,Charles是在 Mac 下常用的網絡封包截取工具。
在做 移動開發時，我們為了調試與服務器端的網絡通訊協議，常常需要截取網絡封包來分析。

• 將PC端項目訪問的地址在手機瀏覽器中打開（記得不要在微信中訪問）

因為我本地啟動的項目，在瀏覽器中是http://localhost:3000/,所以只需要在手機端訪問同樣的地址即可。
記得在訪問時，網絡封包截取工具Charles會彈出一個框，問你是否允許訪問，你點擊allow即可。

手機上訪問效果.png

如果頁面出現數據或者邏輯問題，上面的這種你就無法找到原因了，這時候就需要下面的一個工具。

• 下載微信web開發者工具,官方鏈接

• 打開微信web開發者工具，選擇移動調試

微信開發者工具調試.png

• 記得調整手機上的wif代理模式，從手動改為關閉

• 按照打開軟件后移動調試上寫的步驟來配置即可（備注：只能在微信中打開需要訪問的鏈接）

• 點擊開始調試，就會出現和chrome瀏覽器調試狀態下的菜單欄了

此功能暫時沒有chrome中那么全，主要可以用到的是：
  1. 選擇查看element（after,before這些偽元素無法調試）；
  2. 看console.log()出來的內容；
  3. js中打斷點；

今天的安利就到這里，希望能幫助到各位。謝謝~

最后，附：項目鏈接