《开发技巧》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

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

图1

       6、成功连接的界面如图1

       7、点击 inspect 便可以调试,调试界面如图2所示

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

图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所示

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

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

结束总结

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

分享到此结束,有问题欢迎留言!!!

上一篇:Linux 安装python爬虫框架 scrapy


下一篇:最基本的Unix系统操作命令