【Chrome】Chrome-devtools：對ios-safari移動端的H5頁面進行調試（ios-webkit-debug-proxy）

說在前頭

要看幹貨的，可跳過該“說在前頭”章節

該類文章，百度上“一挖一麻袋”，但說句不好聽的，“一個能打的都沒有”，總結如下：

1. scoop：win7下，搞這個都煩的一批，到最後“scoop install ios-webkit-debug-proxy”，跟我說要翻牆？
2. 下了一堆有的沒的npm插件，最後還是沒法用。
3. 到最後一步了，NMP跟我講“能看，但沒法debug調試”，我砸鍵盤了好嗎？
4. ......

吓得我趕緊放了一張老婆鎮樓

既然寫了這篇文章，說明這類問題都已經解決了，那我們言歸正傳，講講我們要 實作什麼？

chrome-devtools對IOS移動端的H5頁面進行調試

簡單來說，就是 ——

我對“送出”btn綁定了“console.log（1）”則，我點選移動端H5頁面的“送出”時，PC端的Chrome會輸出1

有人問了

Q：我移動端的H5頁面一樣可以放到PC端的chrome下進行調試啊，為什麼要調試真機呢？比如：

A：這個還是要看需求的，如果你的業務不需要，自然也就不需要了，舉個栗子：

1. App嵌入H5時，你如何調試一些原生互動，如何知道原生是否定義了方法？
2. 對H5頁面進行多指觸摸的時候，PC端如何模拟并響應調試？
3. 運用一些第三方插件庫或API的時候，内含嚴苛的判斷，非真機不好調試，咋弄？

接下來就是幹貨了，讓你任意調試H5頁面，WebView頁面，檢視該APP是否存在WebView以及找到它的線上位址！

一、環境（測試成功的案例）

1. PC chrome浏覽器（版本45、46）
2. IOS safari浏覽器（11.2.6）
3. win系統（win7、win10）
4. 一根USB資料線

二、軟體工具準備

我全放在github內建了，開不開心，please star，fork

github：chrome_ios_safari_ios-webkit-debug-proxy

這裡最好“Download ZIP”，下拉不知道要拉幾年

當然為了防止“Download ZIP”也很慢，是以我把檔案的源位址在這兒逐一列出，可自行分别下載下傳，都是必須的

1. iTunes
2. ios-webkit-debug-proxy-1.8-win64-bin.zip
3. Chrome45.0.2454.85_64_installer

TIPS：谷歌為45版本是有原因的，當然最新的也可以，後面會講，總歸會麻煩一點

當然如果失效的話，來我github裡慢慢down，(^▽ ^)

三、設定iphone Safart浏覽器

設定 > Safart浏覽器 > 進階 > 打開Web檢查器

如下圖：

四、打開iTunes，以及資料線連接配接

iphone連接配接上PC後，會有“是否信任該計算機”的提示，都按确認，iTunes也将會檢索到該iphone裝置。有以下圖，則說明連接配接成功。

五、打開ios-webkit-debug-proxy-1.8-win64-bin解壓的目錄

例如，我是解壓在F盤的，放個圖觀摩下

打開cmd，進入該盤下，執行以下指令

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

出現以下提示，則連接配接成功！

六、核心教程

上面說到端口監聽為9221，則打開chorme45輸入http://127.0.0.1:9221/

點選“逗逗”（也就是你的裝置），你會發現裡面是空白的，說明你還沒有打開H5頁面，用safari打開一個H5頁面，重新整理chrome，就會發現多了幾條資料

劃重點，你對你需要調試的頁面，進行審查元素，我這邊舉例調試“百度”

将該位址複制到位址欄，則進入調試界面！

甯哥！甯哥！哦，走錯片場了。

控制台輸入

alert('Hello World!')

移動端彈出，成功

控制台死活按不下去的，說的就是你，高版本chrome，等會聊

我們對“百度一下”這個btn進行一個DIY的綁定，試試控制台是否真的好用

點選ios上的“百度一下”，果然彈出了true，OK

接下來，我們試試斷點，點進我們剛才綁定的方法，進入chrome緩存中，進行斷點調試

點選“百度一下”，發現進不去！接下來就是黑科技 ——

輕按兩下右上角箭頭按鈕

再點選“百度一下”發現進來了！輸入this，傳回的就是目前btn dom元素

在此鼓掌(^▽ ^)

你說你怎麼知道這兒有效的？......一口老血，一把辛酸淚

七、無法調試的另類問題集合

1、Chrome高版本控制台無法輸入的問題

問題描述：chrome其他版本，也一樣隻需要輕按兩下右上角的斷點箭頭，就能debugger調試，不過控制台卻死活按不下去

解決方案：按F12，控制台有一堆抛錯，每次控制台回車，右邊會增加一條error提示

點選控制台抛錯提示，将該行判斷“if(error){console.error(error) ......”改成“if(!error){console.error(error)......”

也就是把它非掉，然後ctrl+s解決問題。

TIPS：如果被重新整理的話，又得重來，就這點來說，并不是很友善。

在這兒，請教一下大神，有沒有方式可讓inspector.js永久映射到workspace，解決重新整理重來的方式

2、Chrome斷開連接配接

問題描述：chrome下出現“Detached from the target”字樣，調試中止

解決方案：cmd開啟的服務“ios_webkit_debug_proxy”重開，清除chrome緩存，重新開機chrome解決，以及不要幹一些黑操作，該調試頁面極不穩定。

3、cmd打開debug_proxy服務時，連接配接不上手機，未有響應

問題描述：執行“ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html”該語句時，如下展示

沒有連接配接裝置的響應，或傳回error，warn等提示未有裝置連接配接

解決方案：檢視iTunes是否連接配接上你的裝置，重新插拔一下USB接口，重新開機服務乃至重新開機電腦進行嘗試，如仍不行，請下載下傳其他版本進行嘗試

github：google/ios-webkit-debug-proxy

TIPS：要注意的是，如果這步已經跪了，那打開chrome輸入9221的端口也一定是空白頁。

4、Chrome低版本無法調試的問題

問題描述：在30-版本的情況下，無法調出inspector.html調試頁面

解決方案：30+版本，已經廢棄devtools.html頁，30以下chrome應在url中輸入

chrome-devtools://devtools/devtools.html?ws=localhost:9222/devtools/page/1

則進入調試頁。

TIPS：page/1與9222是端口9221中審查dom元素内的傳值，應保持一緻。

關于

make：o︻そ╆OVE▅▅▅▆▇◤（清一色天空）

blog：http://blog.csdn.net/mcky_love

掘金：https://juejin.im/user/59fbe6c66fb9a045186a159a/posts

lofter：http://zcxy-gs.lofter.com/

github：https://github.com/gs3170981?tab=repositories

sf：https://segmentfault.com/u/mybestangel/articles

結束語

鬼知道我嘗試了多少個解決方案，下載下傳了多少個chrome版本，那些無用的文章寫出來，加上一堆的分享黨占屏百度首頁

也難怪說，谷歌是最好的搜尋引擎，心酸。

原文釋出時間：2018年06月29日

原文作者：清一色天空

本文來源

掘金

，如需轉載請緊急聯系作者