前言
說起來慚愧镜豹，在ionic項目中開發(fā)調(diào)試頁面一直是我頭痛的問題傲须，非常羨慕Android開發(fā)能有Chrome的調(diào)試工具，到今天才發(fā)現(xiàn)Safari也可以更帥趟脂。
在web開發(fā)的過程中泰讽，抓包、調(diào)試頁面樣式昔期、查看請求頭是很常用的技巧已卸。為了方便開發(fā)者調(diào)試iOS設(shè)備上的WebApp，蘋果在iOS6系統(tǒng)中引入了Remote Web Inspector功能硼一。利用它累澡，開發(fā)者可以利用Mac上的Safari，類似于Chrome的開發(fā)者工具般贼，來調(diào)試WebApp愧哟。下面介紹下如何開啟使用此功能：
1. 打開模擬器（真機）的開發(fā)者模式
首先，需要在iOS設(shè)備或模擬器中打開Web檢查器(Web Inspector)哼蛆，具體路徑為：【設(shè)置】->【Safari】->【高級】->【W(wǎng)eb檢查器】打開
然后將設(shè)備連接至電腦蕊梧，運行將要調(diào)試的WebApp。
2. 打開Mac上Safari的開發(fā)者模式
【Safari】->【偏好設(shè)置】->【高級】->【在菜單欄中顯示“開發(fā)”菜單】勾選
打開Safari中的開發(fā)者模式
3. 寫一個webview并加載一個網(wǎng)頁（在此腮介，可以用iphone 啟動ionic APP）
4. 在模擬器（真機）中打開webview應(yīng)用肥矢，并打開Safari查看網(wǎng)絡(luò)信息
【開發(fā)】->【iOS Simulator】->【正在調(diào)試的網(wǎng)站】
注意：必須要webview在加載網(wǎng)頁時，打開Safari才可以看到調(diào)試模式叠洗。
在彈出的調(diào)試窗口中甘改，可以看到當(dāng)前正在加載網(wǎng)頁的各種信息，包括源碼灭抑、請求頭楼誓、圖片、加載的資源與腳本名挥、控制臺輸出等疟羹。并且它和web前端的調(diào)試方式相同，你可以直接修改網(wǎng)頁的CSS樣式禀倔，對網(wǎng)頁布局等進行修改榄融，而不用重新運行整個App。
5.修改web樣式和調(diào)試JS
將光標(biāo)選中到要修改的樣式救湖，進行修改后愧杯，可以直接在模擬器中看到修改后的效果。
