在Windows筆記本上調試運行在iOS設備上的前端應用

我在天天工做中須要在不一樣的移動設備上測試咱們開發的前端應用是否正常工做，好比iOS設備和Android設備。我用的工做筆記本電腦又是Lenovo的，安裝的是Windows操做系統。

有的時候一個開發好的前端應用，在Android設備上正常工做，可是在iOS平板上測試卻發現問題（至關廣大前端開發者都曾經遇到過相似問題）。順手就想調試一下找到緣由。那麼一個前端應用運行在iOS設備上，程序員如何在安裝了Windows系統的筆記本上進行調試呢？

假設個人前端應用是這個url：https://jerrylist.cfapps.eu10.hana.ondemand.com/ui5/。

在IPAD上打開界面以下：

1. 在Windows筆記本電腦上安裝iTunes： https://www.apple.com/cn/itunes/download/

安裝後，您的Windows筆記本電腦才能成功和iOS設備鏈接併成功識別它。

2. 到iOS設備上，菜單iPad->Settings->Safari->Advanced，打開「Web Inspector」 選項。

3. 從github網站下載ios-webkit-debug-proxy-win32：

https://github.com/artygus/ios-webkit-debug-proxy-win32

將zip解壓到一個文件夾裏，而後把這個文件夾加到Path環境變量裏。

4. 在Windows系統的CMD裏，敲入下面的命令行：

ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html

收到Windows成功監聽iOS設備事件的消息：

Listing devices on: 9221

Connected: 9222 to Jerry's iPad

在瀏覽器裏訪問：http://localhost:9221

從結果列表裏就看到個人iOS設備了。

點localhost:9222的超連接，而後就能夠看到另外一個超連接，表明了個人IPad的Safari當前打開的網頁：

點這個超連接，Windows筆記本電腦上的Chrome開發者工具就自動打開了。在IPad上會彈出一個詢問您是否容許調試的對話框。點「Approve」按鈕，就能夠開始在Windows電腦上調試遠端鏈接的iOS設備上的前端應用啦！

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: