基础
额外资源
使用工具
检查与调整
- Chrome 开发工具 编辑样式以及 DOM
- Chrome 开发工具 使用 CSS 预处理器
- Chrome 开发工具 管理应用存储空间
- Chrome 开发工具 调试 JavaScript 脚本
- Chrome 开发工具 设备模式 & 移动仿真
- Chrome 开发工具 在安卓设备上使用 Chrome 远程调试功能
- Chrome 开发工具 通过工作空间保存更改
性能 和 特点
- Chrome 开发工具 评估网络性能
- Chrome 开发工具 使用时间轴
- Chrome 开发工具 时间轴示例
- Chrome 开发工具 分析 JavaScript 性能
- Chrome 开发工具 JavaScript 内存分析
参考
Chrome 开发工具 视频
视频 Videos
以下的视频将帮助你学习谷歌浏览器的开发工具:
开始
下面的视频描述了如何开始使用开发工具、开发工具窗口内的面板以及交互控制台。
视频地址: https://www.youtube.com/watch?v=7cqh7MGLgaM
检测元素和资源
下面的视频介绍了如何:
- 检查元件
- 更改样式属性
- DOM 属性编辑
- 查看和编辑位置度量
- 查看网络活动的时间线
- 查看 XHR 信息。
视频地址: https://www.youtube.com/watch?v=Mhb4n0yGYT4
调试 JavaScript
下面的视频介绍了图形界面的 V8 调试器如何测试:
- 设置断点
- 暂停
- 通过代码缩放
- 执行代码
- 查看当前调用堆栈和范围变量
视频地址: https://www.youtube.com/watch?v=c_oiQYirKuY
分析与优化
下面的视频介绍了如何使用内置的 CPU 和堆分析器了解那里的资源耗费情况,以此帮助你优化你的代码。
视频地址: https://www.youtube.com/watch?v=OxW1dCjOstE
时间轴面板
下面的视频介绍了如何使用时间轴面板来获取信息,在您加载网页应用程序或页面时,时间是怎么消耗的。
视频地址: https://www.youtube.com/watch?v=RhaWYQ44WEc
成为一个会使用 JavaScript 控制台的用户
提升对 Chrome 开发工具的掌握能力,看看 XHR 请求,学习控制台辅助函数更好地监视事件或对象。Chrome 团队的 Paul Irish 将会给你介绍一下。
视频地址: https://www.youtube.com/watch?v=4mf_yNLlgic
2011 谷歌 IO 大会
下面的视频是在谷歌 IO 2011 届 IO 大会上讨论 Chrome 开发工具时记录的。
视频地址: https://www.youtube.com/watch?v=N8SS-rUEZPg
2010 谷歌 IO 大会
下面的视频是在 2010 谷歌 IO 大会上的 Chrome 开发工具环节记录的。
视频地址: https://www.youtube.com/watch?v=TH7sJbyXHuk
2012 谷歌 IO 大会:Chrome 开发者工具的演变
下面是 Pavel Feldman 和 Sam Dutton 提出的最新的开发工具的特点综述:移动调试,编辑,新的时间表“帧模式”等等。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论