說在前頭
要看乾貨的，可跳過該“說在前頭”章節
該類文章，百度上“一挖一麻袋”，但說句不好聽的，“一個能打的都沒有”，總結如下：
- scoop：win7下，搞這個都煩的一批，到最後“scoop install ios-webkit-debug-proxy”，跟我說要翻牆？
- 下了一堆有的沒的npm外掛，最後還是沒法用。
- 到最後一步了，NMP跟我講“能看，但沒法debug除錯”，我砸鍵盤了好嗎？
- ......
嚇得我趕緊放了一張老婆鎮樓
既然寫了這篇文章，說明這類問題都已經解決了，那我們言歸正傳，講講我們要 實現什麼？
chrome-devtools對IOS移動端的H5頁面進行除錯
簡單來說，就是 ——
我對“提交”btn繫結了“console.log（1）”則，我點選移動端H5頁面的“提交”時，PC端的Chrome會輸出1
有人問了
Q：我移動端的H5頁面一樣可以放到PC端的chrome下進行除錯啊，為什麼要除錯真機呢？比如：
A：這個還是要看需求的，如果你的業務不需要，自然也就不需要了，舉個栗子：
- App嵌入H5時，你如何除錯一些原生互動，如何知道原生是否定義了方法？
- 對H5頁面進行多指觸控的時候，PC端如何模擬並響應除錯？
- 運用一些第三方外掛庫或API的時候，內含嚴苛的判斷，非真機不好除錯，咋弄？
- ......
接下來就是乾貨了，讓你任意除錯H5頁面，WebView頁面，檢視該APP是否存在WebView以及找到它的線上地址！
一、環境（測試成功的案例）
- PC chrome瀏覽器（版本45、46）
- IOS safari瀏覽器（11.2.6）
- win系統（win7、win10）
- 一根USB資料線
二、軟體工具準備
我全放在github整合了，開不開心，please star，fork
github：chrome_ios_safari_ios-webkit-debug-proxy
這裡最好“Download ZIP”，下拉不知道要拉幾年
當然為了防止“Download ZIP”也很慢，所以我把檔案的源地址在這兒逐一列出，可自行分別下載，都是必須的
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版本，那些無用的文章寫出來，加上一堆的分享黨佔屏百度首頁
也難怪說，谷歌是最好的搜尋引擎，心酸。