iOS中web app調試(mac).md

標籤：auto   strong   源檔案   iphone   roi   inhouse   分享圖片   nts   har   

目錄

• 一、真機聯調配置
• 二、mac上Safari配置及真機聯調
• 三、iOS模擬器使用
• 四、在iOS模擬器中安裝app

近期公司vue項目開發，目的是一次開發，多平台發布，其中就包含了app，app採用離線web方案，將vue打包後的js bundle檔案、靜態資源檔案打包進app中，為提高效能、最佳化體驗，app也通過jsbridge，暴露原生介面給web調用。

為此，web app開發時可以使用chrome等pc模擬器進行調試，但是涉及app適配，特別是原生介面調試時，就比較麻煩，必須要依賴於真機，這樣那是不是有方法進行真機聯調呢？

iphone串連mac，通過mac下safari就可以很方便對真機safari、app中webview進行聯調。

一、真機聯調配置

iphone上設定：safari設定->進階（最下面）->如開啟Web檢查器和JavaScript。

通過資料線串連mac，或者也可以手機或mac間共用熱點（不需要資料線挺方便的）。

二、mac上Safari配置及真機聯調

mac上配置下safari，在功能表列顯示“開發”菜單，設定好這些，將游標移動到safari的“開發”功能表項目，此時就可以看到iphone上正開啟的web（app webview也一樣），如，點擊任一項即可進入調試，調試方式跟平台web調試無差。

三、iOS模擬器使用

以上方式不僅適用於真機，也可用於mac模擬器，為什麼有真機聯調，我還要用模擬器呢？

最近實驗性選用weex開發（weex是阿里推出的，基於vue的前端架構，目的是通過一次開發，同時構建web、android和ios應用，實現跨平台開發），確實有點大膽，直接用當前業務來試錯，將在、app、m網站上線。

weex的坑基本填完了，回到模擬器使用，weex不支援打包-webkit-的部分屬性，在ios8上發現了該問題。手裡沒有ios8的作業系統，這裡用模擬器就很方便。

預設mac已經安裝了xcode，通過Alfred輸入sim即可快速找到ios模擬器(Simulator.app)。

通過Hardware->Device即可管理使用對應的ios版本。接下來，回到第二步即可進行模擬器聯調。

四、在iOS模擬器中安裝app

除了通過模擬器調試web，我們也可以安裝app，進行app webview，調試，iOS模擬器安裝app與真機安裝不同，模擬器只能安裝基於原始碼打包出來的app bundle（找ios開發要）。

// 通過xcode提供的simctl命令進行安裝/Applications/Xcode.app/Contents/Developer/usr/bin/simctl install booted EgretFly_InHouse.app

iOS中web app調試(mac).md