Download pdf - 石玉磊 Web rebuild

Transcript
Page 1: 石玉磊 Web rebuild

Web前端开发实用工具

Qzone产品中心

yunishiyunishi

前端开发实用工具

产品中心

yunishiyunishi

Page 2: 石玉磊 Web rebuild

About About yuni

爱生活爱生活爱生活爱生活爱生活爱生活爱生活爱生活

爱旅游爱旅游爱旅游爱旅游

爱折腾爱折腾爱折腾爱折腾

爱复制爱复制爱复制爱复制

爱分享爱分享爱分享爱分享爱分享爱分享爱分享爱分享

爱前端爱前端爱前端爱前端

[email protected]

Page 3: 石玉磊 Web rebuild

FiddlerFiddler

Page 4: 石玉磊 Web rebuild

WillowWillow

Page 5: 石玉磊 Web rebuild

适用范围

• Window平台,Mac平台

• .NET 2.0 •需要 .NET 2.0 环境

•所有的浏览器

适用范围

平台*

Page 6: 石玉磊 Web rebuild

项目开发过程项目开发过程

Page 7: 石玉磊 Web rebuild
Page 8: 石玉磊 Web rebuild

预研阶段

•你需要个榜样,标杆。

预研阶段

Page 9: 石玉磊 Web rebuild

他他

Page 10: 石玉磊 Web rebuild

还是他还是他?

Page 11: 石玉磊 Web rebuild

SNS网站网站

Page 12: 石玉磊 Web rebuild
Page 13: 石玉磊 Web rebuild

常规方法常规方法

Page 14: 石玉磊 Web rebuild

技巧一:智能保存文件

需要启用自动需要启用自动需要启用自动需要启用自动

解码功能解码功能解码功能解码功能

智能保存文件

选择目标文选择目标文选择目标文选择目标文

件夹件夹件夹件夹件夹件夹件夹件夹

Page 15: 石玉磊 Web rebuild

智能保存文件

文件按照文件按照文件按照文件按照

智能保存文件

文件按照文件按照文件按照文件按照url地址地址地址地址

的组织保存的组织保存的组织保存的组织保存

Page 16: 石玉磊 Web rebuild
Page 17: 石玉磊 Web rebuild

开发阶段

• XHR跨域问题

••后台接口

开发阶段

Page 18: 石玉磊 Web rebuild
Page 19: 石玉磊 Web rebuild

文件夹替换

Match URL “Match中的URL必须以“

的Path必须以“\”结尾

文件夹替换

“/” Action“/”结尾,同时Action中

结尾

Page 20: 石玉磊 Web rebuild

约定后台接口约定后台接口

Page 21: 石玉磊 Web rebuild

联调阶段

• HOST切换

••数据不符合规范

联调阶段

Page 22: 石玉磊 Web rebuild
Page 23: 石玉磊 Web rebuild

右键菜单右键菜单

选中选中选中选中HOST,,,,

点击右键点击右键点击右键点击右键

Page 24: 石玉磊 Web rebuild

管理HostHost

支持一对多支持一对多支持一对多支持一对多

Page 25: 石玉磊 Web rebuild

支持通配符支持通配符

支持支持支持支持*????通配符通配符通配符通配符

Page 26: 石玉磊 Web rebuild

JSON Viewer

支持支持Unicode

JSON Viewer

)Unicode编码(\uxxxx)

Page 27: 石玉磊 Web rebuild

Table

数组结构数组结构数组结构数组结构Table形式显示形式显示形式显示形式显示

Table 视图

形式显示形式显示形式显示形式显示

Page 28: 石玉磊 Web rebuild

Table对象链接对象链接

双击链接到对象节点双击链接到对象节点双击链接到对象节点双击链接到对象节点

Page 29: 石玉磊 Web rebuild

JSON Viewer

•后台接口开发完成,先自测

• JSON Viewer•使用JSON Viewer来检查接口数据

JSON Viewer

先自测

来检查接口数据

Page 30: 石玉磊 Web rebuild

测试阶段

•为啥总是有外网投诉?

••我在公司就无法重现?

测试阶段

Page 31: 石玉磊 Web rebuild
Page 32: 石玉磊 Web rebuild

模拟低网速模拟低网速

Page 33: 石玉磊 Web rebuild

自定义限制网速

请求延时请求延时请求延时请求延时::::

k/s

响应延时响应延时响应延时响应延时

自定义限制网速

响应延时响应延时响应延时响应延时::::

k/s

Page 34: 石玉磊 Web rebuild

发布阶段发布阶段

Page 35: 石玉磊 Web rebuild

SOS 紧急紧急BUG

Page 36: 石玉磊 Web rebuild

格式化文件

•目前支持格式化 HTML

•基于JSBeautifier( http://jsbeautifier.org/

格式化文件

HTML,CSS,JavaScript

http://jsbeautifier.org/ )

Page 37: 石玉磊 Web rebuild

其他技巧

•清理缓存

• base64•图片base64编码

• BOM检查

• HTTP协议校验

其他技巧

Page 38: 石玉磊 Web rebuild

Ctrl+

Shift+

+

X+

Ctrl+

Shift+

+

X+

Page 39: 石玉磊 Web rebuild
Page 40: 石玉磊 Web rebuild

base64 vs CSS

•缺点:

+33.33%+33.33%

部分浏览器不支持*

•优点:

gzip

无颜色种类限制无颜色种类限制

更少的请求数

本地存储

内存和cpu

CSS sprites

Page 41: 石玉磊 Web rebuild

HOWHOW

Page 42: 石玉磊 Web rebuild
Page 43: 石玉磊 Web rebuild
Page 44: 石玉磊 Web rebuild

WillowWillow提示

Page 45: 石玉磊 Web rebuild

HOWHOW

Page 46: 石玉磊 Web rebuild
Page 47: 石玉磊 Web rebuild
Page 48: 石玉磊 Web rebuild
Page 49: 石玉磊 Web rebuild

FiddlerFiddler提示

Page 50: 石玉磊 Web rebuild

HOWHOW

Page 51: 石玉磊 Web rebuild

关于WebWeb前端开发

Page 52: 石玉磊 Web rebuild

Q&AQ&AQ&AQ&A