前端调试、编码、性能

2011-04-06

• 拔赤淘宝前端开发工程师

http://jayli.github.com

我们都是善良的 Web Developer

• 又要检查标签配对

• 每次修改脚本，传到测试环境才看到效果

• 调试压缩后的脚本

• 根据IE丑陋的报错定位到错误位置

• 缓存总是在捣乱

• 有没有工具来批量压缩脚本

• …

BUT…

Firebug

• firefox 插件

• 调试样式、布局

• debug JavaScript

• 查看网络情况

• 一批基于firebug的插件扩展

选中DOM高光显示

选取DOM元素

DOM的HTML代码

选中DOM元素的样式

选中DOM元素的DOM方法

执行过的js代码会显示在这里

执行结果

键入js代码后回车可以看到运行结果

1，选择要调试的脚本文件

2，先设置断点，然后刷新页面

3，鼠标hover当前行的变量，可以查看变量的值

4，脚本继续执行的控制

断点控制面板

预览当前堆栈中的变量

请求列表 选择请求类型 请求队列

单个请求的详情

Fiddler

• 监控http请求

• 劫持http包，修改http头等信息

• 做本地文件映射

截获到的HTTP请求

HTTP请求详情

本地文件映射

YSlow

• 监控页面性能

• 查找页面瓶颈

• 辅助调试页面

点击此处开始

页面性能评分

查看页面瓶颈

页面重量

页面缓存后重量

检查JS语法

语法检查报告

展开js脚本

展开后的脚本

图片优化

下载优化后的图片成

每张图片的压缩比例

IE Developer ToolBar

• 调试IE下的布局、样式

• 模拟ie7、8的渲染效果

选取页面元素查看DOM

跟踪元素样式

操作菜单

查看容器的class和id

页面中会高亮显示每个class和id

查看页面中的div轮廓

窗口中显示div的边界

测试不同的分辨率

设置断点，刷新页面

继续执行的控制

输入执行语句并回车

查看执行结果

脚本控制台面板

查看当前堆栈中的变量

输入要查看的变量

探测器面板,查看特定时间段函数执行情况

HTTP Watch

• 查看页面渲染关键时间点

• 兼容firefox和ie

• 查看 http 瀑布

页面加载的关键时间点和http请求状态详情

http请求队列

绿线：首次渲染时间

红线：DomReady时间

Chrome Developer

Tools

• 调试更多高级特性(html5/本地存储)

• 调试CPU和内存的使用率

• 查看页面的reflow

查看页面的reflow

特定时间内 内存消耗情况

特定时间内CPU消耗情况

人人都是Ninja!

压缩后的js文件报错

用IEDeveloperToolBar看看先

压缩后的代码无法直接debug

http://a.tbcdn.cn/s/kissy/1.1.7/??uibase/uibase-pkg-min.js,dd/dd-pkg-min.js,overlay/overlay-pkg-min.js,editor/editor-all-pkg-min.js,editor/biz/ext/editor-plugin-pkg-min.js

这种合并后的脚本引用怎么用fiddler替换？

开动脑筋

我们需要一个本地环境,模拟combo,通过本地展开的js进行调试

• IE对乱码极其敏感

• 浏览器缓存是否清除

• JS代码是否通过了语法检查(JSLint)

• …

前端性能！

我们的标准！

编码？性能？

To be continue…

ref

• http://www.stevesouders.com/• http://getfirebug.com • http://developer.yahoo.com/yslow/• http://www.fiddler2.com/fiddler2/• http://www.httpwatch.com/