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

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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js