前後端聯調實踐總結

聯調的認知和感觸

認知（討論）

• 為什麼要聯調？
• 聯調都幹些什麼？

聯調的問題

聯調就是後端不好好寫單元測試與整合測試，讓前端發請求呼叫以達到測試的目的；前端不好好寫Mock和測試，讓後端輸出資料以達到測試的目的。

更正確地認識

• 聯調是前後端一起見證靠譜的測試結果
• 給需求方提供一個正確的需求驗證環境
• 儘早暴露前後端實現的問題

聯調必備技能

DNS與HOSTS

• DNS（Domain Name System）的認識
• DNS提供將域名解析為IP
• 域名只是便於記憶，真正起作用的還是IP
• GFW作用，HOST翻牆
• 域名解析順序
• 瀏覽器快取>瀏覽器代理>HOST檔案>系統DNS快取
• 本地DNS伺服器>上級DNS>…>頂級DNS

HOST配置的姿勢

• 直接修改HOSTS檔案
• 使用Chrome應用 ，也有Firefox外掛
• 使用HOST管理工具
• 使用Charles/Fiddler HOST配置
• 使用FEKit/YKit 代理配置

更改HOST不即時生效問題

原因

• 瀏覽器有HOST快取
• 瀏覽器複用了原有HOST的Socket連線

解決辦法

• 重啟瀏覽器或者開啟新的瀏覽器
• 使用Charles/Fiddler等代理，避免此問題
• 使用Chrome工具，強行重置Socket連線

代理服務配置

• Chrome瀏覽器代理 或者
• 系統代理使用Charles/Fiddler 抓取請求包

代理服務HTTPS抓包問題

• 打不開頁面？ 需要根據Charles Help選單中規則新增Charles根證書
• 某些包解不開？需要在Charles代理設定裡面配置具體的解包域名
• 線上證書不安全？解包後再封的包跟原來的有些區別，需要單獨開啟對應頁面進行信任

特定場景的除錯姿勢

PC/Touch頁面

• 配置前後端環境
• 配置HOST
• 直接使用瀏覽器及瀏覽器模擬器除錯
• 如果只是前端更改，在不影響資料的情況下，可以使用線上頁面除錯

App頁面

真機除錯

• 手機上安裝Beta包，使用資料線連上電腦
• 允許除錯或者開啟Inspect
• 透過chrome://inspect 或者Safari的開發者工具進行除錯

模擬器除錯

• Xcode模擬器
• 搞一個可以在模擬器裡面跑的App
• 將App拖入模擬器，然後開啟，用Safari開發者工具除錯

微信除錯

• TBS Studio Android系統下基於Webview的應用除錯（騰訊家的）
• 微信開發者工具 微信jsAPI相關除錯
• 通用的除錯工具

如何更有效地聯調

明確前後端的約定

• 根據需求一起約定互動的內容
• 包括但不限於如下內容
• 介面名稱、請求路徑、請求方式
  • 返回欄位結構、對應欄位名和欄位型別以及欄位邊界值
  • 異常情況資料約定
• 一份逼真的樣例資料
• 前端可以根據這個資料造出各種資料

後端對約定的履行

• 根據約定實現相應的需求
• 使用 進行介面測試
• 使用瀏覽器進行介面jsonp功能測試

前端對約定的履行

• 根據約定實現相應的需求
• Mock資料
  • 使用FEKit Mock資料
  • 使用YKit Mock資料
  • 使用Charles/Fiddler 代理介面響應
  • 任意其他Mock，代理，轉發工具獲取Mock資料
• 透過變換Mock資料，進行功能測試

真正的聯調

• 前端完成自測
• 後端完成自測
• 一起驗證需求的實現

友情建議

• 遠離關鍵路徑，合理調配時間——別拖後腿
• 把握全域性進度，提高整體效率——別浪費時間
• 積極溝通交流，主動推進聯調——別甩鍋