神器whistle实现移动端页面调试的三种姿势

背景

移动端开发过程中,查看打印的log是必不可少的,一般的做法都是在开发环境下通过webpack注入vconsole,但是对于线上页面的调试,这一招就不灵了。来看看新一代抓包工具whistle如何实现页面调试的。

whistle介绍

whistle 是一款用 Node 实现的跨平台的 Web 调试代理工具,支持查看修改 http(s)、Websocket 连接的请求和响应内容。简而言之就是 Node 版的 Fiddler、Charles,不过这个工具能远比后两者更加适合 Web 开发者、使用更简单、功能也更加实用。笔者在用了一段时间以后,已经彻底放弃了charles、fiddler,拥抱了whistle。

页面调试的三种姿势

whistle有两种方式可以让开发者查看log

1. Tools中自带的console功能

只需要在rules中配置下当前页面域名的log就可以了,然后手机访问页面,就可以在下图中的console面板中看到打印的日志

效果:

2. 页面注入vconsole

这里需要科普下,whistle中的配置分为rules和values,

  • rules主要用于设置匹配规则,及匹配后的操作行为
  • values主要是设置操作行为用到的值,比如替换接口json、js文件等
  1. 在rules中使用jsPrepend(自带api)配置注入vconsole和初始化的代码
  1. 将vconsole及初始化的代码粘贴到values中文件中
  1. 用手机或电脑访问匹配规则的页面,就可以在当前页面注入vconsole了。

3. Weinre真机远程调试

Weinre(Web Inspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具, 它使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面。 与传统的Web Inspector的使用场景不同, Weinre的使用场景如下图, 调试的页面在手机上, 调试工具在PC的chrome, 二者通过网络连接通信。

whistle内置了Weinre这个工具,方便我们进行远程调试,最大的用处就是我们可以在PC电脑上调试手机端页面

  1. 配置规则: juejin.cn/user/ weinre://
  1. 点开whistle中的标签weinre -> anonymous
  1. 打开后,在电脑的weinre页面会看到Targets部分变成绿色,表示调试过程没问题,刷新页面可以看到页面的打印、dom等信息。

使用总结

个人感觉whistle有以下几个明显的优点:

  1. 所有配置都是文本命令式的,配置比较快捷、便于复制给同事复用,而charles、fiddler界面操作配置相对繁琐,不便于给他人复用。
  1. whistle和浏览器插件Proxy SwitchyOmega(代理切换工具)配合使用,可以快捷的切换代理
  1. 接口数据重定向本地json时,往往会遇到跨域问题,whistle只需一行配置就可以解决跨域
arduino 复制代码
pattern  file://{本地.json}
pattern  resCors://enable

总之,这款代理工具,功能还是十分强大的,而且配置规则极其方便快捷,使用文档也是中文的。

相关推荐
超级大只老咪17 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒30 分钟前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只1 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
JarvanMo1 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse1 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构
全马必破三1 小时前
Buffer:Node.js 里处理二进制数据的 “小工具”
前端·node.js
web安全工具库1 小时前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库