Web 前端开发实用工具
Qzone 产品中心yunishi
3
Fiddler
4
Willow
5
适用范围• Window 平台, Mac 平台 *• 需要 .NET 2.0 环境• 所有的浏览器
6
项目开发过程
7
8
预研阶段• 你需要个榜样,标杆。
9
他
10
还是他?
11
SNS 网站
13
HOW
14
常规方法
15
技巧一:智能保存文件
选择目标文件夹
需要启用自动解码功能
16
智能保存文件
文件按照 url地址的组织保存
17
WHY
18
开发阶段• XHR 跨域• 文件合并• 后台接口
19
HOW
20
文件夹替换
Match 中的 URL 必须以“ /” 结尾,同时 Action 中的 Path 必须以“ \” 结尾
21
约定后台接口
22
智能文件合并
支持qzmin, willow格式的合并文件
23
智能文件合并
表明此文件是合并后生成的
24
智能文件合并合并后的文件
Willow会检测文件的更改,根据需要生成合并文件
25
Qzmin 格式
26
联调阶段• HOST 切换• 数据不符合规范
27
HOW
28
右键菜单
选中 HOST,点击右键
29
管理 Host
支持一对多
30
支持通配符
支持 *?通配符
31
JSON Viewer
支持 Unicode 编码( \uxxxx )
32
Table 视图
数组结构 Table形式显示
33
Table 对象链接
双击链接到对象节点
34
JSON Viewer• 后台接口开发完成,先自测• 使用 JSON Viewer 来检查接口数据
35
测试阶段• 为啥总是有外网投诉?• 我在公司就无法重现?
36
WHY
37
模拟低网速
38
自定义限制网速
请求延时: k/s
响应延时: k/s
39
发布阶段
40
SOS 紧急 BUG
41
格式化文件
• 目前支持格式化 HTML , CSS , JavaScript• 基于 JSBeautifier ( http://jsbeautifier.org/ )
42
其他技巧• 清理缓存• 图片 base64 编码• BOM 检查• HTTP 协议校验
43
Ctrl Shift
X
+
+
44
base64
45
base64 vs CSS sprites• 缺点:
+33.33% 部分浏览器不支持 *
• 优点: gzip 无颜色种类限制 更少的请求数 本地存储 内存和 cpu
46
HOW
47
BOM
48
49
Willow 提示
50
HOW
51
HTTP
52
53
54
Fiddler 提示
55
HOW