移动端真机页面样式问题排查工具whistle和web页面接口抓包工具fiddler

• 安装

npm install whistle -g

• 启动工具，抓包工具默认端口8899，地址默认本机ipv4地址

w2 start -p 8899 // 默认8899

 

• 关闭工具，重启工具

w2 stop // 关闭

w2 restart // 重启

• 启动成功后，根据提示的ip+端口地址打开抓包页面

// 1.点击create创建需要抓包的页面，并在链接之后空格输入weinre://test
http://www.test.com weinre://test

// 2.创建成功后打开Weinre选择创建成功的页面

// 3.真机和pc在同一局域网，win10开热点手机连接或者电脑和手机连接同一个wifi，编辑手机连接wifi设置代理，代理ip为pc的ip，端口为启动whistle时设置的端口，默认8899

// 4.在真机中打开创建的页面，在Weinre页面即可抓取到html页面css样式

 

• 抓接口调用还是fiddler好用些，pc和移动端均可

// 1.下载安装fiddler

// 2.pc端抓包，打开软件即可使用

// 3.移动端抓包，打开软件，手机和pc在同一局域网内，配置手机wifi代理ip为pc的ipv4地址，fiddler端口默认为8888，手机打开web页面即可进行抓包

// 4.fiddler不仅可以进行抓包，还可以进行接口劫持mock数据

 

 

• vconsole插件