Web 前端开发实用工具

Qzone 产品中心yunishi

2

About yuni

爱生活爱旅游爱折腾爱复制爱分享爱前端

94058156@qq.com

t.qq.com/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

56

欢迎联系

94058156@qq.com

t.qq.com/yunishi