真机联调常用方式和强大的Fiddler

原创 Lin_Grady 教程 网络协议 129阅读 2019-01-03 15:57:21 举报

前言

可能大部分时间我们都会在浏览器开发完成之后,才发现真机各种不适应,于是总结了一下常用到的调试方法,因为编辑器问题有些排序列表中间穿插图片之后会导致重新从1开始,澄清一下不是我排版问题,但是的确懒得配合改,将就一下吧.

webpack-dev-server

打开终端,输入命令

获取到ip

进入对应的webpack目录配置,devServer>host填上IP

后续pc和手机都可以直接访问ip地址

缺点

适用于快速测试页面,但是手机本身没有可调试工具,

如果本身是随机分配地址的话需要手动设置固定IP

Eruda

Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。

功能清单

  1. 按钮拖拽,面板透明度大小设置。
  2. Console面板:捕获Console日志,支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table;支持占位符,包括%c自定义样式输出;支持按日志类型及正则表达式过滤;支持快捷命令加载underscore、jQuery库;支持JavaScript脚本执行。
  3. Elements面板:查看标签内容及属性;查看应用在Dom上的样式;支持页面元素高亮;支持屏幕直接点击选取;查看Dom上绑定的各类事件。
  4. Network面板:捕获请求,查看发送数据、返回头、返回内容等信息。
  5. Resources面板:查看并清除localStorage、sessionStorage及cookie;查看页面加载脚本及样式文件;查看页面加载图片。
  6. Sources面板:查看页面源码;格式化html,css,js代码及json数据。
  7. Info面板:输出URL及User Agent;支持自定义输出内容。
  8. Snippets面板:页面元素添加边框;加时间戳刷新页面;支持自定义代码片段。

快速使用

页面最顶部引入CDN即可

或者根据参数配置最佳

DEMO

缺点

可用于定位问题,不能调试

Android 真机调试

环境

  1. PC端安装Chrome 版本@32+
  2. 移动端Android系统高于 4.0,安装Chrome for Android 

步骤

  1. 数据线连接之后手机需要打开“开发者选项”中的 “USB 调试”功能 ,每款手机方式不同,自行探索.
  2. PC端Chrome输入地址chrome://inspect 查找你的设备

  1. 启动webpack服务器,手机启动Chrome直接访问localhost(/IP):(端口)/(地址)

  1. 如果点击inspect ,PC端会生成手机视图可以和手机同步操作

缺点

需要一定版本支持,而且Chrome没问题不代表手机内置甚至其他浏览器正常

Fiddler4

Web Session 编辑

只要设置断点去暂停session处理并且允许请求/响应的修改,构建你自己的HTTP请求并且通过Fiddler去运行

性能测试

Fiddler让你看到整个页面的资源大小,一眼看清除HTTP的缓存和压缩,使用规则隔离性能瓶颈例如'标记所有未压缩大于25kb的请求'.

可定制工具

受益于丰富的可扩展模型,从简单的FiddlerScript到可使用各种.NET语言开发的强大扩展

安全测试

解码HTTPS通信将其显示出来并且使用man-in-the-middle解码技术修改web应用请求.配置Fiddler去解码所有通信或者特定的sessions.

HTTP/HTTPS通信记录

使用Fiddler打印你的机器和网络之间所有HTTP(S)通信,在任何支持代理的应用(IE, Chrome, Safari, Firefox, Opera等等)通信进行调试.

Web调试

调试来自PC(Mac或者Linux系统)和手机(IOS和Android)设备的通信,确保在客户端和服务端之间传输正确的cookies,header和cache指令,支持任何框架包括.NET,Java,Ruby等等

开启和过滤

  1. 左下角是开启/关闭抓包功能
  2. 因为Fiddler会抓取所有的网络请求包括资源,所以我们一般会通过Filter规则筛选出想要的请求
  3. 启用规则
  4. 控制展示/隐藏/标记命中规则的请求,另外在4上面的下拉框可以选择展示内网/互联网请求
  5. 想要控制的hosts规则
  6. 保存生效,左侧全都是百度下的通信记录

这往往就是开始调试的第一步,好的开始是成功的一半.以下都以百度作为示例讲解.

表单含义

名称含义
#抓取HTTP Request的顺序,从1开始,以此递增
ResultHTTP状态码
Protocol请求使用的协议,如HTTP/HTTPS/FTP等
Host请求地址的主机名
URL请求资源的位置
Body该请求的大小
Caching请求的缓存过期时间或者缓存控制值
Content-Type请求响应的类型
Process发送此请求的进程:进程ID
Comments允许用户为此回话添加备注
Custom允许用户设置自定义值

图标含义

图标含义
请求已经发往服务器
已从服务器下载响应结果
请求从断点处暂停
响应从断点处暂停
请求使用 HTTP 的 HEAD 方法,即响应没有内容(Body)
请求使用 HTTP 的 POST 方法
请求使用 HTTP 的 CONNECT 方法,使用 HTTPS 协议建立连接隧道
响应是 HTML 格式
响应是一张图片
响应是脚本格式
响应是 CSS 格式
响应是 XML 格式
响应是 JSON 格式
响应是一个音频文件
响应是一个视频文件
响应是一个 SilverLight
响应是一个 FLASH
响应是一个字体
普通响应成功
响应是 HTTP/300、301、302、303 或 307 重定向
响应是 HTTP/304(无变更):使用缓存文件
响应需要客户端证书验证
服务端错误
会话被客户端、Fiddler 或者服务端终止

查看请求

点击其中一条请求,选择右侧的Inspectors中的Header,上半部分是请求头,下半部分是响应头.

例如我们搜索测试,从Fiddler里找到对应的请求

可以看到格式化的请求参数和响应内容

性能分析

点击Statistics可以看到各种请求字节耗时,而且不限定请求,左侧选中多个请求的话会显示选中请求的总共情况

耗时条

上面的展示太过细致,更多时间使用直观的图表展示足以满足我们情况

先禁止filter然后选中全部请求,点击Timeline看到从服务端传输到客户端的大概情况

拦截请求

因为百度不单单只是使用一个域名地址,所以我们在过滤规则加多一个域名去抓取样式请求如下

然后从里面找到样式文件,跟着步骤走

  1. 找到对应的样式文件
  2. 切换到AutoResponder面板
  3. 启用拦截规则
  4. 未匹配请求直接通过
  5. 命中规则请求列表,这里我们直接将请求拖到面板会自动添加进去
  6. 上面匹配规则,下面替换响应文件,拖动添加的请求匹配规则默认是匹配完整请求url如下

上面截图第6处的test.css是本地的一个css文件,代码如下:

替换之后点击保存,然后刷新浏览器即可看到效果,即使返回文件还是soutu.css,但是内容已经被替换成修改的test.css

上面是针对目标请求的匹配规则,即拖动请求生成的是匹配规则,命中的所有请求都会被替换资源,而不是单单指代拖动的单个实例.另一种方式是点击add rules添加规则.

伪造请求

  1. 切换到composer面板
  2. 设置方式,请求地址,请求协议
  3. 发送的入参数据
  4. 点击Execute发送

真机抓包

前提条件保证手机和PC在同一局域网下,或者通过PC开热点连接

  1. 打开Tools>Options>Connection
  2. 设置代理端口,默认8888,
  3. 勾选中Allow remote computers to connection

  1. 切换到HTPS面板
  2. 勾选Decrypt HTTPS traffic
  3. 下面的下拉框可以选择只接受浏览器,非浏览器,远程设备的程序
  4. 如果警告太多可以勾选Ignore server certificate errors
  5. 手机连上局域网,设置代理电脑IPFiddler端口,IP可以通过终端命令ipconfig或者Fiddler右上角看到

  1. 手机打开浏览器访问下载证书地址,即上面设置的代理IP和端口
  2. 如图,点击FiddlerRoot certificate下载证书安装,名字随意,凭证默认不行的话就换成WLAN试试

  1. 正常情况下已经可以实现手机抓包了,如果失败尝试检测防火墙设置,重新卸载安装证书,最后大招重装Fiddler.

缺点

需要修改手机代理,首次配置比较麻烦

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复