ipad/iphone中的前端調試

須要在ipad上調試代碼, 通過一番搜索(多在google搜到的), 稍微整理下 : ).

1. Settings -> Safari -> Advanced/Developer -> Debug Console

　　最容易搜到的就是這個, 在桌面選擇"設置", 找到"Safari", 點"高級/開發者", 聽說下面會有個"調試控制檯(debug console)"按鈕, 可是我死活沒能找到, 多是safari較舊引發的.

　　即便可使用, 功能也是頗有限的, 各類吐槽.

　　　　開啓按鈕的圖文解說

2 firebug lite

　　2.1

　　　　固然也能夠在頁面中嵌入firebug lite;

　　2.2

　　　　或者建個新書籤加載firebuglite; 

　　　　查看如何新建

　　2.3

　　也能夠利用後臺, 判斷參數, 修改傳回的內容;

　　<?php if(isset($_GET['debug'])): ?>
　　　　<script type="text/javascript" src="firebuglite.js"></script>
　　<?php endif; ?>

3 edge inspect

　　這是我以爲蠻好的, 可是後期可能要交$;

　　大體的步驟是:

　　　　PC上下載該軟件 -- PC中的Chrome瀏覽器安裝edge inspect 插件 -- ipad上安裝"行動客戶端"(你若是是ios, 點擊那個iOS按鈕就能夠了)

　　　　具體看這裏

　　目前用到兩個比較實用的特性:

　　鏈接設置完之後, PC和ipad 能夠同步刷新頁面;

　　另外, 在PC的開發者工具中, 修改頁面能夠實時顯示到ipad中, 就像PC調試同樣, 只不過顯示在ipad.

　　(遠程調試原理大體是新建個服務器, 讓移動設備訪問).

4 IOS設備上Safari瀏覽器的前端調試解決方案

　　3.1 IOS模擬器
　　　　http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/
　　　　https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
　　　　http://www.ychong.com/safari-ios-iphone-itouch-web-dev-inspector/

　　　　若是是iOS6以上的, 直接開啓遠程調試就能夠, 可是PC必須是Mac系統, 由於Mac才能夠裝safari 6.x; 

　　　　同理, 若是ipad是一代的, 那也不行哦;

　　　　固然願意在PC裝虛擬機也能夠.

　　3.2 xcode中的IOS模擬器.

5 Chrome user agent switcher

　　另外還有一個簡潔的模擬方式, PC上的Chrome的開發者工具中,

　　點擊右下角的"齒輪", 打開設置面板, 選中override一欄,

　　其中能夠修改 user agent, 同時選中"Emulate touch event"能夠模擬移動端特有的觸摸事件, 可是也不會妨礙鼠標事件的觸發.

　　若是僅僅是測試頁面佈局和鼠標事件, 那用這個最爲方便.