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

前言

　　随着html5和nodejs的兴起。web APP愈来愈火，一套代码能够多平台使用。减小了很大的开发成本。不少APP中也集成了不少的html5页面，加强很高的应用体验。因此移动端页面也事关重要！

正文

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

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

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

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

　　　　　　　二、打开手机“开发者模式”（通常都是在“关于手机”中连续屡次点击“版本号”就能打开），并在开发者模式中打开“容许USB调试”

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

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

　　　　　　　五、在浏览器地址栏输入　　

　　　　　　　　 1 chrome://inspect/#devices 

　　　　　　　　　　 

图1

　　　　　　　六、成功链接的界面如图1

　　　　　　　七、点击 inspect 即可以调试，调试界面如图2所示

　

图2

　　附加步骤：一、PC下载iTunes。并打开

　　　　　　　二、下载   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

　　　　　　　三、解压 ios-webkit-debug-proxy-win32 ，放到c盘根目录下面

　　　　　　　四、配置环境变量 中 系统变量 中 path 加上 c:\ios-webkit-debug-proxy-win32

　　　　　　　五、在DOS命令下 输入

　　　　　　　1 c:\ios-webkit-debug-proxy-win32\ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html 

　　　　　　　 结果如图3所示

图3（当前没有链接设备）

　　　　　　　六、打开浏览器地址栏输入 http://localhost:9221/ 显示当前连接设备清单

　　　　　　　七、选择要调试的设备的连接，右键选择“复制连接地址”并在新窗口打开 ，回到正常步骤第5步

 

　　异常状况：一、点击inspect 以后，一直转圈，不会出现页面。排查是否 fanqiang 成功

　　　　　　　二、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页面中连接必定得右键“复制连接地址”再新窗口打开

结束总结

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

 

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