ios webapp調試神器MIHTool


android平台有直接用chrome beta就可以調試,具體操作辦法可以查看這篇教程《Android 設備 Chrome 遠程調試》
Mac的高富帥直接可以用safari提供“web檢查器”,具體可查看這篇文章《ios6下調試webapp》

那么用pc如何在ios上實時調試我們的移動版主題呢?weinre?麻煩了點兒,本文將為您着重介紹一款國產神器MIHTool,說它是神器,一點都不為過,嗯?為什么?用過就知道了!

本文綠色無公害,適合絕對菜鳥級的新手閱讀,高富帥X神請直接飄過……

下載MIHTool安裝,打開后會出現以下界面:

打開PC上的Chrome,在地址欄輸入以上紅框中圈出來的地址,如果出現以下界面就表示連接成功了:

PS.如果沒成功,請注意檢查pc和ios設備是否都開啟了wifi,是否處於同一網段等等。

接着看下一步點擊“Load www.google.com in MIHTool”下面的鏈接測試一下,這時手機上app界面會自動載入對應的網址,找到“Web Inspector”下的“Online Web Inspector”,打開下面的鏈接,我們就可以看到熟悉的開發人員工具了,別急,得等到Targets和Clients下的文字變成綠色后才能開始,如下圖:

接下來就知道該怎么做了吧?

折騰了一番,很帶勁,等等,怎么打開本地搭建的wordpress呢?不是說的是wordpress移動版主題開發調試嗎?很簡單,將chrome地址欄的目標網址替換為本機內網IP/wordpress目錄即可,如http://192.168.1.10:1234/loadurl/192.168.1.11/wp。

Oh, My God!!! 沒樣式,圖片不顯示,js也沒有加載,沒關系,路徑不對,當然不加載,接着往下看。進入wordpress后台“設置→常規”,將“WordPress地址”改為你的本機內網IP/wordpress目錄即可,如http://192.168.1.11/wp,保存再在瀏覽器地址欄刷新剛才的頁面,OK!搞掂,收兵。

方法2

weinre使用方法

安裝weinre:

  • Windows環境:
    npm install -g weinre 
    
  • Mac OS X:
    sudo npm install -g weinre 
    
  • 其他環境請自行查閱安裝方法

在項目中引入調試腳本:

  • 引入方式:
    <script src="http://10.13.124.199:8088/target/target-script-min.js#test"></script> 
    

    需注意,host與port要與啟動weinre時設置的一直。

啟動weinre:

  • 普通啟動方式:
    weinre --httpPort 8088 --boundHost 10.13.124.199 
    
  • 所有參數列表:
    --help (or -? or -h) 查看使用幫助 --httpPort [portNumber] 設置啟動端口,默認8080 --boundHost [hostname | ip address | -all-] 綁定主機地址,默認localhost --verbose [true | false] 是否允許詳細信息寫入stdout,默認false --debug [true | false] 是否允許調試信息寫入stdout,默認false --readTimeout [seconds] 設置服務器將消息發送到目標或客戶端的等待時間,默認5s --deathTimeout [seconds] 設置監聽到一個調試客戶端或目標終端連接到顯示終端信息的等待時間,默認3 * readTimeout 
    

開始調試:

  • 打開瀏覽器[推薦Chrome],輸入http://10.13.124.199:8088 注意:該處不是輸入項目地址,需與啟動weinre時設置的host和port一直。會得到類似以下界面:

    [原創]響應式設計之移動端調試工具

  • 使用瀏覽器新窗口或其他終端[例如:ipad]打開項目地址,注意:在項目首頁中加入腳本並指定目標,例:

    [原創]響應式設計之移動端調試工具

  • 再返回weinre調試界面,此時或片刻后會出現:

    [原創]響應式設計之移動端調試工具

  • 點選目標,此時被選中的目標變為【綠色】,切換至【Elements】選項卡,出現DOM結構:

    [原創]響應式設計之移動端調試工具

  •  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM