<menuitem id="gc5xj"><track id="gc5xj"></track></menuitem>
  • <dl id="gc5xj"><ins id="gc5xj"></ins></dl>
              1. <dl id="gc5xj"></dl>

                <dl id="gc5xj"></dl>

                <li id="gc5xj"><ins id="gc5xj"></ins></li>

                1. <output id="gc5xj"></output><dl id="gc5xj"><ins id="gc5xj"></ins></dl>
                    <dl id="gc5xj"></dl>

                        <dl id="gc5xj"><ins id="gc5xj"></ins></dl>

                        <dl id="gc5xj"></dl>

                          2019了,你还不会移动端真机调试?

                          发表于:2019-3-25 10:24  作者:佚名   ?#19995;矗簊egmentfault

                          字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: 软件开发 java

                            移动端调试困难
                            很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面。不似在PC端,我们能直观的去改变样式,或者是进行断点调试。有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经验,或者是靠排除法。甚至,我们不得?#36824;?#32467;为是浏览器的实现问题。
                            那么,有什么什么方法,能够让我们调试移动端的适配的时候,像调试PC端一样直观呢?本文旨在为你提供移动端的调试方法,希望能够为你打开新的一扇门。
                            本文会给出三种真机调试方法,你可以选择自己最?#19981;?#30340;一款~
                            移动端真机调试方法
                            chrome真机调试
                            weinre调试
                            spy-debugger调试
                            简单?#24471;?#19968;下每一种方式的优缺点:
                            第一种: chrome真机调试,有一个很大的局限性就是,只能调试手机端的chrome浏览器,?#26434;赨C,QQ这些浏览器均不适用,因此在调试兼容问题时,帮助不大,但是最大的优点是: 简单快捷。
                            第二种: weinre调试方式,安装和适用不复杂,适用于全平台的调试,即任何手机的任何浏览器皆可以调试,?#36824;?#38656;要手机和电脑在同一个网段下。
                            第三种:spy-debugger,安装稍微复杂一点,spy-debugger集成了weinre,?#36824;?#36824;增加了抓包工具,使用最为方便。
                            下面我们开始具体介绍如何使用这三种调试方法:
                            1.chrome真机调试
                            手机端下载好chrome浏览器,使用USB连接到PC,打开手机的USB调试模式。
                            然后在PC端打开chrome浏览器,在地址栏输入: chrome://inspect. 勾选"discovery usb device"。然后在手机端浏览网页,就可以看到如下的页面,点击inspect,进行调试。(鉴于我的工作电脑是加了域?#27169;?#22240;为并不能使用这个方式,如果有和我一样情况的童鞋,可以考虑使用另外两种调试方式)
                            
                            2.weinre真机调试
                            Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC?#29616;?#25509;调试运行在移动设备上的远程页面。
                           
                            本地服务器: 可以使用http-server、tomcat等,?#37096;?#20197;使用编译器集成的服务
                            weinre安装
                            全局安装: npm install –g weinre
                            局部安装: npm install weinre
                            启动: weinre --httpPort 8090 --boundHost -all-
                            如果是局部安装的话,需要在前面加上 node_modules/.bin/
                            相信前端的童鞋都会用npm包管理工具,?#26434;?#36825;个工具,我就不展开了,如果没有安装npm?#27169;?#33258;行安装。
                            weinre启动?#38382;得?
                            httpPort: 设置Wninre使用的端口号,默认是8080
                            boundHost: [hostname | Ip | -all-]: 默认是 ‘localhost’.
                            debug [true | false] : 这个选项与–verbose类似, 会输出更多的信息。默认为false。
                            readTimeout [seconds] : Server发送信息到Target/Client的超时时间, 默认为5s。
                            deathTimeout [seconds] : 默认为3倍的readTimeout, 如果页面超过这个时间都没有任何响应, 那么就会断开连接。
                            8080端口使?#20204;?#20917;较多,所以我选择了指定8090端口。
                            启动了weinre之后,我们在浏览器中输入localhost:8090.显示如下界面,表示已经启动成功。
                           
                            点击debug client user interface,进入调试页面。
                           
                            当前的targets中内容为空。
                            现在,我们需要做另外一点操作,在我们要调试的页面中,增加一个脚本。
                           <script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>
                            记住将localhost换成你的IP地址.
                            然后,我们在本地启动一个服务器,可以是IDE集成的服务器,或者是http-server,我使用的是http-server.启动之后,我们在手机端访问要调试的网页。然后就会发现targets下面增加了记录
                            这时,我们就可以点击Elements进行调试。
                           
                            修?#38590;?#24335;时,会在手机端即时生效,并且?#37096;?#20197;查看控制台信息,唯一一点就是,不能进行断点调试。
                            最后,在调试结束之后,别忘记删除嵌入的script。
                            除了这种方法之后,还介绍了在手机端保存?#27426;蜫s代码,在需要调试某个页面时,点击执行JS,但是现在浏览器为了安全起见,已经不再支持此方法。默认的方法是搜索,而非执行,所以不可取。
                            3.spy-debugger真机调试
                            最后,再介绍一下spy-debugger方法。用这个方法,我们不再需要自己增加和删除脚本。
                            Spy-debugger内部集成了weinre,通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。
                            特性:
                            页面调试+抓包
                            操作简单
                            支持HTTPS。
                            spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
                            自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
                            可以配合其它代理工具一起使用(默认使用AnyProxy)
                            Spydebugger安装与使用
                            1.安装: 全局安装 npm install –g spy-debugger
                            2.启动: spy-debugger
                            3.设置手机的HTTP代理
                            代理的地址为 PC的IP地址 ,代理的端口为spy-debugger的启动端口(默认端口为:9888)默认端口是 9888。
                            如果要指定端口: spy-debugger –p 8888
                            Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
                            iOS设?#20040;?#29702;步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动
                            4.手机安装证书(node-mitmproxy CA根证书)
                            第一步:生成证书:
                            生成CA根证书,根证书生成在 /Users/XXX/node-mitmproxy/ 目录下(Mac)。
                          spy-debugger initCA
                            第二步:安装证书:
                            把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机?#24076;?#28857;击安装即可。
                            Spy-debugger启动界面,同样,在手机端刷新页面之后,targets中会有记录
                           
                            以我曾经做的京豆游戏的页面展示一下效果,当我们在手机上选中一个元素时,可以在电脑上看到相应的信息,这样我们就可以看出有可能是什么样式不兼容导致了UI的异常了,同样,还可以在控制台中看到JS的log信息,?#26434;?#31227;动端调试来说非常有帮助。
                            
                            总结:
                            chrome inspect应用场景有限
                            weinre安装简单,使用过程?#34892;?#35201;增加和删除script,如果调试页面很多的情况下,不适用。
                            spy-debugger安装略复杂,但是使用过程非常愉快。

                               上文内容不用于商?#30340;康模?#22914;涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。

                          ?#23601;?#33616;】JMeter接口自动化与性能测试案例实践

                          评 论

                          论坛新帖

                          顶部 底部


                          建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海瀛东律师事务所 张楠律师
                          版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2019, 沪ICP备05003035号
                          ?#31471;?#21450;意见反馈:[email protected]; 业务联系:[email protected] 021-64471599-8017

                          沪公网安备 31010102002173号

                          51Testing官方微信

                          51Testing官方微博

                          扫一扫 测试知识全知道

                          <menuitem id="gc5xj"><track id="gc5xj"></track></menuitem>
                        1. <dl id="gc5xj"><ins id="gc5xj"></ins></dl>
                                    1. <dl id="gc5xj"></dl>

                                      <dl id="gc5xj"></dl>

                                      <li id="gc5xj"><ins id="gc5xj"></ins></li>

                                      1. <output id="gc5xj"></output><dl id="gc5xj"><ins id="gc5xj"></ins></dl>
                                          <dl id="gc5xj"></dl>

                                              <dl id="gc5xj"><ins id="gc5xj"></ins></dl>

                                              <dl id="gc5xj"></dl>

                                                黑龙江快乐10分软件
                                                <menuitem id="gc5xj"><track id="gc5xj"></track></menuitem>
                                              1. <dl id="gc5xj"><ins id="gc5xj"></ins></dl>
                                                          1. <dl id="gc5xj"></dl>

                                                            <dl id="gc5xj"></dl>

                                                            <li id="gc5xj"><ins id="gc5xj"></ins></li>

                                                            1. <output id="gc5xj"></output><dl id="gc5xj"><ins id="gc5xj"></ins></dl>
                                                                <dl id="gc5xj"></dl>

                                                                    <dl id="gc5xj"><ins id="gc5xj"></ins></dl>

                                                                    <dl id="gc5xj"></dl>

                                                                      <menuitem id="gc5xj"><track id="gc5xj"></track></menuitem>
                                                                    1. <dl id="gc5xj"><ins id="gc5xj"></ins></dl>
                                                                                1. <dl id="gc5xj"></dl>

                                                                                  <dl id="gc5xj"></dl>

                                                                                  <li id="gc5xj"><ins id="gc5xj"></ins></li>

                                                                                  1. <output id="gc5xj"></output><dl id="gc5xj"><ins id="gc5xj"></ins></dl>
                                                                                      <dl id="gc5xj"></dl>

                                                                                          <dl id="gc5xj"><ins id="gc5xj"></ins></dl>

                                                                                          <dl id="gc5xj"></dl>

                                                                                            3d彩票投注技巧 期特码生肖 排列三四码组六最大遗漏 湖南彩票动物前三 吉林时时彩玩法规 湖南快乐十分官网 搜索香港六合彩141期 体彩61开奖历史 nba比分牌 2019足球 平码五中一中了两个 黑龙江p62综合走势图 阿飞六合图库彩 十一选五新疆十一选五 2019抓码王图片