这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
如何调试KISSY组件的代码?
2013年12月10日 JavaScript ⁄ 共 1848字 等你评论
kissy
如果你是Gallery组件开发者,你的组件可能会被很多页面使用,任何用到你的组件的页面都可能需要你的调试。KISSY的组件代码如何快速调试,本文将带给你一些指引。

如果你是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

安装generator-kissy-gallery

npm install generator-kissy-gallery -g

2,配好浏览器端环境

两个方法,第一个方法,配 host 到本地

127.0.0.1 a.tbcdn.cn

这当然很好理解,第二个方法,给浏览器配置代理

2

注意,这里代理的端口是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将二者整合到一起。

kissy

本地服务实际上有两部分组成,flex-combo服务(默认80端口)和反向代理服务(默认8080端口)。请求到达反向代理时,所有a.tbcdn.cng.tbcdn.cn的请求会被代理到80端口,由flex-combo去解析Combo链接,并决定哪些文件取本地、哪些文件取线上。

如上文所说,反向代理主要给移动终端和不便配host的终端使用,浏览器如上文所述设置代理,手机终端这样设置代理:

4

开启本地服务的时候,同时启动了grunt watch监听,任何对源码的修改都会触发构建操作,保持要调试的代码是最新的。同时,在命令行窗口中可以看到所有请求的log都会打到屏幕上,方便我们的调试。

5


如果你是Gallery组件开发者,你的组件可能会被很多页面使用,一方面大家在享受你的代码带来的便利,另一方面,也在考验你代码在各种环境中的 可靠性。也就是说,任何用到你的组件的页面都可能需要你的调试。上面说到的技巧可以很大程度减少你的调试成本,赶快尝试一下吧。

参考:Flexcombo服务原理,

用到的一些npm模块

友荐云推荐
×