說在前頭
要看乾貨的，可跳過該“說在前頭”章節
該類文章，百度上“一挖一麻袋”，但說句不好聽的，“一個能打的都沒有”，總結如下：
- 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/59fbe6...
lofter：http://zcxy-gs.lofter.com/
github：https://github.com/gs3170981?...
sf：https://segmentfault.com/u/my...
結束語
鬼知道我嘗試了多少個解決方案，下載了多少個chrome版本，那些無用的文章寫出來，加上一堆的分享黨佔屏百度首頁
也難怪說，谷歌是最好的搜索引擎，心酸。