《开发技巧》WEB APP开发调试技巧
前言
随着html5和nodejs的兴起。web APP越来越火，一套代码可以多平台使用。减少了很大的开发成本。很多APP中也集成了很多的html5页面，增强很高的应用体验。所以移动端页面也事关重要！
正文
移动端开发中最大的难度就是调试页面...，不同的浏览器，不同的移动设备.....想想都酸爽！！！哈哈哈哈哈哈哈哈哈~~~~~~~~~
本文档介绍基于chrome浏览器的调试！！！
准备工作：一根数据线、一个调试设备（也可以是多个，看公司舍得买调试设备不），fanqiang软件、开发电脑（windows）
调试步骤：1、Android手机：安装手机chrome浏览器
2、打开手机“开发者模式”（一般都是在“关于手机”中连续多次点击“版本号”就能打开），并在开发者模式中打开“允许USB调试”
3、iphone手机：打开“web检查器”，有的可能会有“javaScript”都打开
4、fanqiang出去，能在浏览器访问www.google.com则是fanqiang成功，iphone手机需要进行附加步骤再回到第五步！！！
5、在浏览器地址栏输入
1 chrome://inspect/#devices
图1
6、成功连接的界面如图1
7、点击 inspect 便可以调试，调试界面如图2所示
图2
附加步骤：1、PC下载iTunes。并打开
2、下载 ios-webkit-debug-proxy-win32 （ios-webkit-debug-proxy 是一个 DevTools proxy ，项目托管在 Github 上。其使得开发者可以发送命令到真实（或虚拟）IOS设备中的 Safari 浏览器或 UIWebViews 。）（我会上传压缩包，可以再资源内查找）
github地址：https://github.com/artygus/ios-webkit-debug-proxy-win32
3、解压 ios-webkit-debug-proxy-win32 ，放到c盘根目录下面
4、配置环境变量 中 系统变量 中 path 加上 c:\ios-webkit-debug-proxy-win32
5、在DOS命令下 输入
1 c:\ios-webkit-debug-proxy-win32\ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html
结果如图3所示
图3（当前没有连接设备）
6、打开浏览器地址栏输入 http://localhost:9221/ 显示当前链接设备清单
7、选择要调试的设备的链接，右键选择“复制链接地址”并在新窗口打开 ，回到正常步骤第5步
异常情况：1、点击inspect 之后，一直转圈，不会出现页面。排查是否 fanqiang 成功
2、ios 提示
1 Note: Your browser may block1,2 the above links with JavaScript console error: 2 Not allowed to load local resource: chrome-devtools://... 3 To open a link: right-click on the link (control-click on Mac), 'Copy Link Address', and paste it into address bar.
在localhost:9221页面中链接一定得右键“复制链接地址”再新窗口打开
结束总结
本次分享也自己走了一遍流程，重温了一下，挺好的。。。。。
分享到此结束，有问题欢迎留言！！！
