Download as PDF, PPTX
Uploaded byjay li
前端调试工具,编码相关,性能相关
该文档探讨了前端开发中的调试工具和性能优化，重点介绍了 Firebug、Fiddler、YSlow 和 Chrome Developer Tools 等工具的使用。它们帮助开发人员检查脚本、监控 HTTP 请求和分析页面性能。文档还强调了对压缩脚本的调试和性能标准的关注。
More Related Content
前端调试工具,编码相关,性能相关
- 1. 前端调试、编码、性能 2011-04-06
- 2. • 拔赤 淘宝前端开发工程师 http://jayli.github.com
- 3.
- 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.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 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.
- 35.
- 36.
- 37.
- 38. 压缩后的js文件报错 用IEDeveloperToolBar看看先 压缩后的代码无法直接debug
- 39.
- 40.
- 41. 我们需要一个本地环境,模拟 combo,通过本地 展开的js进行调试
- 42. • IE对乱码极其敏感 • 浏览器缓存是否清除 •JS代码是否通过了语法检查(JSLint) •…
- 43.
- 44.
- 45.
- 46. ref • http://www.stevesouders.com/ • http://getfirebug.com • http://developer.yahoo.com/yslow/ • http://www.fiddler2.com/fiddler2/ • http://www.httpwatch.com/