0
前端调试、编码、性能         2011-04-06
• 拔赤 淘宝前端开发工程师 http://jayli.github.com
我们都是善良的 Web Developer
BUT…•   又要检查标签配对•   每次修改脚本,传到测试环境才看到效果•   调试压缩后的脚本•   根据IE丑陋的报错定位到错误位置•   缓存总是在捣乱•   有没有工具来批量压缩脚本•   …
Firebug• firefox 插件• 调试样式、布局• debug JavaScript• 查看网络情况• 一批基于firebug的插件扩展
选中DOM高光显示选取DOM元素              选中DOM元素的样式 DOM的HTML代码                    选中DOM元素的                     DOM方法
执行过的js代码会显示在这里            执行结果键入js代码后回车可以看到运行结果
4,脚本继续执行   断点控                    的控制     制面板1,选择要调试的脚本文件2,先设置断点,然后刷新页面                       预览当前堆栈中                     ...
请求列表   选择请求类型   请求队列   单个请求的详情
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请求队列        红线:DomReady时间绿线:首次渲染时间      页面加载的关键时间点       和http请求状态详情
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-p...
开动脑筋
我们需要一个本地环境,模拟  combo,通过本地  展开的js进行调试
• IE对乱码极其敏感• 浏览器缓存是否清除• JS代码是否通过了语法检查(JSLint)•…
前端性能!
我们的标准!
编码?性能?To be continue…
ref•   http://www.stevesouders.com/•   http://getfirebug.com•   http://developer.yahoo.com/yslow/•   http://www.fiddler2.c...
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
Upcoming SlideShare
Loading in...5
×

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

1,774

Published on

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

1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,774
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
149
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

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

  1. 1. 前端调试、编码、性能 2011-04-06
  2. 2. • 拔赤 淘宝前端开发工程师 http://jayli.github.com
  3. 3. 我们都是善良的 Web Developer
  4. 4. BUT…• 又要检查标签配对• 每次修改脚本,传到测试环境才看到效果• 调试压缩后的脚本• 根据IE丑陋的报错定位到错误位置• 缓存总是在捣乱• 有没有工具来批量压缩脚本• …
  5. 5. Firebug• firefox 插件• 调试样式、布局• debug JavaScript• 查看网络情况• 一批基于firebug的插件扩展
  6. 6. 选中DOM高光显示选取DOM元素 选中DOM元素的样式 DOM的HTML代码 选中DOM元素的 DOM方法
  7. 7. 执行过的js代码会显示在这里 执行结果键入js代码后回车可以看到运行结果
  8. 8. 4,脚本继续执行 断点控 的控制 制面板1,选择要调试的脚本文件2,先设置断点,然后刷新页面 预览当前堆栈中 的变量 3,鼠标hover当前行的变 量,可以查看变量的值
  9. 9. 请求列表 选择请求类型 请求队列 单个请求的详情
  10. 10. Fiddler• 监控http请求• 劫持http包,修改http头等信息• 做本地文件映射
  11. 11. HTTP请求详情截获到的HTTP请求
  12. 12. 本地文件映射
  13. 13. YSlow• 监控页面性能• 查找页面瓶颈• 辅助调试页面
  14. 14. 点击此处开始
  15. 15. 页面性能评分查看页面瓶颈
  16. 16. 页面缓存后重量页面重量
  17. 17. 语法检查报告检查JS语法
  18. 18. 展开后的脚本展开js脚本
  19. 19. 图片优化
  20. 20. 下载优化后的 图片成 每张图片的压 缩比例
  21. 21. IE Developer ToolBar• 调试IE下的布局、样式• 模拟ie7、8的渲染效果
  22. 22. 操作菜单 跟踪元素样式选取页面元素 查看DOM
  23. 23. 页面中会高亮显示 每个class和id 查看容器的 class和id
  24. 24. 窗口中显示div的边界 查看页面中的div轮廓
  25. 25. 测试不同的分辨率
  26. 26. 脚本控制台面板继续执行的控制 查看执行结果设置断点,刷新页面 输入执行语句并回车
  27. 27. 查看当前堆栈中的变量 输入要查看的变量
  28. 28. 探测器面板,查看特定时间 段函数执行情况
  29. 29. HTTP Watch• 查看页面渲染关键时间点• 兼容firefox和ie• 查看 http 瀑布
  30. 30. http请求队列 红线:DomReady时间绿线:首次渲染时间 页面加载的关键时间点 和http请求状态详情
  31. 31. Chrome Developer Tools• 调试更多高级特性(html5/本地存储)• 调试CPU和内存的使用率• 查看页面的reflow
  32. 32. 查看页面的reflow
  33. 33. 特定时间内 内存消耗情况
  34. 34. 特定时间内CPU消耗情况
  35. 35. 人人都是Ninja!
  36. 36. 压缩后的js文件报错 用IEDeveloperToolBar看看先压缩后的代码无法直接debug
  37. 37. 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替换?
  38. 38. 开动脑筋
  39. 39. 我们需要一个本地环境,模拟 combo,通过本地 展开的js进行调试
  40. 40. • IE对乱码极其敏感• 浏览器缓存是否清除• JS代码是否通过了语法检查(JSLint)•…
  41. 41. 前端性能!
  42. 42. 我们的标准!
  43. 43. 编码?性能?To be continue…
  44. 44. ref• http://www.stevesouders.com/• http://getfirebug.com• http://developer.yahoo.com/yslow/• http://www.fiddler2.com/fiddler2/• http://www.httpwatch.com/
  1. A particular slide catching your eye?

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

×