专栏首页前端小叙whistle手机调试工具使用简单教程

whistle手机调试工具使用简单教程

npm全局安装

npm install -g whistle

全局启动

w2 start

启动之后,输入127.0.0.1:8899 就可以访问到whistle调试界面了:

 我们主要常用几个功能:

1、mock本地数据映射,即手机请求线上某个接口的时候做本地映射,直接请求本地json数据

2、查看console打印信息,对于windows系统的电脑来说还是很有用的,否则调试ios是个很大的麻烦

mock数据映射

点击该调试界面的左边第二个按钮,rules,输入想要拦截的接口 空格 本地mock数据文件路径

eg: 

net.abc.com/getlist E:\project\mock-data\ios.json

如果想要注释掉此行,前面加  “ # ”

如果想要调试某个页面,在页面后面加 weinre:// 任意名称

如果要查看某个页面的log,在页面后面加 log:// 

这些都可以同时写在一起如下:

192.168.5.252:3001/aaa.html log:// weinre://aaa

手机代理设置

1、手机在连着和电脑同一个局域网下,手机进入wifi设置,设置代理为手动,IP地址为电脑IP地址,端口号为whistle本地调试界面打开的端口号,这里是8899

2、安装证书,手机浏览器输入rootca.pro (或者在调试界面点HTTPS,手机扫描即可跳转) ,会跳转到下载证书界面,点击下载好之后安装,安卓需要起个名字,ios需要在 设置——通用——关于本机——证书信任设置中开关置为开。

注意:很多浏览器不支持下载此类文件,或者有些浏览器虽然可以下载此类文件但是无法安装,因为不识别相应文件格式,可以使用扣扣浏览器或者其他支持的浏览器下载安装即可。

小米手机独特的解决方案,参考此文:https://blog.csdn.net/jinshitou2012/article/details/79044560

页面调试

至此,手机点击请求的页面,whistle调试界面已经可以看到请求了,右侧点击tools-log,可以查看页面console.log打印,如果想要调试html,点击调试界面上面的weinre,找到刚刚rules配置的时候weinre后面名字点击即可看到

点开调试界面之后还需要一步重要操作,targets下会显示页面调试地址,点击地址,地址变为绿色,就可以到 【elements】中审查元素了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 点击除元素以外的任意地方隐藏元素js

    比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图 ? 该筛选器class名 1 $(document).click(function () {...

    蓓蕾心晴
  • setInerval实现图片滚动离开页面后又返回页面时图片加速滚动问题解决

    由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动画一股脑移...

    蓓蕾心晴
  • js通过闭包实现多个相同事件只需绑定一次

    蓓蕾心晴
  • Excel简化办公系列之二 | 录制宏快速制作工资条

    本文为CDA作者青菜原创文章,转载请注明来源 编者按:CDA作者青菜将在近期发布「Excel简化办公」系列文章,本文是第二篇;更多精彩请持续关注~ 今天午饭后和...

    CDA数据分析师
  • JDK 安装与环境变量配置(Win10详细版)

    一个JDK安装程序,这是是1.8版本,因为新的JDK版本都没有什么很大的亮点,如下图所示,

    晨曦_LLW
  • Linux系统下给非root用户添加sudo权限

    1.进入超级用户模式。也就是输入"su -",系统会让你输入超级用户密码,输入密码后就进入了超级用户模式。(也可以直接用root登录);

    流柯
  • Android中AndroidStudio&Kotlin安装到运行过程及常见问题汇总

    下载好AS的文件后,直接打开androidstudio的exe文件,弹出安装欢迎对话框如下图所示

    砸漏
  • Community Cloud零基础学习(四)Builder创建自定义的布局

    前几篇讲了Community Cloud权限配置等信息,但是没有太讲过 Community如何进行配置layout,本篇主要描述使用Builder去进行符合需求...

    用户1169343
  • 创建Jenkins Pipeline流水账

    点击创建流水线后Jenkins会拉取GIT仓库,并且尝试寻找存在Jenkinsfile的分支,然后构建。不过不管构建是否成功,都不要管它,我们回到经典页面做进一...

    颇忒脱
  • E-Prime1.1安装教程及软件下载

    E-prime软件是由美国PST公司开发的一套用于视听刺激呈现的系统,主要用于神经科学、脑科学、认知神经科学和心理学等领域,可与EEG和fMRI技术相结合,研究...

    悦影科技

扫码关注云+社区

领取腾讯云代金券