挪动端调试难题
许多时刻，我们在举行挪动端开辟时，都是先在PC端运用手机模拟器举行调试，没有题目后，我们才会在手机端的浏览器举行测试，这个时刻，假如没有出现题目，大快人心。然则一旦出现题目，我们就很难处理，由于缺少可视化的界面。不似在PC端，我们能直观的去转变款式，或者是举行断点调试。偶然，在挪动端我们不能不借助于alert来调试，然则如许的调试要领效力极为低下，许多时刻，都是靠履历，或者是靠排除法。以至，我们不能不归结为是浏览器的完成题目。
那末，有什么什么要领，能够让我们调试挪动端的适配的时刻，像调试PC端一样直观呢？本文旨在为你供应挪动端的调试要领，希望能够为你翻开新的一扇门。
本文会给出三种真机调试要领，你能够挑选本身最喜欢的一款~
挪动端真机调试要领
- chrome真机调试
- weinre调试
- spy-debugger调试
简朴申明一下每一种体式格局的优缺点：
第一种: chrome真机调试，有一个很大的局限性就是，只能调试手机端的chrome浏览器，关于UC，QQ这些浏览器均不实用，因此在调试兼容题目时，协助不大，然则最大的长处是: 简朴快速。
第二种: weinre调试体式格局，装置和实用不庞杂，实用于全平台的调试，即任何手机的任何浏览器皆能够调试，不过须要手机和电脑在同一个网段下。
第三种:spy-debugger，装置轻微庞杂一点，spy-debugger集成了weinre，不过还增添了抓包东西，运用最为轻易。
下面我们最先详细引见怎样运用这三种调试要领：
1.chrome真机调试
手机端下载好chrome浏览器，运用USB衔接到PC，翻开手机的USB调试形式。
然后在PC端翻开chrome浏览器，在地点栏输入: chrome://inspect. 勾选”discovery usb device”。然后在手机端浏览网页，就能够看到以下的页面，点击inspect，举行调试。(鉴于我的事情电脑是加了域的，由于并不能运用这个体式格局，假如有和我一样状况的童鞋，能够斟酌运用别的两种调试体式格局)
2.weinre真机调试
Weinre(WebInspector Remote)是一款基于Web Inspector(Webkit)的长途调试东西，借助于收集，能够在PC上直接调试运行在挪动装备上的长途页面。
当地效劳器: 能够运用http-server、tomcat等,也能够运用编译器集成的效劳
weinre装置
全局装置: npm install –g weinre
部分装置: npm install weinre
启动: weinre –httpPort 8090 –boundHost -all-
假如是部分装置的话，须要在前面加上 node_modules/.bin/
置信前端的童鞋都会用npm包管理东西，关于这个东西，我就不展开了，假如没有装置npm的，自行装置。
weinre启动参数申明:
- httpPort: 设置Wninre运用的端口号，默许是8080
- boundHost: [hostname | Ip | -all-]: 默许是 ‘localhost’.
- debug [true | false] : 这个选项与–verbose相似， 会输出更多的信息。默许为false。
- readTimeout [seconds] : Server发送信息到Target/Client的超时时候， 默许为5s。
- deathTimeout [seconds] : 默许为3倍的readTimeout， 假如页面凌驾这个时候都没有任何响应， 那末就会断开衔接。
8080端口运用状况较多，所以我挑选了指定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举行调试。
修正款式时，会在手机端立即见效，而且也能够检察掌握台信息，唯一一点就是，不能举行断点调试。
末了，在调试完毕以后，别忘记删除嵌入的script。
除了这类要领以后，还引见了在手机端保留一段Js代码，在须要调试某个页面时，点击实行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装置与运用
- 装置: 全局装置 npm install –g spy-debugger
- 启动: spy-debugger
- 设置手机的HTTP代办
代办的地点为 PC的IP地点 ，代办的端口为spy-debugger的启动端口(默许端口为：9888)默许端口是 9888。
假如要指定端口: spy-debugger –p 8888
Android设置步骤:设置 – WLAN – 长按选中收集 – 修正收集 – 高等 – 代办设置 – 手动
iOS设置代办步骤：设置 – 无线局域网 – 选中收集 – HTTP代办手动
手机装置证书(node-mitmproxy CA根证书)
第一步：天生证书：
天生CA根证书，根证书天生在 /Users/XXX/node-mitmproxy/ 目录下(Mac)。
spy-debugger initCA第二步：装置证书：
把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上，点击装置即可。
Spy-debugger启动界面，一样，在手机端革新页面以后，targets中会有纪录
以我曾做的京豆游戏的页面展现一下结果，当我们在手机上选中一个元素时，能够在电脑上看到响应的信息，如许我们就能够看出有能够是什么款式不兼容致使了UI的异常了，一样，还能够在掌握台中看到JS的log信息，关于挪动端调试来讲异常有协助。
]
总结:
- chrome inspect运用场景有限
- weinre装置简朴，运用历程中须要增添和删除script，假如调试页面许多的状况下，不实用。
- spy-debugger装置略庞杂，然则运用历程异常兴奋。
谢谢您消费珍贵的时候浏览本文，假如本文给了您一点协助或者是启示，那末不要悭吝你的赞和Star哈，您的肯定是我行进的最大动力。https://github.com/YvetteLau/…
关注小姐姐的民众号，和小姐姐一同学前端。
