怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

本篇文章為大家展示了怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司從2013年開始,先為奉化等服務建站,奉化等地企業(yè),進行企業(yè)商務咨詢服務。為奉化企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

我在每天工作中需要在不同的移動設備上測試我們開發(fā)的前端應用是否正常工作,比如iOS設備和Android設備。我用的工作筆記本電腦又是Lenovo的,安裝的是Windows操作系統(tǒng)。

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

有的時候一個開發(fā)好的前端應用,在Android設備上正常工作,但是在iOS平板上測試卻發(fā)現(xiàn)問題(相當廣大前端開發(fā)者都曾經(jīng)遇到過類似問題)。順手就想調(diào)試一下找到原因。那么一個前端應用運行在iOS設備上,程序員如何在安裝了Windows系統(tǒng)的筆記本上進行調(diào)試呢?

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

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

在IPAD上打開界面如下:

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

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

安裝后,您的Windows筆記本電腦才能成功和iOS設備連接并成功識別它。

2. 到iOS設備上,菜單iPad->Settings->Safari->Advanced,打開“Web Inspector” 選項。

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

3. 從github網(wǎng)站下載ios-webkit-debug-proxy-win32:

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

將zip解壓到一個文件夾里,然后把這個文件夾加到Path環(huán)境變量里。

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

4. 在Windows系統(tǒng)的CMD里,敲入下面的命令行:

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

收到Windows成功監(jiān)聽iOS設備事件的消息:

Listing devices on: 9221

Connected: 9222 to Jerry's iPad

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

在瀏覽器里訪問: http://localhost:9221

從結果列表里就看到我的iOS設備了。

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

點localhost:9222的超鏈接,然后就可以看到另一個超鏈接,代表了我的IPad的Safari當前打開的網(wǎng)頁:

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

點這個超鏈接,Windows筆記本電腦上的Chrome開發(fā)者工具就自動打開了。在IPad上會彈出一個詢問您是否允許調(diào)試的對話框。點“Approve”按鈕,就可以開始在Windows電腦上調(diào)試遠端連接的iOS設備上的前端應用啦!

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用

上述內(nèi)容就是怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱:怎么在Windows筆記本上調(diào)試運行在iOS設備上的前端應用
文章來源:http://bm7419.com/article40/pcgoeo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、網(wǎng)站制作、企業(yè)建站、關鍵詞優(yōu)化、移動網(wǎng)站建設

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作