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"可以模擬移動端特有的觸摸事件, 但是也不會妨礙鼠標事件的觸發.

　　如果僅僅是測試頁面布局和鼠標事件, 那用這個最為方便.