安装web调试工具weinre及使用方法

最新推荐文章于 2021-11-29 18:15:39 发布

phpxxo

最新推荐文章于 2021-11-29 18:15:39 发布

阅读量525

点赞数 2

分类专栏：网页调试文章标签： weinre调试 fiddler抓包替换响应

本文链接：https://blog.csdn.net/phpxxo/article/details/82560998

版权

网页调试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装web调试工具weinre及使用方法
1.安装node.js
2.使用npm 安装weinre
3.启动weinre
4.复制weinre服务器地址, 浏览器打开
5.插入js代码(网页不在自己服务器使用fiddler抓包替换)
6.打开weinre控制台调试审查元素等

特点是适用于移动端, TV端浏览器,无头浏览器等性质浏览器网页调试

一. 安装node.js
下载地址: https://nodejs.org/en/download/

二.使用npm安装weinre
npm install -g weinre
ps: 管理员权限运行CMD, 否则安装不成功

三. 启运weinre
weinre –boundHost 192.168.1.107
瞄了个眯
如图所示,说明安装成功并启动成功:

ps: 该ip是我本地电脑内网IP

四. 复制地址, 浏览器打开
http://192.168.1.107:8080/
weinre首页
将这段代码插入网页

五. 网页插入js代码 (如果网页是在自己服务器上可以在源代码中加入,如是要不是自己服务器的网页,需要使用抓包替换response方式来达到插入js代码)

这里举例, 复杂一点的抓包替换方式, 这是一种万能的方法.
fiddler抓包工具请自行网上下载, 安装
软件截图:
fiddler工具界面

1) 打开fiddler
2) 设置响应替换方式插入js代码
例, 我要给该网页插入js调试 http://www.618tu.cn/pay/index.html

fiddler定位到OnBeforeResponse
fiddler response

fiddler response

修改OnBeforeResponse方法代码:
/**************************************************************/
static function OnBeforeResponse(oSession: Session) {

    if(oSession.uriContains("www.618tu.cn/pay/index.html")){

        oSession.utilReplaceInResponse('<head>','<head><script src="http://192.168.1.107:8080/target/target-script-min.js#anonymous"></script>');
     }

}

/**************************************************************/

ps: 原理说明:
fiddler 将请求过来的数据进行篡改(替换成了插入定义的js的网页再给浏览器该js完成跟weinre服务器通讯, 从而实时调试网页)

六. 刷新网页, 控制台调试, 审查元素
weinre 控制台

用微信打开, 相当于给微信增加了一个调试工具, 而这个调试工具是跨平台, 跨浏览器的

phpxxo

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
安装web调试工具weinre及使用方法

安装web调试工具weinre及使用方法 1.安装node.js 2.使用npm 安装weinre 3.启动weinre 4.复制weinre服务器地址, 浏览器打开 5.插入js代码(网页不在自己服务器使用fiddler抓包替换) 6.打开weinre控制台调试审查元素等特点是适用于移动端, TV端浏览器,无头浏览器等性质浏览器网页调试一. 安装node.js ...
复制链接

扫一扫