codecamp

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 提出的最新的开发工具的特点综述:移动调试,编辑,新的时间表“帧模式”等等。

视频地址:https://www.youtube.com/watch?v=3pxf3Ju2row

Chrome开发工具 技巧和窍门
Chrome开发工具 博客帖子
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Chrome开发工具 使用工具

Chrome开发工具 调试 JavaScript 脚本

Chrome开发工具 设备模式 & 移动仿真

Chrome开发工具 在安卓设备上使用 Chrome 远程调试功能

Chrome开发工具 通过工作空间保存更改

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }