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

时间 2020-06-23 标签调经常使方式强大 fiddler

系列文章

真机联调经常使用方式和强大的Fiddler
whistle真机调试css

前言

可能大部分时间咱们都会在浏览器开发完成以后,才发现真机各类不适应,因而总结了一下经常使用到的调试方法html

网络知识科普

IP地址基本概念

IP地址是IP协议提供的一种统一的地址格式，它为互联网上的每个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差别。目前还有些ip代理软件，但大部分都收费。前端

IP地址格式

咱们目前经常使用的IPv4中规定，IP地址长度为32位二进制，在表示时，通常将32位地址拆分为4个8位二进制，再转为4个十进制数表示，每一个数字之间用点隔开，如127.0.0.1（localhost），这种描述方式被称为“点-数表示法”。node

IP地址层次

分为网络号和主机号两个层次。网络号表示主机所属网络，主机号表示主机自己。网络号与主机号的位数与IP地址分类有关。webpack

IP地址分配

IP地址分配的基本原则是：要为同一网络（子网、网段）内不一样主机分配相同的网络号，不一样的主机号。git

192.168.1.x: 是公网ip地址，这些是在网络中表明本机的ip地址，可经过此ip地址远程访问或控制主机。 github

0.0.0.0: 最特殊的一个ip地址，表明的是本机全部ip地址，无论你有多少个网口，多少个ip，若是监听本机的0.0.0.0上的端口，就等于监听机器上的全部ip端口。换句话说，就是只要数据报目的地址是你机器上的一个ip地址，那么就能被接受。web

webpack-dev-server

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它容许在运行时更新全部类型的模块，而无需彻底刷新。正则表达式

打开终端,输入命令chrome

ipconfig

获取到ip

IPv4 地址 . . . . . . . . . . . . : 192.168.x.xxx

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

host: '192.168.x.xxx',

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

http://192.168.x.xxx:(端口)/


还有一种快捷方法
host: '0.0.0.0',  // 指定使用一个 host。默认是 localhost。若是你但愿服务器外部可访问可设置0.0.0.0

缺点

适用于快速测试页面,修改代码可立马同步到手机上,可是手机自己没有可调试工具,
若是自己是随机分配地址的话须要手动设置固定IP

Eruda

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

功能清单

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

快速使用

页面最顶部引入CDN便可

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

或者根据参数配置最佳

;(function () {
    var src = 'node_modules/eruda/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

DEMO

缺点

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

chrome Android真机调试

环境

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

步骤

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

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

若是点击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等等

真机抓包

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

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

4, 切换到HTPS面板
5, 勾选Decrypt HTTPS traffic
6, 下面的下拉框能够选择只接受浏览器,非浏览器,远程设备的程序
7, 若是警告太多能够勾选Ignore server certificate errors
8, 手机连上局域网,设置代理电脑IP和Fiddler端口,IP能够经过终端命令ipconfig或者Fiddler右上角看到

9, 手机打开浏览器访问下载证书地址,即上面设置的代理IP和端口

192.168.x.xxx:8888

10, 如图,点击FiddlerRoot certificate下载证书安装,名字随意,凭证默认不行的话就换成WLAN试试

11, 正常状况下已经能够实现手机抓包了,若是失败尝试检测防火墙设置,从新卸载安装证书,最后大招重装Fiddler.
若是是Ios的话,要为这个证书开启受 SSL 信任，请前往“设置”>“通用”>“关于本机”>“证书信任设置”。在“针对根证书启用彻底信任”下，开启对这个证书的信任。

开启和过滤

左下角是开启/关闭抓包功能
由于Fiddler会抓取全部的网络请求包括资源,因此咱们通常会经过Filter规则筛选出想要的请求
启用规则
控制展现/隐藏/标记命中规则的请求,另外在4上面的下拉框能够选择展现内网/互联网请求
想要控制的hosts规则
保存生效,左侧全都是百度下的通讯记录

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

表单含义

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