Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

  • Be the first to comment

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>

×