神器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

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

相关推荐
江号软件分享7 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM14 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构