spy-debugger 前端调试工具
一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等)。支持HTTP/HTTPS,无需USB连接设备。
Language: English
特性
1、页面调试+抓包
2、操作简单,无需USB连接设备
3、支持HTTPS。
4、spy-debugger
内部集成了weinre
、node-mitmproxy
、AnyProxy
。
5、自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
6、可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)
使用案例
页面编辑模式
启动命令:spy-debugger -w true
weiner页面调试界面
anyproxy抓包界面
安装
Windows 下
npm install spy-debugger -g
Mac 下
sudo npm install spy-debugger -g
三分钟上手
第一步:手机和PC保持在同一网络下(比如同时连到一个Wi-Fi下)
第二步:命令行输入spy-debugger
,按命令行提示用浏览器打开相应地址。
第三步:设置手机的HTTP代理,代理IP地址设置为PC的IP地址,端口为spy-debugger
的启动端口(默认端口:9888)。
- Android设置代理步骤:
设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
- iOS设置代理步骤:
设置 - 无线局域网 - 选中网络 - HTTP代理手动
第四步:手机安装证书。注:手机必须先设置完代理后再通过(非微信)手机浏览器访问http://s.xxx
(地址二维码)
安装证书(手机首次调试需要安装证书,已安装了证书的手机无需重复安装)。
第五步:用手机浏览器访问你要调试的页面即可。
自定义选项
端口
(默认端口:9888)
spy-debugger -p 8888
设置外部代理(默认使用AnyProxy)
spy-debugger -e http://127.0.0.1:8888
spy-debugger内置AnyProxy提供抓包功能,但是也可通过设置外部代理和其它抓包代理工具一起使用,如:Charles、Fiddler。
设置页面内容为可编辑模式
该功能使页面内容修改更加直观方便。 (默认: false)
spy-debugger -w true
内部实现原理:在需要调试的页面内注入代码:document.body.contentEditable=true
。暂不支持使用了iscroll框架的页面。
是否允许weinre监控iframe加载的页面
(默认: false)
spy-debugger -i true
是否只拦截浏览器发起的https请求
(默认: true)
spy-debugger -b false
有些浏览器发出的connect请求没有正确的携带userAgent,这个判断有时候会出错,如UC浏览器。这个时候需要设置为false。大多数情况建议启用默认配置:true,由于目前大量App应用自身(非WebView)发出的请求会使用到SSL pinning技术,自定义的证书将不能通过app的证书校验。
是否允许HTTP缓存
(默认: false)
spy-debugger -c true
更多
修复
weinre
在node.js
V7版本会崩溃的bug对
weinre
在页面document ready
事件前,无法打印console.log日志进行了增强修复。增强
weinre
打印未捕获异常(Uncaught Exceptions)功能。spy-debugger
原理是集成了weinre
,简化了weinre
需要给每个调试的页面添加js代码。spy-debugger
原理是拦截所有html页面请求注入weinre
所需要的js代码。让页面调试更加方便。
转载于:https://www.cnblogs.com/sunshq/p/6704622.html
spy-debugger 前端调试工具相关推荐
- 25、Venkman(JavaScript Debugger)调试工具
Venkman(JavaScript Debugger ) 1.安装 Venkman为Mozilla浏览器(包括Firefox)开发的调试器自由工具.下载地址:http://www.hacksrus. ...
- 自己开发前端调试工具:Gungnir
文章目录 1. 界面介绍 2. 项目资源管理界面 3. 文本编辑器功能 4. 代理功能 4.1. 自动下载线上文件 4.2. 使用本地已有文件 4.3. 代理整个目录 4.4. 执行文件内容后返回结果 ...
- 前端调试工具Browser-sync(Windows)安装指南
Browser-sync是基于NODE.JS 所以必须先安装NODE.JS环境 1.官网下载NODE.JS 2.傻瓜式安装 3.开始菜单栏打开NODE.JS控制台 4.输入控制台指令npm insta ...
- webApp移动端前端调试工具vconsole和eruda
一 .vconsole使用步骤 1.npm下载 npm install vconsole -save 2.vue项目在main.js中: import VConsole from 'vconsole' ...
- 图解前端调试工具Chrome Dev Tools的使用
快捷指令速查表 标题 快速打开Dev Tools Ctrl + Shift + i 打开命令菜单 Ctrl + Shift + P 快速打开Dev Tools Ctrl + Shift + i 快速打 ...
- 前端开发必备工具-网页调试工具
前端开发必备工具-网页调试工具 在前端开发中我们经常会要调试页面,主要html.css调试和js调试,这里整理一些工具: 一.firefox网页调试插件 1.firefox插件Firebug 主要用于 ...
- 前端高效开发和调试工具整理
前端高效开发工具: 张成文大神的<现代前端技术解析>中介绍了以下工具: 好的开发工具不仅可以提高我们的开发速度,也可以辅助我们写出更高质量的代码. 选择什么开发工具因人而异,但好的开发工具 ...
- Mvc示例代码调试之一----调试工具及设置(用firebug与vs联合调试)
设置IIS调试 调试前的的话 在编写bs程序时,需要调试程序.这时,我们可以用vs自带的调试器:但是这个调试器经常崩溃,而且经常变换端口.那么,有没有更好的方式呢?我们可以用IIS进行调试.但是,许多 ...
- 提高效率 JavaScript调试 js 调试工具
现在的JavaScript事实上已然成为了流行的web语言,即使它并不完美.很多程序员不喜欢用JavaScript写代码,是因为写到后来总会出现各种莫名其妙的bug,而且在开发大型应用程序的过程中很容 ...
最新文章
- lucene,基于QueryParser的搜索
- 代码审计_strcmp比较字符串
- Makefile的介绍与使用
- pip设置下载源为国内镜象源永久设置方法-windows版本
- 安卓ondraw刷新视图_android播放动画时是否会调用被操作的视图的onDraw方法?
- php大文件怎么排序去重,简单实现大文件的排序和去重
- php和python-PHP和Python性能比较:放弃PHP改用Python
- 开课吧:哪些人适合转行做Web前端?
- python如何用xpath爬取指定内容_Python如何利用Xpath选择器爬取京东网商品信息
- logback分环境配置
- win Server 2012 R2 密钥
- java 正则 d 1_java之正则表达式的使用1
- 精述wifi、zigbee在链路层的安全原理:CCM模式
- 计算机自动隐藏桌面图标,Windows 8.1 右下角图标莫名自动隐藏
- 数据结构实现学生信息管理系统功能
- Docker基础-使用Dockerfile创建镜像
- QT之Tableview
- cdn加速对门户网站产生的影响
- 史上最好最全最牛的安全驾驶经验(不看必后悔)
- 如何联系百度CEO兼总裁李彦宏
热门文章
- panda 函数笔记(merge\DataFrame用法\DataFrame.plot)
- php主题怎么增加导航页,为twentytwelve子主题添加pagenavi分页导航 | 科研动力
- spring boot访问templates目录下的html静态页面
- oracle 时间按季度,Oracle按日期季度查询
- python 怎么判断文件存在哪里_Python判断文件和文件夹是否存在的方法
- 女生学师范还是计算机,本人专业是计算机科学与技术师范类,女生,不知道是考研还是工作什么的,今年开学大三,希望大家提点意见...
- php m grep event,linux grep (linux查找关键字在php出现的次数)
- Java MVC框架性能比较
- WebScarab使用说明
- Dapper基础用法