如何调试KISSY组件的代码？

http://highsea90.com/index.php/archives/1680

 

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

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

注意，这里代理的端口是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组件开发者，你的组件可能会被很多页面使用，一方面大家在享受你的代码带来的便利，另一方面，也在考验你代码在各种环境中的 可靠性。也就是说，任何用到你的组件的页面都可能需要你的调试。上面说到的技巧可以很大程度减少你的调试成本，赶快尝试一下吧。