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"可以模拟移动端特有的触摸事件, 但是也不会妨碍鼠标事件的触发.

　　如果仅仅是测试页面布局和鼠标事件, 那用这个最为方便.