本地调试微信 转的

转载 2015年07月11日 07:00:06

iOS APP “100件小事” 记录你们的爱情。
杨洋、feiyang wen、Charming Oyoung 等人赞同
假装有人邀,刚好最近团队也碰到类似的问题,一点点经验拿来分享一下。
只说说本地调试。
通常微信 web 端的页面都需要发布到外网,碰上极其难用复杂的发布系统,我们前端狗们也是吐槽无力,就算 FTP 一来一回的方便,但本身这样做就是不科学(优雅)的搞法。因为对于线上已有的版本,在没开发测试完之前谁也不敢甩到外网。
在传统的桌面 web 端开发流程里,本地开发完成后的环节是测试联调,所以先讲讲怎么给设备配 HOST。

  1. 给设备配 HOST
    世界上最遥远的距离,你在外网,我在测试环境。
    改设备的 HOST 文件本身就是高级(变态)玩法,所以默认情况下是没有权限来更改的。但是,iOS 设备在越狱后,Android 设备在 root 后你就能随便乱来了,专门用来改host 文件的应用也是一搜一大把,当然前提是你得把设备越狱和 root 。
    这儿只讲讲在没有越狱和 root 的情况下怎么给设备配 HOST。
    主要的思路就是,通过一台主机作为代理服务器,手机通过 HTTP 代理连接过来,手机上所有的 HTTP 请求都经过主机代理,这样只要更改主机的 HOST 就可以达到目的了。
    Team 就只有我和 @xzheng 两个人,我们都是 MacbookPro 办公的果狗,平台比较统一所以比较好办。
    我们用到的工具:
    一台接入到 WiFi 的 iMac
    任意多台接入到同 WiFi 网段的移动设备,iOS 或 Android 不限
    用来开启代理服务和抓包的应用 Charles (Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy)
    HOST 管理应用 Gas Mask (2ndalpha/gasmask · GitHub)
    主要的步骤是:
    将 iMac 和设备都连接到同一 WiFi 下 ,并保证他们在同一网段,比如:
    iMac 192.168.1.88
    iPhone 192.168.1.101
    通过 Charles 打开 iMac 的代理服务,并抓包

把设备 HTTP 代理设置成手动,服务器地址为 iMac 的 IP,端口号默认为 8888

通过 Gas Mask 来修改 iMac 的 HOST 文件

所以,整个的流程看上去是这个样子的:
顺带一提这样做的一个好处,微信内置的 Webview 里很多的 JS API 是要申请权限的,(理论上)微信会对当前 URL 所在域名进行权限校验。所以,如果不用与外网真实环境一致的域名就不能调用到这些 API 的方法,HOST 就很好的避免了这个问题。
以上,手机上所有 http://dianhua.qq.com 的请求都经由 Charles 的代理来到了主机上,主机因为被修改了 HOST,http://dianhua.qq.com 的请求间接的被转到了 HOST 文件里设置的 IP。

  1. 本地调试
    看到题主一遍一遍的提到 Zend Studio 我就乐了,PHP狗来嘛,HOST 都解决了,本地调试还不简单:
    按上面提到的方法,将手机 HTTP 代理连接到主机
    在主机上开启一个本地环境,要问 PHP 环境哪家强,我默默地打住选了 XAMPP
    将主机 HOST 改到本机 127.0.0.1 http://dianhua.qq.com
    整个的过程是这样的:

以上,手机上 http://dianhua.qq.com 的请求经由主机,在 HOST 文件的影响下都跑去主机的 htdoc 目录。
这边保存,那边刷新,巴适惨得哭。

以上的例子是 Mac 环境,Windows 下 Fiddler + Willow 的无敌组合是一样的,如有需要可以试试。

这是我们做法,希望对题主有用,就这样。

http://www.zhihu.com/question/25456655

=====================
ngrok的使用 基于windows
1:为什么要使用ngrok
在微信开发的时候 需要填写与微信服务器相连接的url 这个url必须是外网域名,
也就是说我们需要在这个外网域名对应的ip服务器上做开发,而没办法本地开发调试
所以用ngrok获得一个外网域名 这个外网域名实际访问的是本地主机
这样把此外网域名填入到微信需要的外网url里 就可以在本地开发调试了
2:下载ngrok ngrok - secure introspectable tunnels to localhost windows版
3:注册ngrok 得到your auth token 后面的自定义域名必须要有这个token
4: 打开cmd cd到ngrok.exe在的目录,执行ngrok 80 就可以给你本机的127.0.0.1:80分配一个外网可以访问的域名 例如http://1f1b1c.ngrok.com
也就是外网访问http://1f1b1c.ngrok.com 就是访问你本机的127.0.0.1:80,当然如果你执行ngrok 8080 那就是分配一个域名访问127.0.0.1:8080
5: 上面分配的域名是临时的,可能下次开电脑这个域名就变化了,我们需要一个固定的域名映射到本机的80端口
所以先登录 执行ngrok -authtoken XUsFLvG4hgb8ukjvML8YBXX 80 这里填写的是你注册时给你的token,
然后ngrok -subdomain myapp 80 这样后续你通过http://myapp.ngrok.com 就可以一直访问到本机的127.0.0.1:80了
当然如果是想访问的是8080端口 那就把上面的80都改成8080
6:不要关闭cmd窗口 关闭后提供的域名就访问不了了 如果要查看ngrok给你做的中转http信息 访问http://localhost:4040/
7:具体到微信的开发 一定要注意 由于是ngrok做的中转 出于安全考虑通不过微信的默认语句libxml_disable_entity_loader(true);
所以注释掉他 等正式部署到服务器再取消注释

=======================
远程调试工具

http://www.browsersync.io/docs/

https://www.npmjs.com/package/weinre

远程调试Android/IOS设备/微信网页方法汇总

以下汇总现在可远程调试手机网页的几个方法,基本上官方都有详细的说明文档,可移步至相关网站查看,这里就不赘述使用、操作方法了。...
  • u012347225
  • u012347225
  • 2016年05月20日 16:47
  • 5812

微信项目开发与本地调试、移动调试(二)

简单讲一下利用微信官方提供的工具--微信web开发者工具,进行微信工程的本地调试和测试、生产环境的调试。              本地调试,  利用自己申请的订阅号的公众平台测试账号测试。     ...
  • u010882234
  • u010882234
  • 2017年03月27日 22:25
  • 947

微信开发本地调试

适用:微信公共平台开发者 目的:在本地服务器实时调试微信,方便微信开发 语言:JAVA 工具:MyEclipse、Jetty、花生壳内网版、微信 过程: 1、http://www.oray.com/a...
  • aochuanguying
  • aochuanguying
  • 2014年08月14日 10:50
  • 1939

微信小程序里面的单步调试和变量查看

在微信小程序开始学习与开发的过程中,总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍...
  • bright789
  • bright789
  • 2017年01月24日 18:32
  • 7823

微信项目开发与本地调试、移动调试(一)

微信服务号现在真的很强大,里面有各种各样的服务和功能。现在的移动端应用,可以说,微信已经超过了APP。对于微信开发而言,它和普通的web项目其实并没什么区别。微信项目也是web项目的一种,只不过它是在...
  • u010882234
  • u010882234
  • 2017年02月26日 15:32
  • 2934

如何在本地进行微信公众号的开发和调试

如何在本地进行微信公众号的开发和调试
  • zzwwjjdj1
  • zzwwjjdj1
  • 2016年08月16日 15:42
  • 11795

在线调试微信打开的HTML5页面

需求 现在微信内嵌了自己的 X5 浏览器内核,该内核毕竟与别的主流浏览器还是有一点差别,如何线上调试成了一个棘手的问题。 开发时我们还可以使用 alert,线上错误就没办法了,再说总alert也...
  • fuguotao1
  • fuguotao1
  • 2015年08月26日 15:28
  • 9997

微信在线接口调试工具的使用

微信公众平台在线测试接口的使用   1.在线测试接口的地址:https://mp.weixin.qq.com/debug 会出现以下界面:   接口类型为基础支持的接口负责获取acc...
  • u012432468
  • u012432468
  • 2017年08月06日 12:13
  • 2414

本地调试微信接口方法

调试微信接口,例如调试微信消息收发接口,我们需要提供一个公网访问url,正常情况下,我们需要建立web工程,然后打包,不部署服务器,提供服务器外网访问url。但是想要将自己本地电脑上运行的项目发布到公...
  • p793049488
  • p793049488
  • 2015年03月31日 10:15
  • 10384

微信支付本地调试

经过折腾几天,找了一些资料来看。我不得不吐槽微信这个团队在做文档是如何槽糕,文档做的不好其次,接口那些总体而言 让人感觉很难受,而且给出的方案不是最优而是最麻烦的,和开发者互动很少。 开放平台像是一...
  • hero82748274
  • hero82748274
  • 2015年11月30日 19:31
  • 9963
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:本地调试微信 转的
举报原因:
原因补充:

(最多只允许输入30个字)