利用whistle调试移动端页面
whistle是基于Node实现的跨平台web调试代理工具,可以作为普通的http代理或者用来抓包、修改、操作http、https、websocket、tunnel请求,如:修改hosts、请求方法、响应状态码、请求(响应)头、请求(响应)内容等等,基本上可以操作web请求的方方面面,而且支持插件扩展功能,本文主要讲下如何用whistle调试移动端页面,安装及使用whistle等其它内容请参见Github:https://github.com/avwo/whistle。
移动端调试遇到的问题
相较于PC侧,在移动端调试网页,主要会遇到以下三个问题:
- 没有Console,无法查看页面的js错误及通过
console.xxx
输出的调试日志 - 无法查看、修改页面的DOM结构及样式
- 无法debug
一般情况下,移动端页面在PC的Chrome浏览器上模拟器上进行调试,但并非所有移动端页面都可以在PC的模拟器上调试,比如一些需要调用到APP的本地API的APP内嵌页面,或者测试页面兼容性问题等,只有在真机上运行才能看到真实效果,这个时候可以利用whistle,通过简单配置即可解决上述的前两个问题(目前无法通过页面js获取页面的调试信息,暂不支持debug功能,可以通过 console.log
来代替):
利用whistle查看页面的js错误及通过 console.xxx
输出的调试日志
whistle内部实现了类似浏览器的Console的远程Log平台,只需配置简单的whistle规则即可自动捕获页面的错误及console输出的信息,以https://m.baidu.com/为例,由于 https://m.baidu.com/
是用https访问,先在whistle上开启https拦截,才能对https请求进行抓包及修改,手机需要配置下whistle代理,一切准备就绪后,可以配置如下规则:
m.baidu.com log://
# 如果你想同时注入js脚本,可以用下面一种方式
# 在mac或linux加载本地js文件/User/xxx/test.js
# m.baidu.com log:///User/xxx/test.js
# 在windows上加载本地js文件D:\xxx\test.js
# m.baidu.com log://D:\xxx\test.js
# 直接从whistle的Values配置的key-value里面获取脚本
# m.baidu.com log://{test.js}
其中,whistle的Values参见:https://avwo.github.io/whistle/webui/values.html
我们用whistle的Values在log里面注入一个段js,主要用来通过console.error, console.warn, console.log等输出数据,并模拟一个异常抛出:
m.baidu.com log://{test.js}
test.js:
console.error({ error: true });
console.warn({ error: true, warn: { test: true } });
console.log(123456);
// 模拟抛出异常
console.notAFunction('test');
效果如下图:
利用whistle查看、修改页面的DOM结构及其样式
whistle集成了weinre的功能,同样只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式:
m.baidu.com weinre://test
其中,weinre://test 中的
test` 只是作为weinre的分类,防止一个weinre调试页面出现太多的连接,效果如下图:
利用whistle注入vConsole
vConsole是微信团队开发的轻量、可拓展、针对手机网页的前端开发者调试面板,主要原理是通过在页面注入js实现模拟PC浏览器的Console功能,这边利用whistle的js协议往指定网页(https://m.baidu.com/)注入vConsole.js
,配置whistle规则:
m.baidu.com js://{vConsole.js}
效果如下图:
注意: vConsole和weinre不能同时使用
whistle还有很多应用场景,后续再逐步输出给大家,了解更多内容请访问whistle的Github:https://github.com/avwo/whistle,有问题或建议欢迎大家提issue或PR。
利用whistle调试移动端页面相关推荐
- 使用Android模拟机开发调试移动端页面
使用真机调试可以还原bug场景,但由于真机上不方便输出调试信息,不容易进行代码调试.这里可以通过在电脑上安装一个Android模拟器,然后结合Chrome的devices远程设备功能,进行移动端页面的 ...
- 怎么在pc端浏览器调试移动端页面
在最近的工作中兼任一点测试工作,需要调试移动端页面,在看了好多方法大概主要就是以google chrome浏览器为主,大概步骤为: 1.打开chrome浏览器 2.输入网址 3.按f12呼出开发者工具 ...
- Windows下利用Chrome调试IOS设备页面
本文介绍如何在 Windows 系统中连接 iOS设备 并对 Web 页面进行真机调试 必须前提 iOS设备.数据线 Node.js 环境 Chrome 浏览器 环境准备 安装Node环境 参考Nod ...
- weinre调试移动端页面
1. 安装 npm install -g weinre 2. 启动 weinre --httpPort 8080 --boundHost -all- 也可以新建 ~(win: c:/user/youn ...
- 火狐(firefox)调试移动端页面
大家都知道火狐有firebug,不管是调试css还是调试js都非常的棒. 那火狐自带的调试工具大家知道吗? 今天我们就来讲讲火狐自带的调试工具 如何使用户或自带的调试工具调试手机站? 1.打开火狐,如 ...
- 在mac电脑上,用Safari浏览器调试ios手机移动端页面
打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器], 具体如下图所示 打开Mac上Safari的开发者模式,流程是[Safar ...
- 在mac上如何用safari调试ios手机的移动端页面
步骤如下: 第一步:打开iphone手机的开发者模式,流程是:[设置]->[Safari]->[高级]->开启[Web检查器] ,如图1.图2 图2 第二步:打开Mac上Safari ...
- 利用 whistle 进行混合开发调试
介绍 whistle 是一款用 Node 实现的跨平台的 Web 调试代理工具,支持查看修改 http(s).Websocket 连接的请求和响应内容.简而言之就是 Node 版的 Fiddler.C ...
- Rosin-移动端页面开发调试Fiddler插件
前言 随着移动互联网大潮流的到来,移动端H5开发需求也愈加强烈.而移动端页面的调试对开发效率起着重要作用,都有什么调试方法呢? 对于Android设备,可通过设备连接Chrome浏览器进行调试(chr ...
- python移动端web开发代码_移动web前端开发,前端开发工作总结,移动端页面开发-我主页-一个前端程序猿的博客...
热门推荐 html/css 一.escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的... 标签: 0 ...
最新文章
- linux shell 合并多个文件 并删除重复行
- java中 flush()方法
- java中0x07_JAVA里0X00的表示
- 深度学习Bible学习笔记:第七章 深度学习中的正则化
- 从研发到管理,这十大技巧助我提升了领导力
- 如何解决高并发,秒杀问题 1
- JavaScript浏览器对象Window对象常用方法(3)
- GMA Round 1 向量计算
- python批量修改图片后缀名
- 基于java象棋游戏_基于JAVA技术的中国象棋游戏设计与实现
- 【渗透测试常见漏洞概述及修复方法】
- Oriented R-CNN完整复现HRSC2016以及训练自己的HBB数据集(DIOR)
- pubwinol免刷_Pubwin万象OL实名一键自动处理程序
- 快手的视频 发到抖音 怎么消重 视频md5值查询
- 使用LM324实现信号放大及电压比较综合报警电路
- 游戏辅助制作核心--植物大战僵尸逆向之阳光生产加速实现满天星(四)2
- RuntimeError: non-empty 3D or 4D input tensor expected but got ndim: 4
- 金融工程---引论以及参考书目
- 2012年宝兰德软件技术服务有限公司三句半节目台词
- 马云、马化腾、张一鸣……互联网大佬学历大比拼
热门文章
- 三维曲线图的绘制方法大全
- 粒子滤波(PF:Particle Filter与卡尔曼滤波(Kalman Filter)相比较 (转载)
- 教你一招,自己就能检测mac
- App Tamer Mac版常见问题解答
- Kotlin的基本数据类型
- 记一次MacOS 证书信任配置不生效的解决方法(clashX报错:SecTrustSettingsCopyCertificates error: -25262)
- 制作Camtasia 2020击键标记动画
- Java学习之==注释、数据类型、变量、运算符
- ubuntu切换python默认版本从2.7到3.5后 报错 ImportError: No module named 'pip'
- (六)微服务分布式云架构spring cloud - 企业云架构common-service代码结构分析