首页 web前端 html教程 使用Fiddler搭建手机调试环境(我做得项目是调试微信的公众号)

使用Fiddler搭建手机调试环境(我做得项目是调试微信的公众号)

Oct 18, 2016 am 08:42 AM

部分内容参考:http://ju.outofmemory.cn/entry/22854

我们在测试微信企业号的时候,由于微信的限制,不能把它拿到chrome浏览器中进行调试,所以就不能实时的看到页面变化情况,因而我们就需要一个能够随时查看我们页面变化的工具。虽然使用Fiddler也是存在一些问题,还是不能直接在我们的浏览器里面调试,但是相比较于将修改后的页面上传到服务器,然后在用手机进行请求,简单了很多。

1.首先我们需要安装一个fiddler,汉化不汉化的都可以,我给大家提供一个没有汉化的。链接:http://pan.baidu.com/s/1miuGbyS 密码:kjjg ,直接一溜确定,安装就行。安装完毕以后,我们进行以下设置。Fiddler代理默认使用端口8888,我们在手机端设置http代理为Fiddler的代理服务器(一会下面有具体的步骤),使得手机应用的请求都通过Fiddler来转发,从而实现查看手机端页面请求的功能。

           1)设置Fiddler的options。

                          打开Fiddler->Tools->Fiddler Options在Connection面板里将Allow remote computers to connect勾选起来,确定后,关闭Fiddler并重新打开Fiddler。

         2)此时,为了确保代理是正常工作的,我们可以在cmd里执行<span class="pln">netstat <span class="pun">-<span class="pln">anop tcp</span></span></span>查看Fiddler进程是否正常监听8888端口,如果服务没有正常开启,可以尝试使用其他端口,端口修改的位置(可以在上一步里面直接修改)。

我们先打开任务管理器查看以下我们Fiddler的PID代码是多少。打开任务管理器的快捷键是Ctrl+shift+ESC,正常状态下如图所示,我们的Fiddler.exe的PID是3156,如果你的这个界面里面没有PID这一项,接着往下看。

 

 

在任务管理页面,选择查看--选择列,把PID那一栏打上对号,如图所示,这样在任务管理界面就有PID了。

 

打开我们的cmd,执行netstat -anop tcp命令,如下图所示,我们可以看到,PID为3156,正在监听8888端口。那么接下来我们要把手机端的代理设置为Fiddler的代理,代理设置需要一个ip和一个端口,ip就是Fiddler所运行的电脑(安装Fiddler的电脑)的局域网ip地址,端口默认是Fiddler代理的端口8888,请确保手机所在的网段可以访问到电脑所在的网段,同一个局域网里一般没什么问题(电脑用宽带,手机用wifi,一个网就行)。

 

 

2.查看我们安装fiddler软件的电脑的ip,如图所示,我的电脑ip是192.168.1.12,因为我用的是公司的网络,ip是每天动态获取的,所以如果我们不把ip换成固定的,就得每次使用fiddler的时候自己在手动的修改一下。

 

 

 

 

3.给我们的手机设置代理,访问 192.168.1.12:8888,我用的是三星的s7,直接在链接的wifi上面长按就可以,代理主机名是我们的电脑网络的ip,代理服务器端口是我们fiddler监听的那个,如图所示

                                                                            

 

4.最后,我们需要配置一下我们电脑的hosts文件,路径如下,

 

将我们的电脑ip写入,后面跟的是我们要调试的那个网页的网址。

 

这样我们就可以调试我们的手极端的页面了。

5.问题:我们设置好了fiddler以后,再访问https协议的网站的时候,可能会出现下面的问题,如图:

这个问题造成我们不能正常访问一些网站内容,比如百度,阿里等等,这是因为我们的fiddler开启了监听https,在设置里面把对号去掉就行了。在fiddler页面,点击Tools--Telerik Fiddler Option--HTTPS,把监控https通道(decrypt HTTPS traffic)的那个对号去掉

 

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1274
29
C# 教程
1256
24
HTML:结构,CSS:样式,JavaScript:行为 HTML:结构,CSS:样式,JavaScript:行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML,CSS和JavaScript的未来:网络开发趋势 HTML,CSS和JavaScript的未来:网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML的未来:网络设计的发展和趋势 HTML的未来:网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML:建立网页的结构 HTML:建立网页的结构 Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

HTML与CSS vs. JavaScript:比较概述 HTML与CSS vs. JavaScript:比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML与CSS和JavaScript:比较Web技术 HTML与CSS和JavaScript:比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML:是编程语言还是其他? HTML:是编程语言还是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签? &lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签? Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

See all articles