1. Web前端开发实用工具
前端开发实用工具
Qzone产品中心
产品中心
yunishi

2. About yuni
爱生活
爱旅游
爱折腾
爱复制
爱分享
爱前端
94058156@qq.com

3. Fiddler

4. Willow

5. 适用范围
• Window平台，Mac平台 平台*
• 需要 .NET 2.0 环境
• 所有的浏览器

6. 项目开发过程

8. 预研阶段
• 你需要个榜样，标杆。
。

9. 他

10. 还是他？
还是他

11. SNS网站
网站

13. 常规方法

14. 技巧一：智能保存文件
智能保存文件
选择目标文
件夹
需要启用自动
解码功能

15. 智能保存文件
文件按照url地址
文件按照 地址
的组织保存

17. 开发阶段
• XHR跨域问题
• 后台接口

19. 文件夹替换
Match中的URL必须以“
Match URL “/”结尾，同时Action中
“/”
“ Action
的Path必须以“”结尾
结尾

20. 约定后台接口

21. 联调阶段
• HOST切换
• 数据不符合规范

23. 右键菜单
选中HOST，
选中 ，
点击右键

24. Host
管理Host
支持一对多

25. 支持通配符
支持*？
支持 ？通配符

26. JSON Viewer
支持Unicode编码（uxxxx）
支持Unicode ）

27. Table 视图
数组结构Table形式显示
数组结构 形式显示

28. Table对象链接
对象链接
双击链接到对象节点

29. JSON Viewer
• 后台接口开发完成，先自测 先自测
• 使用JSON Viewer来检查接口数据
JSON Viewer来检查接口数据

30. 测试阶段
• 为啥总是有外网投诉？
？
• 我在公司就无法重现？
？

32. 模拟低网速

33. 自定义限制网速
请求延时：
请求延时： 响应延时：
响应延时：
k/s k/s

34. 发布阶段

35. SOS 紧急
紧急BUG

36. 格式化文件
• 目前支持格式化 HTML HTML，CSS，JavaScript
• 基于JSBeautifier（ http://jsbeautifier.org/ ）

37. 其他技巧
• 清理缓存
• 图片base64编码
base64
• BOM检查
• HTTP协议校验

38. Ctrl
+
Shift
+
X

40. base64 vs CSS sprites
• 缺点：
+33.33%
部分浏览器不支持*
• 优点：
gzip
无颜色种类限制
更少的请求数
本地存储
内存和cpu

41. HOW

44. Willow提示
Willow

45. HOW

49. Fiddler提示
Fiddler

50. HOW

51. Web前端开发
关于Web

52. Q&A