移动端h5页面嵌入的方式多种多样,普通的chrome真机调试功能有时就不能满足要求了. whistle通过设置wifi服务器代理的方式,可以抓包调试所有移动端请求的页面. whistle的github地址:https://github.com/avwo/whistle/blob/master/README-zh_CN.md. 总的来说,分成3步: 1. 启动代理服务器. 依托node,全局安装whistle,通过 whistle start 命令启动. 2. 浏览器设置代理服务器,用于显示抓包调

npm全局安装 npm install -g whistle 全局启动 w2 start 启动之后,输入127.0.0.1:8899 就可以访问到whistle调试界面了: 我们主要常用几个功能: 1.mock本地数据映射,即手机请求线上某个接口的时候做本地映射,直接请求本地json数据 2.查看console打印信息,对于windows系统的电脑来说还是很有用的,否则调试ios是个很大的麻烦 mock数据映射 点击该调试界面的左边第二个按钮,rules,输入想要拦截的接口 空格 本地mock数

chrome 的手机调试工具 toggle device toolbar 是否可以模拟到不同系统,如苹果系统和安卓系统.

环境:whistle:1.14.6 whistle手机抓包 以安卓手机为例 手机跟电脑要连同一个wifi. 1.启动whistle 使用w2 start启动whistle. 退出cmd后,whistle自动关闭了,所以每次使用whistle,需要启动whistle,不然提示w2命令无法使用. 2.安装证书 电脑打开浏览器,输入网址:http://127.0.0.1:8899/,点击HTTPS,安卓手机可以直接通过手机浏览器扫描二维码下载安装证书或者在浏览器网址中输入rootca.pro,下载证书

定义 用户代理字符串:navigator.userAgent HTTP规范明确规定,浏览器应该发送简短的用户代理字符串,指明浏览器的名称和版本号.但现实中却没有这么简单. 发展历史 [1]1993年美国NCSA国家超级计算机中心发布了世界上第一款web浏览器Mosaic,该浏览器的用户代理字符串为Mosaic/0.9 [2]Netscape公司进入浏览器开发领域,将自己产品的代号定名了Mozilla(Mosaic Killer)的简写,用户代理字符串格式为Mozilla/版本号 [语言] (平台

背景:开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试:但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设备连接到PC,使用PC的开发者工具检测. 1.安卓手机调试工具chrome DevTools调试步骤a.需要满足安卓系统版本为Android 4.4以上,并且需要再你的APP内配置相应的代码,在WebView类中调用静态方法setWebContentsDebuggingEnabled,如下:i

跨域 浏览器访问非同源的网址时,会被限制访问,出现跨域问题. 解决方案: 1.response 添加 header(CORS) 2.JSONP 方式 3.全局对象+iframe (1)document.domain+iframe的设置  (只有在主域相同的时候才能使用该方法): 设置document.domain值相同即可访问 (2)HTML5的postMessage(window.postMessage): 监听message事件,获取data        (3)使用window.name来

关于spy-debugger   1.一站式页面调试工具,远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybirdApp等)HTTP/HTTPS.2.spy-debugger内部集成了weinre.3.支持HTTPS页面的调试. 安装 Windows 下 npm install spy-debugger -g Mac 下 sudo npm install spy-debugger -g 三分钟上手 第一步:手机和PC保持在同一网络下(比如同时连到一个Wi-Fi下) 第二步

本文链接:https://blog.csdn.net/weixin_42534940/article/details/88783455安装参考: https://github.com/avwo/whistle 目录 1. 安装 Node.js 2. 安装 whistle 3. 启动 whistle 4. PC 安装根证书 5. 手机安装 根证书 6. 使用 whistle 抓包 1. 安装 Node.jsNode.js 下载地址:https://nodejs.org/en/ 直接下载然后安装,安

spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址:https://github.com/wuchangming/spy-debugger     特性 1.页面调试+抓包      2.操作简单,无需USB连接设备      3.支持HTTPS.      4.spy-debugger内部集成了weinre.node-mitmproxy.AnyPr

1:对于安卓直接扫码安装https的证书: 对于ios  连接电脑发出的wifi,打开whistle,配置代理之后(一定要保证先链接电脑发出的wifi,且配置代理) 用Safari打开网址:http://rootca.pro.下载rootca证书进行安装: 最后一步: 设置----通用-----关于本机------证书信任设置------>找到whistle证书打开信任

前言 whistle是基于Node实现的跨平台抓包调试代理工具,有以下基本功能: 查看HTTP.HTTPS请求响应内容 查看WebSocket.Socket收发的帧数据 设置请求hosts.上游http/socks代理 修改请求url.方法.头部.内容 修改响应状态码.头部.内容,并支持本地替换 修改WebSocket或Socket收发的帧数据 内置调试移动端页面的weinre和log 作为HTTP代理或反向代理 支持用Node编写插件扩展功能 具体功能如下: 一.安装启动 1.whistle安

本文转载自大牛Trinea的博文:Android利用Fiddler进行网络数据抓包 主要介绍Android及IPhone手机上如何利用Fiddler进行网络数据抓包,比如我们想抓某个应用(微博.微信.墨迹天气)的网络通信请求就可以利用这个方法. Mac 下请使用 Charles 代替 Fiddler,Charles 免费激活码为Registered name: a!nthony ortolani   License key: a!4036b2761c9583fda (需要将 name 和 key

上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便的,看到一位仁兄介绍的BrowserSync,于是看看了,感觉还行吧.它主要是用来同步更新的,比如文件修改了,浏览器会自动刷新,以及还有一点好处就是,PC,移动端都是同步的,可惜的是没有调试工具,在Chrome调试工具里面调试的不会同步更新到手机端,要是这个可以就好了. 虽然没个调试工具,但我们可以

Fiddler是一个调试代理,下载地址http://www.telerik.com/download/fiddler 下载安装运行后,查出运行机器的IP,手机连接同一网域内的WIFI,手机WIFI连接设置里的高级里,代理设置填写上Fiddler运行机器的IP,这样从手机访问的链接都会走Fiddler,可以直接在Fiddle里查看数据包 1.PC端安装Fiddler 下载地址:Fiddler.exe,下面是Fiddler的简单介绍(不感兴趣的可以直接跳过): Fiddler是强大且好用的Web调试

Android抓包方法 工具包内容如下:(下载地址:http://download.csdn.net/download/yezhaohui2011/8368061) adb ——谷歌提供的安卓远程调试工具 .(用于PC连接手机并输入命令) tcpdump——Linux系统中普遍使用的一款开源网络协议分析工具.(放在手机内部进行抓包) wireshark——window 系统下的抓包工具.(查看分析抓取的数据包) 抓包条件:手机需要取得 root权限 使用方法: 1.  把adb工具放到PC任一目

如今人们也越来越习惯在手机上浏览网页,而在手机上这些针对桌面浏览器设计的网页经常惨不忍睹.Web应用开发者需要针对手机进行界面的重新设计,但是手机上并没有称心如意的调试工具(如Firebug.web inspector),重新设计界面的工作往往事半功倍.本文介绍的调试工具Weinre 就是解决这一问题的优秀调试工具. Weinre是什么? Weinre代表We b In spector Re mote,是一种远程调试工具.举个例子,在电脑上可以即时 的更改手机上对应网页的页面元素.样式表,或是查

Mobile Web调试工具Weinre 现在.将来,用移动设备上网越来越成为主流.但对于开发者们来说,移动web的调试一直是个难题,前期可以使用模拟器来协助调试,但到了真机调试阶段就让人非常头痛.而Weinre就是解决这难题的利器. Weinre的本意是Web Inspector Remote,它是一种远程调试工具.功能与Firebug.Webkit inspector类似,可以帮助我们即时更改页面元素.样式,调试JS等,下面就简单介绍下如何使用.下面以以Windows系统为例: 一.首先确保

Fiddler 教程 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助. 阅读目录 Fiddler的基本介绍 Fiddler的工作原理 同类的其它工具 Fiddler如何捕获Firefox的会话 Firefox 中使用Fiddler插件 Fiddler如何捕获HTTPS会话 Fiddler的基本界面 Fiddler的统计视图 QuickEx

以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) { //针对iPhone 4, 5c,5s, 所有iPhone6的放大模式,个别iPhone6的标准模式 } @media o

Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 Web程序员开发App系列 - 开发我的第一个App 待续 目录 前言 调试Android代码 调试iOS代码 准备开发App 前言 在App中代码如果需要调试,就需要借助Chrome调试Android和Safari调试iOS手机,由于编写的都是Html代码,所以等下看到的界面都非常熟悉,对于We