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

  • 1,676 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • necesito aprender ingles....urgente
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,676
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
138
Comments
1
Likes
9

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/