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

部分内容参考: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
HTML标签和HTML属性有什么区别?HTML标签和HTML属性有什么区别?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未来:进化和趋势HTML的未来:进化和趋势May 13, 2025 am 12:01 AM

HTML的未来将朝着更加语义化、功能化和模块化的方向发展。1)语义化将使标签更明确地描述内容,提升SEO和无障碍访问。2)功能化将引入新元素和属性,满足用户需求。3)模块化将支持组件化开发,提高代码复用性。

为什么HTML属性对Web开发很重要?为什么HTML属性对Web开发很重要?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior,外观和功能

Alt属性的目的是什么?为什么重要?Alt属性的目的是什么?为什么重要?May 11, 2025 am 12:01 AM

alt属性是HTML中标签的重要部分,用于提供图片的替代文本。1.当图片无法加载时,alt属性中的文本会显示,提升用户体验。2.屏幕阅读器使用alt属性帮助视障用户理解图片内容。3.搜索引擎索引alt属性中的文本,提高网页的SEO排名。

HTML,CSS和JavaScript:示例和实际应用HTML,CSS和JavaScript:示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是:1.HTML用于构建网页结构;2.CSS用于美化网页外观;3.JavaScript用于实现动态交互。通过标签、样式和脚本,这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性?为什么这很重要?如何在标签上设置lang属性?为什么这很重要?May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性,如。2)在多语言内容中,为不同语言部分设置lang属性,如。3)使用符合ISO639-1标准的语言代码,如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么?HTML属性的目的是什么?May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior,外观和互动,使网站互动,响应式,visalalyAppealing.AttributesLikutesLikeSlikEslikesrc,href,href,href,类,类型,类型,和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表?您如何在HTML中创建列表?May 06, 2025 am 12:01 AM

toCreateAlistinHtml,useforforunordedlistsandfororderedlists:1)forunorderedlists,wrapitemsinanduseforeachItem,RenderingeringAsabulleTedList.2)fororderedlists,useandfornumberedlists,useandfornumberedlists,casundfornumberedlists,customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

See all articles

热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

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

热门文章

热工具

禅工作室 13.0.1

禅工作室 13.0.1

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

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中