移动端前端抓包神器详解（whistle+weinre）

移动端线上代码调试工具，针对测试环境的或者开发环境，还可以打vconsole可以查看，但是线上代码如果有问题，没办法去打vconsole，此款抓包神器可以解决这个问题

有耐心的同学可以查看官网文档：快速上手 · GitBook

1、全局安装

npm install -g whistle

2、启动

w2 start

3、用浏览器打开http://localhost:8899/，端口号为8899，也可以修改w2 start -p port，可以修改为需要的端口号

4、如果是HTTPS,需要安装证书

点击工具栏https,弹出二维码，用手机浏览器扫描，下载安装CA证书，并且要信任此证书

5、手机端与电脑端连同一局域网，这点很重要！

设置手机端代理

6、打开移动端页面，就可以在http://localhost:8899/#network处查看到请求信息

7、页面调试配置

在此处配置信息

https://自己的页面.com/path C:\本地项目路径
https://线上页面路径  weinre://[自己的页面路径]
https://线上页面路径 log://{test.js}

8、重启移动端页面，点击weinre

出现自己的页面

切换elements可以查看自己的页面信息了！可以进行调试，可以查看resource和network，console

移动端前端抓包神器详解（whistle+weinre）相关推荐

浏览器实现抓包过程详解
浏览器实现抓包过程详解几乎所有浏览器都提供了抓取数据包的功能,因为浏览器为抓包提供了一个专门的操作界面,因此这种抓包方式也被称为"控制台抓包".本节以 Chrome 浏览器为例进 ...
HTTP协议版本介绍以及使用Wireshark工具针对HTTP进行抓包分析详解
一.http协议版本介绍 http:Hyper Text Transfer Protocol 超文本传输协议,是互联网应用最为广泛的一种网络协议,主要用于Web服务.通过计算机处理文本信息,格式为HT ...
Charles抓包实战详解
访问我的博客前言通过上一篇文章,想必你已经掌握了如何正确安装抓包神器 Charles,如果还是抓不了包,可以再看看. 今天要做是抓包实战,因为我在做网络文学的公司就职,所以就拿网络文学的 APP ...
TCP Dump 抓包工具详解
tcpdump使用技巧作者: 潜水大叔一般情况下,非HTTP协议的网络分析,在服务器端用tcpdump比较多,在客户端用wireshark比较多,两个抓包软件的语法是一样的. 一.基本语法 1.1 ...
【转】用Fiddler做抓包分析详解
1.为什么是Fiddler? 抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下: a.Firebug虽然可以抓包 ...
Wireshark配置安装以及抓包教程详解（win10版）（包含TCP IP ICMP 三次握手半扫描等相关知识）
了解过网络安全技术的人都知道一个名词"抓包".那对于局外人,一定会问什么是抓包?考虑到,大家的技术水平不一,我尽可能用非专业的口吻简单的说一下. 抓包就是将网络传输发送与接收的数据 ...
html 调用tcpdump,抓包工具：tcpdump抓包命令详解
简介: tcpdump全称:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的"头& ...
抓包工具：tcpdump抓包命令详解
简介: tcpdump全称:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的"头& ...
tcpdump显示udp包_TCPdump抓包命令详解
TCPdump抓包命令 tcpdump是一个用于截取网络分组,并输出分组内容的工具.tcpdump凭借强大的功能和灵活的截取策略,使其成为类UNIX系统下用于网络分析和问题排查的首选工具. tcpdu ...

移动端前端抓包神器详解（whistle+weinre）

移动端前端抓包神器详解（whistle+weinre）相关推荐

最新文章

热门文章