由于項(xiàng)目是Hybrid開發(fā)恕酸，作為前端一直需要和Native端的離場(chǎng)供應(yīng)商聯(lián)調(diào)。項(xiàng)目初期聯(lián)調(diào)繁瑣并且由于各種Pr審批以及devops流程等縱使調(diào)試?yán)щy末购。最后我把原生代碼都要來(lái)了漏设，進(jìn)行一下本地聯(lián)調(diào)渗稍，效率的確提升很多。 接下來(lái)就介紹一下H5如何本地和Native進(jìn)行聯(lián)調(diào)均驶。
一昏兆、H5準(zhǔn)備部分
普遍前端框架腳手架跑起來(lái)項(xiàng)目之后會(huì)有2個(gè)地址
這2個(gè)都是本機(jī)地址，External的地址是可以在同一個(gè)局域網(wǎng)環(huán)境下供其他設(shè)備訪問的（沒有網(wǎng)絡(luò)策略的前提下）妇穴。
比如自己的手機(jī)可以調(diào)試和另一臺(tái)電腦或者是電視及都是可以打開的爬虱。
Ps:如果有一些腳手架沒有2個(gè)都起的話可以使用命令
npm run dev -- host 192.168.x.x
或者Npm start & ng 等。
（如果開了梯子伟骨，動(dòng)態(tài)變化的話可以使用ifconfig 或者 ipconfig 進(jìn)行查看自己的本地External IP）
準(zhǔn)備好了這一步饮潦，就可以保證我們H5的改動(dòng)已經(jīng)是實(shí)時(shí)的是最新的代碼了。
二：AnDroid準(zhǔn)備部分
1）首先携狭，在安卓代碼里設(shè)置 WebView 調(diào)試模式继蜡。WebView 類包含一個(gè)公共靜態(tài)方法，作為 Debug 開關(guān)：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
2）然后Android Studio 模擬器起起著或者USB連接的前提下，打開 PC 中的 Chrome 瀏覽器稀并，輸入網(wǎng)址仅颇，打開頁(yè)面：（科學(xué)上網(wǎng)）
chrome://inspect/#devices
而后點(diǎn)擊對(duì)應(yīng)網(wǎng)頁(yè)下方的 inspect 選項(xiàng)便可以進(jìn)入開發(fā)者工具頁(yè)：
如果是真機(jī)，通過 USB 連接手機(jī)設(shè)備的話碘举，檢查開啟 Remote devices 頁(yè)面左側(cè) Settings 菜單中的 Discover USB devices 選項(xiàng)：
3）然后通過代碼里中加載H5的external Ip 就可以對(duì)原生和H5交互的各種回調(diào)進(jìn)行console和接口參數(shù)的聯(lián)調(diào)了忘瓦。
三：Ios準(zhǔn)備部分
1）首先，Xcode的蘋果開發(fā)者賬號(hào)申請(qǐng)完畢之后引颈，在有了代碼之后如果只是本機(jī)調(diào)試耕皮。 可以直接起模擬器或者是改動(dòng)一下Bundle Id 進(jìn)行真機(jī)模擬。
2）打開safari 如果是MacOS > 12.1 可以安裝紫色的Safari Technology preview版本 蝙场，據(jù)說(shuō)會(huì)減少閃退凌停。
然后選擇偏好設(shè)置（perferences）-> 高級(jí)（advanced）->勾選 在菜單欄中顯示“開發(fā)”菜單（Show develop menu in menu bar）
3)然后打開蘋果模擬器或者usb鏈接上手機(jī)信任設(shè)置統(tǒng)一一下之后用app打開需要聯(lián)調(diào)的webview，然后打開Safari選擇開發(fā)（develop）
然后dang dang ~~
4）最后通過代碼里中加載H5的external Ip 就可以對(duì)原生和H5交互的各種回調(diào)進(jìn)行console和接口參數(shù)的聯(lián)調(diào)了售滤。
這些調(diào)試方法可能只是適用于一個(gè)人需要和多個(gè)殼子對(duì)接的時(shí)候需要罚拟，如果你有清晰的對(duì)接文檔和牛逼的原生同事，那這些就都不是事了完箩，最后祝大家天天沒bug~~
