《开发技巧》WEB APP开发调试技巧

前言

　　随着html5和nodejs的兴起。web APP越来越火，一套代码可以多平台使用。减少了很大的开发成本。很多APP中也集成了很多的html5页面，增强很高的应用体验。所以移动端页面也事关重要！

正文

　　移动端开发中最大的难度就是调试页面...，不同的浏览器，不同的移动设备.....想想都酸爽！！！哈哈哈哈哈哈哈哈哈~~~~~~~~~

　　本文档介绍基于chrome浏览器的调试！！！

　　准备工作：一根数据线、一个调试设备（也可以是多个，看公司舍得买调试设备不），*软件、开发电脑（windows）

　　调试步骤：1、Android手机：安装手机chrome浏览器

　　　　　　　2、打开手机“开发者模式”（一般都是在“关于手机”中连续多次点击“版本号”就能打开），并在开发者模式中打开“允许USB调试”

　　　　　　　3、iphone手机：打开“web检查器”，有的可能会有“javaScript”都打开

　　　　　　　4、*出去，能在浏览器访问www.google.com则是*成功，iphone手机需要进行附加步骤再回到第五步！！！

　　　　　　　5、在浏览器地址栏输入　　

　　　　　　　　  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命令下 输入

　　　　　　　 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 之后，一直转圈，不会出现页面。排查是否 * 成功

　　　　　　　2、ios 提示

 Note: Your browser may block1, the above links with JavaScript console error:
   Not allowed to load local resource: chrome-devtools://...
 To open a link: right-click on the link (control-click on Mac), 'Copy Link Address', and paste it into address bar.

　　　　　　　在localhost:9221页面中链接一定得右键“复制链接地址”再新窗口打开

结束总结

　　本次分享也自己走了一遍流程，重温了一下，挺好的。。。。。

分享到此结束，有问题欢迎留言！！！