相信很多前端在開發(fā)移動(dòng)端網(wǎng)站時(shí)，目前只能在Chrome瀏覽器中模擬手機(jī)調(diào)試序攘。但是在chrome中模擬手機(jī)瀏覽器畢竟和真實(shí)的效果有很多的差別茴她，那么如何做到在繁瑣的發(fā)布到外網(wǎng)能訪問的服務(wù)器上之前，我們前端就可以自己先行在手機(jī)端預(yù)覽效果+調(diào)試css程奠、js呢丈牢？
如果只是想預(yù)覽下效果，不需要手機(jī)端調(diào)試
- 查找到本機(jī)的ip地址
mac上終端命令：ifconfig
windows上終端命令：ipconfig
- 本地啟動(dòng)你那個(gè)所在所在的服務(wù)
我本地有個(gè)項(xiàng)目（大家如果本地還沒有可以啟動(dòng)服務(wù)的項(xiàng)目瞄沙，你可以在git上clone我的一個(gè)項(xiàng)目來試驗(yàn)己沛，見文末鏈接）;
我本地通過再項(xiàng)目文件夾下執(zhí)行npm start把我的這個(gè)項(xiàng)目跑起來了慌核；
- 確保手機(jī)和PC連得是同一個(gè)wifi，然后設(shè)置手機(jī)的wifi
wifi列表 => 選擇你需要連接的wifi => 代理 => 主機(jī)名+端口號(hào)設(shè)置
主機(jī)名設(shè)置為和您的PC的ip地址相同申尼，端口號(hào)設(shè)置為8888
- 本地下載一個(gè)網(wǎng)絡(luò)封包截取工具遂铡，打開此軟件
我用的是Charles,Charles是在 Mac 下常用的網(wǎng)絡(luò)封包截取工具。
在做 移動(dòng)開發(fā)時(shí)晶姊，我們?yōu)榱苏{(diào)試與服務(wù)器端的網(wǎng)絡(luò)通訊協(xié)議，常常需要截取網(wǎng)絡(luò)封包來分析伪货。
- 將PC端項(xiàng)目訪問的地址在手機(jī)瀏覽器中打開（記得不要在微信中訪問）
因?yàn)槲冶镜貑?dòng)的項(xiàng)目们衙，在瀏覽器中是http://localhost:3000/,所以只需要在手機(jī)端訪問同樣的地址即可。
記得在訪問時(shí)碱呼，網(wǎng)絡(luò)封包截取工具Charles會(huì)彈出一個(gè)框蒙挑，問你是否允許訪問，你點(diǎn)擊allow即可愚臀。
手機(jī)上訪問效果.png
如果頁面出現(xiàn)數(shù)據(jù)或者邏輯問題忆蚀，上面的這種你就無法找到原因了，這時(shí)候就需要下面的一個(gè)工具姑裂。
下載微信web開發(fā)者工具,官方鏈接
打開微信web開發(fā)者工具馋袜，選擇移動(dòng)調(diào)試
微信開發(fā)者工具調(diào)試.png
記得調(diào)整手機(jī)上的wif代理模式，從手動(dòng)改為關(guān)閉
按照打開軟件后移動(dòng)調(diào)試上寫的步驟來配置即可（備注：只能在微信中打開需要訪問的鏈接）
點(diǎn)擊開始調(diào)試舶斧，就會(huì)出現(xiàn)和chrome瀏覽器調(diào)試狀態(tài)下的菜單欄了
此功能暫時(shí)沒有chrome中那么全欣鳖，主要可以用到的是：
1. 選擇查看element（after,before這些偽元素?zé)o法調(diào)試）；
2. 看console.log()出來的內(nèi)容茴厉；
3. js中打斷點(diǎn)泽台；
今天的安利就到這里，希望能幫助到各位矾缓。謝謝~
最后怀酷，附：項(xiàng)目鏈接
