在 iOS 模擬器中調試 Web 頁面
雙十一大家“買買買”了嗎？我猜你們要么是躺在沙發上，要么是躲在被窩里用手機和 Pad 下的單，因為我就是這么干的。當然我也不是瞎猜，天貓官方微博公布的數據為證：無線端交易額占比一路保持在 70% 以上，最后定格在 68%（據說峰值數據更是喪心病狂，具體數據未公布，大家猜猜吧）。
“Mobile First” 真的已經不是喊喊口號而已！部分業務形態甚至直接 “Mobile Only” 了。當然所謂的 “Mobile” 絕不局限于 Native App，Web 頁面仍是不可替代存在，我始終堅信不管是手機端還是其他終端 Web 模式依然代表著未來。
不過開發手機上的 Web 頁面調試一直是一個老大難問題。 雖然 Chrome DevtTools 可以模擬手機的環境，但與真實環境差別還是比較大的，另外 Chrome 模擬的環境對 App 內 Webview 場景也無能為力（手機淘寶上的無線 Web 頁面有非常多的功能需要調用 Webview 提供的 JSBridge 接口實現）。所以真機調試和模擬器調試是無線 Web 開發必備技能。
真機相對復雜留到下次講，今天我們先看看怎么在 iOS 模擬器里調試 Web 頁面。
iOS 模擬器（iOS Simulator）是捆綁在 Xcode 里的，所以這篇文章的操作系統環境僅限 Mac OS，且已安裝 Xcode。強烈建議大家從 App Store 下載 Xcode，理由你們都懂。
啟動 iOS Simulator
常規的方式就是先啟動 Xcode，再從 Xcode 菜單中啟動模擬器。對于我們只是用模擬器來調試 Web 頁面而言，每次都啟動 Xcode 顯然效率太低，是否可以跳過 Xcode 直接啟動模擬器呢？
雖然模擬器捆綁在 Xcode 中，但是本身是一個單獨的應用程序，安裝路徑在：
/Applications/Xcode.app/Contents/Developer/Applications/iOS Simulator.app
Tips：上面是 Xcode 6 中的應用名，Xcode 7 已改名為：Simulator.app，路徑不變。
通過常規的方式啟動模擬器后，發現 Dock 菜單上多出了一個模擬器的圖標，這時即便退出 Xcode，模擬器任然能正常工作。為了方便下次開啟模擬器，可以在 Dock 模擬器圖標上右鍵選擇：“在 Dock 中保留”，這樣下次就可以通過直接點擊圖標啟動了：
模擬器默認加載的是上次退出時使用的設備，需要更換的話到 “Hardware > Device” 菜單下選擇即可。
接下來就簡單了，在模擬器中用 Safari 打開你要調試的頁面，再打開 Mac 上的 Safari，在“開發 > iOS Simulator”菜單下選中模擬器中打開的頁面就可以調試了。如果沒有“開發”菜單，請到“偏好設置 > 高級”中開啟。
在模擬器中安裝 App
如果只是在手機上的 Safari 中調試頁面，那么跟直接在 Mac 的 Safari 中并沒有太大區別，完全沒有必要花大力氣在模擬器中搞。我們的最終目標是要調試 App Webview 中的 Web 頁面，接下來我們看看怎么把 App 裝到模擬器里，這里我們以手機淘寶 App 為例。
模擬器上是沒有 App Store 的，也不能下載 ipa 文件安裝。只能安裝基于源代碼打包出來的 App Bundle，為了演示我已經預先從手機淘寶的 App 開發那里獲得了名為： taobao.app 的 App Bundle。
另外 Xcode 提供了一個 simctl 命令，可以對模擬器做各種操作。simctl 命令的路徑是：
/Applications/Xcode.app/Contents/Developer/usr/bin/simctl
在終端執行命令：
/Applications/Xcode.app/Contents/Developer/usr/bin/simctl install booted taobao.app
就可以把手機淘寶安裝在前面啟動的模擬器中了（參數 booted 指的是當前啟動的模擬器）。嫌每次執行 simctl 的路徑太長，可以使用 xcrun 命令，它會自動查找并啟動已注冊的 Xcode 命令行開發工具，比如：xcrun simctl xxx。
App 安裝好了，接下來我們讓 App 打開我們要調試的頁面，依舊還是使用 simctl 命令：
xcrun simctl openurl booted taobao://h5.m.taobao.com/guang/index.html
Tips：taobao:// 是模擬器在安裝 taobao.app 時注冊的協議（scheme），當出現次協議的 URL 請求時默認會使用手機淘寶打開。不同的 App 在系統注冊的協議各不相同，需要根據實際情況填寫。如果需要在 Safari 中打開直接用http://協議頭即可。
OK，成功在手機淘寶的 Webview 打開頁面。后面怎么做就不用教了吧！在 Mac 上打開 Safari， “開發 > iOS Simulator” 菜單下選中模擬器中打開的頁面，看圖：
Tips：simctl 更多功能可以執行xcrun simctl help命令查看。
還有么有優化空間
在模擬器中安裝 App，在 App 中打開 Web 頁面都是在終端完成的，啟動模擬器可不可以也在終端完成呢？答案是肯定的。
前面已經提到其實模擬器是一個獨立的應用程序，所以我們可以通過 Mac 自帶的 open 命令來運行，命令如下：open -a "iOS Simulator"。還可以在啟動的時候指定模擬哪個設備：open -a "iOS Simulator" --args -CurrentDeviceUDID <udid>。udid 可以通過命令：xcrun simctl list獲得，執行后會列出當前已下載的設備列表，如圖：
中間那串數字就是 udid，啟動設備為 “iPhone 4S” 的 iOS 模擬器，命令應該是這樣的：
open -a "iOS Simulator.app" --args -CurrentDeviceUDID "FCE2CFE8-64C3-4DBE-906B-B9BF4180DE49"
如果已升級到 Xcode 7 命令為：
open -a "Simulator.app" --args -CurrentDeviceUDID "FCE2CFE8-64C3-4DBE-906B-B9BF4180DE49"
至此，“啟動模擬器”、“安裝 App”、“打開 Web 頁面” 我們都可以通過終端命令執行了。不過每次調試都要執行一遍這一點都不符合前端愛裝 “X” 的個性。也許你想到了把這些命令封裝到一個 shell 腳本中，如果這是這樣的話也太小看我們裝 “X” 的功力了。
現在不是 “云”很火嗎！我們也上個“云”。試想一下：所有的前端只要打開一個固定的網站，網站就會顯示您當前系統支持啟動哪些設備的 iOS 模擬器，只要在網站上輕輕一點本地的模擬器就啟動起來了。不僅如此，網站還可以控制模擬器安裝指定的 App，用指定的 App 打開的網頁。像這樣：
這是淘寶前端團隊內部系統：MDS（Mobile pages Develop & Debug Solution）的一個局部界面（不知道大家有么有發現，文章寫到這里，我的 Xcode 版本已經從 6 升級到了 7 ^ ^！吐槽下 App Store，真的很慢~~~）。
光有個網站就能啟動本地的模擬器那是氣功大師才干的出來的事兒，配合網站還需要一個安裝在本地電腦的 SDK（npm）。為了啟動個模擬器搞個網站又搞個 SDK？如果你是這么認為的，那是真的認為我們只是在裝 “X” 了。MDS 要處理的事情遠遠比想象地要多，比如本地怎么才能獲取最新的手機淘寶 App Bundle。 另外，MDS 還集成了一個云端的 DevTools 工具，這塊內容下次有機會再細講。