美文网首页
使用whistle提高100%调试效率

使用whistle提高100%调试效率

作者: xurna | 来源:发表于2022-11-20 21:40 被阅读0次

使用场景

在日常开发中,往往会碰到许多在真机上才会出现的问题,在测试环境尚且可以通过发布代码解决,遇到线上问题时,怎么去快速定位问题调试代码呢?这里推荐调试神器whistle,有了神器,你可以:

  • 在电脑本地编码,手机上直接看页面效果,无需发布到服务器,调试效率up!up!up!
  • 可在微信及浏览器或其他允许代理的app中调试h5页面,通过代理模拟线上请求环境,提前进行生产验证,无需等前端发布。
  • 可以抓包生产返回的数据,定位问题
  • (其他暂未发掘的功能,如有补充,评论区讨论哈...)

使用步骤

whistle 安装:

Node安装成功后,执行如下npm命令安装whistle

sudo npm install -g whistle

whistle 启动:

 whistle start

然后会自动生成代理地址和端口。


image.png

访问 http://127.0.0.1:8899/#rules 可以进入规则配置页。

网络代理设置

ios 手机设置

WI-FI选择

手机和电脑需要连接同一个网段下的wifi,才支持代理测试

https 证书信任

进入 whistle 管理台,点击头部 https 按钮,选中 Capture TUNNEL CONNECTs, Enable HTTP/2,相机扫码打开链接下载证书(如果扫码不行就直接下载了再传到手机,ios下需要隔空投送才能打开证书安装)。

设置-通用-描述文件与设备管理,安装证书。

再选择通用-关于本机-证书信任设置,信任 whistle 证书。

以上是ios的设置,安卓也类似,需要安装证书,信任证书,打开开发者调试。

代理设置

手机连接和电脑一样的wifi,将wifi设置手动代理为 whistle 启动时显示的 ip 和 端口。

whistle 规则设置

将 whistle 规则配置为代理的域名指向本地开发 ip 和端口。比如访问 https://test.whistle.com/s/home/ 时代理到本地开发环境http://0.0.0.0:5000/ 配置如下:

# 配置 host
https://test.whistle.com/s/home/  http://0.0.0.0:5000/ 
# 配置资源
/test.whistle.com\/js\/(.*)\.(.*)/ http://0.0.0.0:5000/js/$1.$2

具体参考匹配原则

最后

最后可以愉快的在本地进行开发,手机真机上快速显示效果啦。

Weinre

weinre 是一个强大的移动端调试工具,whistle 已经将它集成在内了。通过它我们可以调试各种样式真机兼容问题。

新建 Values weinre如下,key 可以为空。

image.png

再新建规则

test.whistle.com weinre://test

选择 test 匹配,打开新页。

image.png

刷新手机页面,这时就看到 html 调试页面。

image.png

相关文章

  • 移动跨平台开发调试利器-whistle

    前言 最近使用一款代理调试工具,使用下来感觉比fiddler更方便跨平台开发调试,在此分享下。whistle(读音...

  • whistle使用教程

    whistle--全新的跨平台web调试代理工具 whistle是基于Node实现的跨平台web调试代理工具,类似...

  • Xcode中LLDB使用CheatSheet

    使用LLDB可以减少使用NSLog大大提高调试的效率,尤其是使用下面提及的断点设置选项、界面调试技巧的时候。 基础...

  • Python—注释

    1、注释可以提高代码的可读性,提高开发效率。2、可以对代码进行调试,完善代码。 Python中单行注释使用#。Py...

  • 爬虫工具—whistle安装与使用

    一.whistle安装 1.whistle安装步骤 1).终端使用npm命令安装whistle 2).终端启动wh...

  • 使用faceBook的chisel来提高调试效率

    使用faceBook的chisel来提高调试效率 安装chisel chisel的 安装是十分简单,它是在终端通过...

  • 最近火起的 Bean Searcher 与 MyBatis Pl

    上篇: 我这样写代码,比直接使用 MyBatis 效率提高了 100 倍[https://juejin.cn/po...

  • 为什么 webpack 如此强大

    1.调试更容易(生成Source Maps) 开发总是离不开调试,方便的调试能极大的提高开发效率,不过有时候通过打...

  • 利用 whistle 调试微信分享

    1、whistle 作为新潮流的前端调试利器,现在才接触到有点相见恨晚,它能帮我们抓包调试,包括真机调试、代理、H...

  • Blackbox提高js调试效率

    所有人前端开发人员都会遇到的问题,您的应用程序代码中会出现错误。您开始调试,但是逐行执行代码时,调试器有时会跳转到...

网友评论

      本文标题:使用whistle提高100%调试效率

      本文链接:https://www.haomeiwen.com/subject/flemkrtx.html