前端抓手机抓包可以看页面风格吗？

时隔三年，再次接触移动h5页面开发，最后一次是大四实习的时候。这次是混合开发，涉及h5页面和原生app的交互。h5页面需要打通与native app的登录状态，调用native app的接口，比如调用native camera扫描二维码。不同于微信小程序的开发，在本地开发时，微信提供了微信开发者工具，可以在本地模拟调用。但是我们每次都需要打包静态文件，上传到服务器调试，非常麻烦。

native app加载在线h5时可以运行本地代码吗？答案是肯定的。可以拦截在线页面请求数据，然后通过whistle等抓包工具响应本地代码。本文主要介绍抓包的原理和抓包工具哨子的使用。

1.抢包原理

1.1什么是抢包？

数据包捕获是对网络发送和接收的数据包进行拦截、重发、编辑和转储。通过数据包捕获，您可以:

分析网络问题

商情分析

网络信息流分析

网络大数据的金融风险控制

检测试图入侵网络的攻击。

检测内部和外部用户对网络资源的滥用

检测网络入侵的影响

监控连接到互联网的宽带流量

监控网络流量(包括内部用户、外部用户和系统)

监控互联网和用户计算机的安全状态。

渗透和欺骗

...

回顾一下计算机网络的知识，数据是以小帧的形式在网络上传输的。这些帧通过一个叫做网络驱动的特殊程序进行整形，然后通过网卡发送到网络，再通过网线到达目的机器，在目的机器的一端进行相反的过程。接收机器的以太网捕获这些帧，告诉操作系统帧已经到达，然后存储它们。在这个传输和接收的过程中，您可以使用嗅探器来捕获数据包。作为前端开发人员，通常会捕获应用层的HTTP/HTTPS包。

1.2 HTTP/HTTPS数据包捕获原理

HTTP/HTTPS是应用层使用的通信协议，常见的应用层架构是客户端-服务器架构。

运行在不同终端系统上的客户端程序和服务器程序如何相互通信？实际上，就操作系统而言，进行通信的其实是进程而不是程序，进程可以看作是运行在端系统的程序。

在web应用程序中，客户端浏览器进程与服务器进程交换消息。

浏览器进程需要知道接收进程的主机地址和目的主机中定义的接收进程的标识符，即目的端口。

大多数应用程序由通信进程对组成，每对中的两个进程互相发送消息。该进程通过一个名为socket的软件接口向网络发送消息，并从网络接收消息。

进程可以比作房子，它的插座可以是它的门，插座是应用层和传输层之间的端口。

知道了两个进程之间的通信流，我们如何捕捉包呢？举一个生活中的例子，小明暗恋小文，于是写了一封情书，但是他有点害羞，让小文的好朋友小华帮他把情书投递了。这时，小华可以负责小文和小明之间情书的传递。作为中间人，她可以偷偷查看他们情书的内容。

其思路是设置一个中间人进程负责抓取数据包，目标进程之间的每个会话在转发前都与中间人进程进行通信。

1.2.1 HTTP数据包捕获原理

In weinre://test

重新访问手机上的juejin.cn网站，然后打开weinre看到以下内容。绿色表示远程连接成功。