关键词：
移动端调试困难
很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。有时，在移动端我们不得不借助于alert来调试，但是这样的调试方法效率极其低下，很多时候，都是靠经验，或者是靠排除法。甚至，我们不得不归结为是浏览器的实现问题。
解决策略
主要介绍三种调试方法，皆可行，至于选择哪一种方式，就看自己的喜欢了。
- chrome真机调试
- weinre调试
- spy-debugger调试
先说一下每一种方式的优缺点。
第一种，chrome真机调试，有一个很大的局限性就是，只能调试手机端的chrome浏览器，对于UC，QQ这些浏览器均不适用，因此在调试兼容问题时，帮助不大，但是最大的优点是: 简单快捷。
第二种，weinre调试方式，安装和适用不复杂，适用于全平台的调试，即任何手机的任何浏览器皆可以调试，不过需要手机和电脑在同一个网段下。
第三种，spy-debugger,安装时，稍微复杂一点，spy-debugger集成了weinre，不过还增加了抓包工具。使用最为方便。
下面逐一介绍这三种方法:
chrome真机调试
手机端下载好chrome浏览器，使用USB连接到PC，打开手机的USB调试模式。
然后在PC端打开chrome浏览器，在地址栏输入: chrome://inspect. 勾选”discovery usb device”。然后在手机端浏览网页，就可以看到如下的页面，点击inspect，进行调试。(鉴于我的工作电脑是加了域的，因为并不能使用这个方式，如果有和我一样情况得童鞋，可以考虑使用另外两种调试方式)
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的，自行安装。
weinew启动参数说明:
–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>- 1
- 1
记住将localhost换成你的IP地址.
然后，我们在本地启动一个服务器，可以是IDE继承了服务器，或者是http-server,我使用的是http-server.启动之后，我们在手机端访问要调试的网页。然后就会发现targets下面增加了记录。
这是，点击Elements进行调试。
修改样式时，会在手机端即时生效，并且也可以查看控制台信息，唯一一点就是，不能进行断点调试。
还有就是，在调试结束之后，别忘记删除嵌入的script。
除了这种方法之后，还介绍了在手机端保存一段js代码，在需要调试某个页面时，点击执行JS,但是现在浏览器为了安全起见，已经不再支持此方法。默认的方法是搜索，而非执行，所以不可取。
spy-debugger
最后，再介绍一下spy-debugger方法。用这个方法，我们不再需要自己增加和删除脚本。
Spy-debugger内部集成了weinre，通过代理的方式拦截所有html自动注入weinre所需的js代码。简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。
特性:
1、页面调试＋抓包
2、操作简单
3、支持HTTPS。
4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
6、可以配合其它代理工具一起使用(默认使用AnyProxy)
Spydebugger安装与使用
1.安装: 全局安装 npm install –g spy-debugger
局部安装 npm install spy-debugger
2.启动: spy-debugger,如果是局部安装，需要加 node_modules/.bin
3.设置手机的HTTP代理
代理的地址为 PC的IP地址 ，代理的端口为spy-debugger的启动端口(默认端口为：9888)
默认端口是 9888。
如果要指定端口: spy-debugger –p 8888
Android设置步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动
4.手机安装证书(node-mitmproxy CA根证书)
扫一扫安装:
Spy-debugger启动界面，同样，在手机端刷新页面之后，targets中会有记录
总结:
1.chrome inspect应用场景有限
2.weinre安装简单，使用过程中需要增加和删除script，如果调试页面很多的情况下，不适用。
3.spy-debugger安装略复杂，但是使用过程非常愉快。
移动端真机调试实战经验(代码片段)
...我的博客查看更多文章~前言在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差距还是蛮大的，所以在... 查看详情
移动端真机调试终极利器-browsersync（使用方法）
1.安装Node.jsBrowserSync是基于Node.js的,是一个Node模块，如果您想要快速使用它，也许您需要先安装一下Node.js 安装适用于MacOS，Windows和Linux。2.安装BrowserSync您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端... 查看详情
使用pc端浏览器开发者工具对移动端真机环境web页面进行远程调试
...面Mac/Windows浏览器开发者工具远程调试iPhone/Android页面在移动端Web开发中，有时候只通过模拟器进行调试是不够的，需要在真机环境下进行调试才能发现并解决一些问题。而移动端真机环境浏览器没有开发者工具，在这种情况下... 查看详情
移动端调试
xx</a使用spy-debugger调试微信或者移动端的网页移动端真机调试</a 查看详情
关于微信小程序云开发----手机端真机调试
最近我做了一个小程序软件，用到了小程序云开发。在开发者工具中调试，一切正常，需要上传云端的文件和数据都能正常上传，但换成了真机调试，console没有报错，也没有不正常的地方，就是无法将数据上传云端（或者说不... 查看详情
如何在移动设备上调试网页
这篇文章所讲到的方法已经过时，请移步《移动端真机调试终极利器-BrowserSync》，欢迎分享更多工具。手机端页面，大多运行在webkit内核的浏览器上，但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和And... 查看详情
whistle——真机移动端页面调试查看修改真机端的页面dom结构及样式
1、查看、修改真机端的页面DOM结构及样式【参考——https://imweb.io/topic/5981a34bf8b6c96352a59401】；1.0、需要配置的rule——域名weinre://随便某个分类命名【如：wq.jd.comweinre://test2——test2只是作为weinre的分类，防止一... 查看详情
试说移动端是如何调试的？
移动端调试;（1）模拟手机调试；（2）真机调试之android手机+Chrome；（3）真机调试之iphone+safai；（4）UC浏览器；（5）微信内置浏览器调试；（6）调试工具debuggap；（7）抓包;细节参考：https://segmentfault.com/a/1190000005964730 查看详情
调试移动端页面
调试移动端页面分为两种开发时，移动设备连接上PC起的服务调试移动设备上的页面手机连接PC的本地服务在开发移动设备页面时，常用CHROME自带的模拟移动设备外，还需要有真机去测试一下，而不是布到测试服务上去之后，再... 查看详情
vue_真机调试页面
...家的，还是太懒了。 我用的是vux起的一个项目（移动端，基于vue的），因为是移动端的，需要在手机上测试，发现用http://loc 查看详情
手机调试
...pectwebonrealdevice），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页当前：Oct27,2014“真机远程调试”的方法总是在发展，日新月异，有必要在每次更... 查看详情
xcode真机调试
ios无线真机调试
文章目录引言I无线真机调试的设置步骤1.2开启Connectvianetwork1.2注意事项II不升级Xcode进行高版本系统真机调试的方案seealso引言iOS无线真机调试的使用场景：忘记带数据如果有数据线，尽量使用数据线真机调试。使用数据线的传输... 查看详情
真机调试问题
1. 错误记录 真机调试错误信息：Nomatchingprovisioningprofilefound:YourbuildsettingsspecifyaprovisioningprofilewiththeUUID“dcfadaa2-37fd-4871-be69-ab6564245593”,however,nosuchprovisioning 查看详情
flutterios真机调试
...考技术A最近公司用flutter开发一款app，像我这种从web转做移动端的人一直遇到不少坑，接下来就是记录flutter运行在ios端的过程。我目前使用Xcode的版本是Version12.31.先运行flutterdoctor看有没有通过检查2.在Xcode>Preferences>Accounts账... 查看详情
xcode真机调试失败：theidentityusedtosigntheexecutableisnolongervalid
在Xcode中突然好久没有使用真机调试了，今天使用真机的时候，出现如下的警告，并真机运行失败：Theidentityusedtosigntheexecutableisnolongervalid.Pleaseverifythatyourdevice‘sclockisproprtlyset,andthatyoursigningcertificateisnotexpi 查看详情
真机调试
...rwiththespecifiedhostnamecouldnotbefound.xcode发出这个错误 一般是真机网络和pc端不在同一个网段 检测真机网络重新连接wifi不行safari激活 就可以进行测试在ios开发中经常出现“ unrecognizedselectorsenttoinstance ”这个错误。现在发现的原因... 查看详情
《移动项目实践》实验报告——android调试与上线(代码片段)
实验目的1、几种常见的App调试方法，包括使用外置模拟器调试，比如几种国产模拟器的用法；电脑连接真机调试，描述真机调试要具备的条件；2、分发APK安装包给他人调试，着重说明签名证书的创建方法&... 查看详情