Your SlideShare is downloading. ×
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,733

Published on

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×