http://highsea90.com/index.php/archives/1680
如果你是Gallery组件开发者,你的组件可能会被很多页面使用,一方面大家在享受你的代码带来的便利,另一方面,也在考验你代码在各种环境中的可靠性。也就是说,任何用到你的组件的页面都可能需要你的调试。
淘宝首页的首焦轮播使用了我开发的Slide组件,他们报bug给我时,有没有一键式方法调试slide.js?
最直接的方法当然是用fiddler创建本地映射,但是淘宝首页发起的请求是一个Combo链接,类似:
http://g.tbcdn.cn/??tb/global/2.2.22/global-min.js,s/kissy/gallery/slide/1.2/index-min.js
如何为Combo链接中的某个文件创建映射(到本地)?
KISSY Gallery 组件构建工具最新一次更新便提供了这样轻巧的调试环境,一键启动服务,调试非常方便。来看如何在淘宝首页调试本地的Slide代码
1,首先准备环境
安装grunt和Yeoman
npm install yo grunt-cli -g
npm install generator-kissy-gallery -g
2,配好浏览器端环境
两个方法,第一个方法,配 host 到本地
127.0.0.1 a.tbcdn.cn
这当然很好理解,第二个方法,给浏览器配置代理
注意,这里代理的端口是8080,这种方法主要是提供给手机终端调试用(手机中当然没办法配host)
3,checkout 组件源代码
git clone https://github.com/jayli/slide.git
4,补全node_modules
进入到slide目录中,执行
npm install
5,启动服务
在slide目录下执行
grunt debug
注意:Mac和linux下加sudo,并确保本机无其他服务占用80端口(flexcombo用)或8080端口(反向代理用),80和8080端口均可配置。
6,修改源代码1.2/base.js
随便加个 debug
断点或alert()
7,打开淘宝首页
打开控制台,端点生效,Cool!
实现原理
解析Combo链接的服务使用了Flex-combo,反向代理服务使用了reserve-proxy,本地Grunt服务使用Grunt-flexcombo将二者整合到一起。
本地服务实际上有两部分组成,flex-combo服务(默认80端口)和反向代理服务(默认8080端口)。请求到达反向代理时,所有a.tbcdn.cn
和g.tbcdn.cn
的请求会被代理到80端口,由flex-combo去解析Combo链接,并决定哪些文件取本地、哪些文件取线上。
如上文所说,反向代理主要给移动终端和不便配host的终端使用,浏览器如上文所述设置代理,手机终端这样设置代理:
开启本地服务的时候,同时启动了grunt watch
监听,任何对源码的修改都会触发构建操作,保持要调试的代码是最新的。同时,在命令行窗口中可以看到所有请求的log都会打到屏幕上,方便我们的调试。
如果你是Gallery组件开发者,你的组件可能会被很多页面使用,一方面大家在享受你的代码带来的便利,另一方面,也在考验你代码在各种环境中的 可靠性。也就是说,任何用到你的组件的页面都可能需要你的调试。上面说到的技巧可以很大程度减少你的调试成本,赶快尝试一下吧。