前端調(diào)試環(huán)境搭建
前言
日常前端開發(fā)調(diào)試過程中炒俱，經(jīng)常會遇到真機(jī)調(diào)試巷燥。真機(jī)調(diào)試環(huán)境搭建主要從如下幾點(diǎn)進(jìn)行講解：
- 啟動(dòng)本地服務(wù)
- 創(chuàng)建熱點(diǎn)
- 設(shè)置服務(wù)器代理
- 調(diào)試技巧
技術(shù)清單：
a charles
- https 轉(zhuǎn)http
- 轉(zhuǎn)發(fā)配置
- mock 數(shù)據(jù)
b 360熱點(diǎn)
啟動(dòng)本地服務(wù)
前端開發(fā)過程中，啟動(dòng)本地服務(wù)很簡單号枕。目前主流的前端構(gòu)建工具有g(shù)runt缰揪、webpack、glup葱淳，以上前端構(gòu)建工具均可快速搭建前端開發(fā)框架钝腺。執(zhí)行對應(yīng)的命令即可啟動(dòng)服務(wù)。
注意：由于mac 80端口被占用赞厕。啟動(dòng)服務(wù)的時(shí)候艳狐，需要root 啟動(dòng)即：sudo+你的命令
如果不想使用80端口，需要在本地搭建nginx服務(wù)器或使用charles做代理(將請求分發(fā)到本地服務(wù)器皿桑。相當(dāng)于一個(gè)nginx服務(wù)器)
創(chuàng)建熱點(diǎn)
- 使用360創(chuàng)建wifi毫目，設(shè)置用戶名稱和密碼
- 使用各類終端，連接熱點(diǎn)
- 代理服務(wù)器設(shè)置诲侮，常規(guī)代理服務(wù)器端口一般是8888
原則：
a 創(chuàng)建同一個(gè)局域網(wǎng)镀虐，讓自己搭建的服務(wù)器和手機(jī)各類終端同處一個(gè)局域網(wǎng)絡(luò)
b 在局域網(wǎng)內(nèi)，搭建一個(gè)代理服務(wù)器沟绪。在代理服務(wù)器上做些有利于調(diào)試的處理刮便。
調(diào)試技巧
修改服務(wù)器返回內(nèi)容
- Map 功能適合長期地將某一些請求重定向到另一個(gè)網(wǎng)絡(luò)地址或本地文件。
- Rewrite 功能適合對網(wǎng)絡(luò)請求進(jìn)行一些正則替換绽慈。
- Breakpoints 功能適合做一些臨時(shí)性的修改恨旱。(AJAX c’est 有網(wǎng)絡(luò)超時(shí)設(shè)置，使用該功能時(shí)坝疼，需要調(diào)整超時(shí)時(shí)間)
Q&A
- mac 電腦無法抓取到本地瀏覽器的https網(wǎng)絡(luò)請求包搜贤？
解答：產(chǎn)生該問題的原因通常是mac電腦沒有安裝ca正式或者沒有正確的安裝證書。
mac 安裝證書
- IOS 環(huán)境下裙士，使用map功能入客，無法將https 轉(zhuǎn)成http功能
解答：產(chǎn)生該問題的原因通常是ios手機(jī)終端沒有安裝charle證書或者證書沒有添加信任。
手機(jī)安裝證書步驟如下： -
查看手機(jī)終端瀏覽器需要設(shè)置的鏈接地址
ios 手機(jī)設(shè)置終端 - IOS 終端配置
安裝證書
注意：無法連接時(shí)，請重新檢查是否正確配置代理到自己的代理服務(wù)器
添加信任
