PC远程调试设备(转)
我们在移动端进行前端开发时,会遇到一个让人头痛但不得不面对的问题——调试。
在 PC 机器上,我们有功能强大的 Chrome DevTools、Firebug,即便是老版本的 IE ,我们也可以安装微软提供的插件,对网页样式和请求信息轻松进行调试。但在手机、平板上,很多人就无招可施了,一个劲的 alert 查看调试信息。如果你已经厌倦了可爱又可恨的 alert 弹窗,请继续往下阅读。
一、先说说调试的原理
设备浏览器中输入一个 URL,它会向 URL 所在的 server 请求资源:
+-------------+ +---------------+ | client |--------→| Internet | +-------------+ +---------------+
此时,数据是从 client 和 目标 server 之间的隐秘交互,除非 server 端的代码是由我们自己控制,否则很难了解他们之间都做了什么信息传递。如果 server 传过来的代码存在 bug,此时我们就相当纠结了。比较常见的情景是,该 server 就是我们的测试机器,我们在测试机器上开发,通过一个移动设备 client 来实施调试代码,常用的调试方式就是修改 server 代码,再实时查看 client 的响应。
但是,问题来了。某天,Barret 发现 client 端页面显示有 bug,由于 client 请求的目标 server 是线上,不像平时的测试机器,我们可以随意修改代码然后查看效果,并且线上的代码都是经过压缩和打包了的,很难阅读,怎么办?
于是,我想到了使用代理:
+-------------+ \ / +---------------+ | client |-----×---→| Internet | +-------------+ / \ +---------------+| ↑| || +-------------+ |+----→| proxy |-----++-------------+
我们在 client 端做相应配置,让他的请求强制指向 proxy,然后 proxy 转发请求到目标 server,proxy 上的请求和响应都是透明的,通过篡改 client 到 proxy 的请求,或者篡改 server 到 proxy 的响应,就可以实时查看这些人为修改在 client 端的效果了。本文目的就是说明 proxy 是如何操作的。
二、通过 Fiddler 代理
windows 下著名的 http(s) 代理软件 fiddler 使用比较广泛,mac 下可以使用 charles 代理,由于使用人群相对偏少,本文就不细说,感兴趣的可以 PM 我。charles 是一个跨平台的软件,windows 下也可以使用,不过个人偏好 fiddler。OK,我们来看看 fiddler 是如何一步一步完成网络代理的。
1. 配置客户端
这里说的客户端包括手机、平板甚至电脑。一般的 android / IOS 设备都可以设置代理:
step 1. 当连接好网络之后(相信你在一个 wifi 环境下进行开发),点击右侧的箭头按钮,我使用的是 android 手机,IOS 也比较好找,在 设置>Wi-Fi 中找到对应的网络,右侧有个圆圈包着的 i 图标,点击进入:
step 2. 一般代理方式有两种,手动和自动,将其设置为手动,然后填写,你电脑的 IP(为啥呢?因为 proxy 是你的电脑,client 的请求要全部转发到你的电脑上,然后使用 fiddler 软件去分析/替换请求),windows 下使用 ipconfig 可以看到本机 IP,linux/unix 下使用 ifconfig 查看:
step 3. 设置端口,端口可以随意设置,但最好大于 3000,数值比较小的端口可能被系统占用了。
这里需要注意一点,由于 client 相对我们电脑的 fiddler 来说是一个远程设备,所以要在 Allow Remote Computers to Connert 选项上打上勾勾。
step 4. 进入手机浏览器,输入网址:
step 5. 然后把你的眼睛挪到电脑屏幕上看看 fiddler:
到这里,我相信你已经看明白了整个 proxy 的原理。至于 fiddler 如何替换包,如何修改包,如果调试,不是本文叙述的重点,下面演示一个简单的替换。
2. 调试
请求百度的页面,我们把百度的 logo 换成博客园的:
step 1. 在 AutoResponder 中添加一项:
step 2. 进入你的浏览器(UC下清空缓存,如果缓存中有百度图片,他会使用缓存,并不发出这个请求),打开百度页面:
然后你就发现,貌似哪里有点不对~ 除此之外,你还可以将线上文件替换到本地,比如线上的 xyz-min.js 替换成本地的 xyz.js 然后修改 xyz.js 的内容,直接调试线上 bug,异常方便!
三、其他工具
有人会说,我没有实体机,那我建议你在电脑上安装虚拟机,android 和 IOS 的虚拟机都比较好安装。
有人会说,我电脑太卡,跑不动虚拟机,那我建议你就是用上述方式。
有人会说,.....,(如果没实体机也没虚拟机,那你开发个毛线呀)。
Fiddler 和 Charles 都是 HTTP(s) 层的抓包软件,如果你是 websocket 开发调试,建议使用 wireshark,网络七层协议,这个软件能抓除数据链路层之外的所有层信息,出于安全考虑,它抓到的包是不能篡改的。
还有一些比较好用的工具,如利用 pac 文件配置系统代理,weinre 调试等,这里简单介绍下 weinre:
1. 安装
npm install –g weinre
2. 打开
weinre -httpPort 7999 -boundHost -all-
- httpPort 监听端口
- boundHost –all- 绑定主机
3. 说明都写在图片里头,相信聪明的你可以悟到
四、小结
移动端开发不比 PC 轻松,调试只是需要注意的一个小点,还有很多很多未知的东西等着我们去探索,本文也算是抛砖引玉,如果您有更好的移动端调试方案,希望可以分享出来,一起交流。
http://www.cnblogs.com/hustskyking/p/remote-debug-in-mobile-development.html
转载于:https://www.cnblogs.com/softidea/p/4738001.html
PC远程调试设备(转)相关推荐
- 通过QEMU 和 IDA Pro远程调试设备固件
0x00 背景与简介 这篇文章主要讲了如何在模拟环境下调试设备固件. 作者:Zach Cutlip 原文链接:http://shadow-file.blogspot.gr/2015/01/dynami ...
- PC远程调试移动设备
我们在移动端进行前端开发时,会遇到一个让人头痛但不得不面对的问题--调试. 在 PC 机器上,我们有功能强大的 Chrome DevTools.Firebug,即便是老版本的 IE ,我们也可以安装微 ...
- Chrome/edge inspect远程调试移动设备
在谷歌浏览器输入chrome://inspect远程调试设备时,需要可以访问外网,因此选择在edge浏览器输入chrome://inspect后打开如下页面: 移动设备adb连接pc后,在浏览器页面点 ...
- 安卓手机浏览器:远程调试
简介:有时我们需要调试手机浏览器网页信息,这时除了使用fiddler抓包拦截篡改,还可以通过USB连接,通过PC远程调试手机上的浏览器信息,进行映射. 历史攻略: adb:安卓手机USB调试模式 前置 ...
- vivado在远程服务器上完成本地设备的程序烧写和调试(vivado远程调试)
vivado远程调试 目录 1 概述 2 本地设置 3 远程服务器设置 1 概述 本文用于描述FPGA开发过程中,使用远程服务器时,直接在远程服务器连接到本地设备进行程序的烧写和调试的过程. 即运用场 ...
- Android 安卓ADB命令远程调试 单个或多个设备调试
文章目录 ADB局域网连接一个设备 Android设备配置 配置ADB环境 下载ADB: 配置环境变量 Windows MAC Linux ADB连接一个Android设备 ADB连接多个Androi ...
- 你想跨互联网远程调试Android设备吗,推荐一个远程控制手机的免费软件
以前,常常碰到这样的烦恼问题:我们开发的App应用,明明自己测试好好的,部署到用户的安卓设备上之后,总是遇到种种奇怪而又不好找到原因的问题.虽然说Android系统硬件差异大,各个厂商的设备系统实现细 ...
- 三菱FX5U PLC远程调试监控设备方案
长沙某公司因近期几套设备(控制器为三菱FX5U)需要出到其他省份及国外,售后部门人员安排紧张不能协调前往调试,需寻找可对设备进行远程调试及监控的产品方便售后在任何有网络地方即可实现远程调试,经过多方咨 ...
- android allow usb debugging,远程调试Android设备 - Chrome 开发者工具中文文档
在Windows,Mac 或 Linux 上远程调试 Android 设备上的实时内容. TL;DR 设置你的Android设备进行远程调试,并从开发机中发现它. 从您的开发机器检查和调试Androi ...
- 橙色云CDS案例分享|非标PLC自动化设备远程调试运维
橙色云CDS案例分享|非标PLC自动化设备远程调试运维 橙色云工业产品协同研发平台,服务于工业产品设计和创新,为提出产品研发需求的全球客户协同定制解决方案.高效交付研发成果. 平台拥有一支由多专业多领 ...
最新文章
- 部署Symantec Antivirus 10.0网络防毒服务器之六
- Dubbox-REST风格
- php查询oracle大量数据,Oracle 百万行数据查询优化
- [置顶] Android开发者官方网站文档 - 国内踏得网镜像
- 【OpenCV 例程200篇】55. 可分离卷积核
- activiti5第二弹----使用activiti5提供的测试类进行测试
- c语言超经典矩阵式键盘的接法,c语言超经典矩阵式键盘的接法,流程图和扫描程序...
- Xcode 12 导出ipa包
- 【转】Android 关于arm64-v8a、armeabi-v7a、armeabi、x86下的so文件兼容问题
- ElasticSearch ​What is Learning to Rank?
- Javascript 设置Cookie
- 三菱plc和三菱E700变频器专用协议通讯程序
- 高等数学 - 两平面的夹角
- 电脑在登陆界面如何打开计算机管理,无线路由器管理界面如何登录 无法进入管理界面怎么办...
- 部署混合云指南:多云服务商管理的八大要素
- vue+腾讯地图标记弹框
- 基于FreeRTOS的物联网智能车库管理系统(可进行车牌识别)
- excel自动恢复文档被关闭或者误删除
- PTA(每日一题)7-66 分解素因子
- GRP-U8如何修改账套主管
热门文章
- KEIL中遇到WARNING: MULTIPLE CALL TO SEGMENT的解决方法
- [转载]你是那个能和我同行一生的人吗?
- 如何解决MFC读取文件在EditControl中显示是乱码的问题
- Quicktime:如何在录制屏幕时录制系统声音
- Vegas导入PSD格式文件(素材)的方法
- (日常搬砖)之environment.yml的使用
- 误删D盘数据怎么办?推荐使用数据恢复软件EasyRecovery
- 通过EasyRecovery来恢复U盘文件
- 2018 KDD CUP支付宝安全团队Deep X斩获两项大奖
- shell基础--1