前端调试工具,编码相关,性能相关

1. 前端调试、编码、性能
2011-04-06

2. • 拔赤
淘宝前端开发工程师
http://jayli.github.com

3. 我们都是善良的 Web Developer

4. BUT…
• 又要检查标签配对
• 每次修改脚本，传到测试环境才看到效果
• 调试压缩后的脚本
• 根据IE丑陋的报错定位到错误位置
• 缓存总是在捣乱
• 有没有工具来批量压缩脚本
• …

7. Firebug
• firefox 插件
• 调试样式、布局
• debug JavaScript
• 查看网络情况
• 一批基于firebug的插件扩展

8. 选中DOM高光显示
选取DOM元素
选中DOM元素的样式
DOM的HTML代码
选中DOM元素的
DOM方法

9. 执行过的js代码会显示在这里
执行结果
键入js代码后回车
可以看到运行结果

10. 4，脚本继续执行 断点控
的控制 制面板
1，选择要调试的脚本文件
2，先设置断点，然后刷新页面
预览当前堆栈中
的变量
3，鼠标hover当前行的变
量，可以查看变量的值

11. 请求列表 选择请求类型 请求队列
单个请求的详情

12. Fiddler
• 监控http请求
• 劫持http包，修改http头等信息
• 做本地文件映射

13. HTTP请求详情
截获到的HTTP请求

14. 本地文件映射

15. YSlow
• 监控页面性能
• 查找页面瓶颈
• 辅助调试页面

16. 点击此处开始

17. 页面性能评分
查看页面瓶颈

18. 页面缓存后重量
页面重量

19. 语法检查报告
检查JS语法

20. 展开后的脚本
展开js脚本

21. 图片优化

22. 下载优化后的
图片成
每张图片的压
缩比例

23. IE Developer ToolBar
• 调试IE下的布局、样式
• 模拟ie7、8的渲染效果

24. 操作菜单
跟踪元素样式
选取页面元素
查看DOM

25. 页面中会高亮显示
每个class和id
查看容器的
class和id

26. 窗口中显示div的边界
查看页面中的div轮廓

27. 测试不同的分辨率

28. 脚本控制台面板
继续执行的控制
查看执行结果
设置断点，刷新页面
输入执行语句并回车

29. 查看当前堆栈中的变量
输入要查看的变量

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

31. HTTP Watch
• 查看页面渲染关键时间点
• 兼容firefox和ie
• 查看 http 瀑布

32. http请求队列
红线：DomReady时间
绿线：首次渲染时间
页面加载的关键时间点
和http请求状态详情

33. Chrome Developer
Tools
• 调试更多高级特性(html5/本地存储)
• 调试CPU和内存的使用率
• 查看页面的reflow

34. 查看页面的reflow

35. 特定时间内 内存消耗情况

36. 特定时间内CPU消耗情况

37. 人人都是Ninja!

38. 压缩后的js文件报错
用IEDeveloperToolBar看看先
压缩后的代码无法直接debug

39. 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替换？

40. 开动脑筋

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

42. • IE对乱码极其敏感
• 浏览器缓存是否清除
• JS代码是否通过了语法检查(JSLint)
•…

43. 前端性能！

44. 我们的标准！

45. 编码？性能？
To be continue…

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