Web 前端开发实用工具 Qzone 产品中心 yunishi
About yuni <ul><li>爱生活 </li></ul><ul><li>爱旅游 </li></ul><ul><li>爱折腾 </li></ul><ul><li>爱复制 </li></ul><ul><li>爱分享 </li></ul><...
Fiddler
Willow
适用范围 <ul><li>Window 平台, Mac 平台 * </li></ul><ul><li>需要  .NET 2.0  环境 </li></ul><ul><li>所有的浏览器 </li></ul>
项目开发过程
预研阶段 <ul><li>你需要个榜样,标杆。 </li></ul>
他
还是他?
SNS 网站
 
<ul><li>HOW </li></ul>
常规方法
技巧一:智能保存文件 选择目标文件夹 需要启用自动解码功能
智能保存文件 文件按照 url 地址的组织保存
<ul><li>WHY </li></ul>
开发阶段 <ul><li>XHR 跨域 </li></ul><ul><li>文件合并 </li></ul><ul><li>后台接口 </li></ul>
<ul><li>HOW </li></ul>
文件夹替换 <ul><li>Match 中的 URL 必须以“ / ” 结尾,同时 Action 中的 Path 必须以“  ” 结尾 </li></ul>
约定后台接口
智能文件合并 支持 qzmin , willow 格式的合并文件
智能文件合并 表明此文件是合并后生成的
智能文件合并 合并后的文件 Willow 会检测文件的更改,根据需要生成合并文件
Qzmin 格式
联调阶段 <ul><li>HOST 切换 </li></ul><ul><li>数据不符合规范 </li></ul>
<ul><li>HOW </li></ul>
右键菜单 选中 HOST ,点击右键
管理 Host 支持一对多
支持通配符 支持 * ?通配符
JSON Viewer 支持 Unicode 编码( uxxxx )
Table  视图 数组结构 Table 形式显示
Table 对象链接 双击链接到对象节点
JSON Viewer <ul><li>后台接口开发完成,先自测 </li></ul><ul><li>使用 JSON Viewer 来检查接口数据 </li></ul>
测试阶段 <ul><li>为啥总是有外网投诉? </li></ul><ul><li>我在公司就无法重现? </li></ul>
<ul><li>WHY </li></ul>
模拟低网速
自定义限制网速 请求延时: k/s 响应延时: k/s
发布阶段
SOS  紧急 BUG
格式化文件 <ul><li>目前支持格式化  HTML , CSS , JavaScript </li></ul><ul><li>基于 JSBeautifier (   http://jsbeautifier.org/  ) </li></ul>
其他技巧 <ul><li>清理缓存 </li></ul><ul><li>图片 base64 编码 </li></ul><ul><li>BOM 检查 </li></ul><ul><li>HTTP 协议校验 </li></ul>
<ul><li>Ctrl </li></ul><ul><li>Shift </li></ul><ul><li>X </li></ul>+ +
<ul><li>base64 </li></ul>
base64 vs CSS sprites <ul><li>缺点: </li></ul><ul><ul><li>+33.33% </li></ul></ul><ul><ul><li>部分浏览器不支持 * </li></ul></ul><ul><...
HOW
<ul><li>BOM </li></ul>
Willow 提示
HOW
<ul><li>HTTP </li></ul>
Fiddler 提示
HOW
欢迎联系 <ul><li>[email_address] </li></ul><ul><li>t.qq.com/yunishi </li></ul>
Upcoming SlideShare
Loading in...5
×

Web rebuild

5,490

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,490
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
63
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web rebuild

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

    Clipping is a handy way to collect important slides you want to go back to later.

×