前言

  随着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、在浏览器地址栏输入  

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

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

结束总结

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

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

《开发技巧》WEB APP开发调试技巧的更多相关文章

  1. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  2. Native App开发 与Web App开发(原生与web开发优缺点)

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

  3. 导航页的开发--手机web app开发笔记

    好了,的所有的基础知识已经准备完毕了,现在开始制作引导页.这个引导页需要一个HTML文件,JS文件,一个CSS文件.在HBuilderX中根目录下添加“Guid.html”,在JS文件夹添加“myth ...

  4. 前端读者 | Web App开发入门

    本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...

  5. 移动web app开发必备 - 异步队列 Deferred

    背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

  6. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

  7. 移动web开发和移动app开发的区分

    1.移动web开发 这部分跟web前端开发差别不大,使用的技术都是html+css+js.区别为手机浏览器是webkit的天下,pc端是IE的天 下.手机网页可以理解成pc网页的缩小版加一些触摸特性. ...

  8. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  9. web app 开发必不可少的滑动插件 Flipsnap

    flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android, ...

  10. 移动端web app开发学习笔记

    移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...

随机推荐

  1. jquery删除表格行

    $(".mingxirmspan").click(function(){ $(this).closest("tr").remove(); })

  2. Swift连接字符串和字符

    字符串和字符的值可以通过加法运算符 (+) 相加在一起并创建一个新的字符串值: let string1 = "hello" let string2 = " there&q ...

  3. 【Android Developers Training】 33. 接收来自其它应用的简单数据

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  4. 6.如何使用jedis的线程池

    Basic usage example using Jedis in a multithreaded environment You shouldn't use the same instance f ...

  5. WCF学习——构建第二个WCF应用程序(六)

    一.创建客户端应用程序 若要创建客户端应用程序,你将另外添加一个项目,添加对该项目的服务引用,配置数据源,并创建一个用户界面以显示服务中的数据.若要创建客户端应用程序,你将另外添加一个项目,添加对该项 ...

  6. Python开发简单爬虫(一)

    一 .简单爬虫架构: 爬虫调度端:启动爬虫,停止爬虫,监视爬虫运行情况 URL管理器:对将要爬取的和已经爬取过的URL进行管理:可取出带爬取的URL,将其传送给“网页下载器” 网页下载器:将URL指定 ...

  7. Shiro固定身份验证

    Shiro基础身份验证 如果要进行shiro的日志信息读取,那么需要使用一个org.apache.shiro.util.Factory接口,在这个接口里面定义有一 取得SecuruityManager ...

  8. Python执行系统命令:使用subprocess的Popen函数

    使用subprocess的Popen函数执行系统命令 参考: http://blog.sina.com.cn/s/blog_8f01450601017dlr.html http://blog.csdn ...

  9. jQuery选择器分类

    jQuery的基本选择器 选择器的分类 <!--1.基本选择器 2.层级选择器 3.过滤选择器 3.1 基本过滤选择器 3.2 内容过滤选择器 3.3 可见性过滤选择器 3.4 子元素过滤选择器 ...

  10. dfs.datanode.max.transfer.threads

    An HDFS DataNode has an upper bound on the number of files that it will serve at any one time: <p ...