site
stats
1 min read

Google大神分享Chrome开发者工具技巧

Chrome不仅仅是一款优秀的网页浏览器,Google的工程师们还为其打造了强大的开发者工具。来自Google的Ilya Grigorik为我们分享了如何使用Chrome开发者工具(DevTools)分析HTML网页加载的问题,介绍了很多实用技巧。

绚丽的网页PPT传送门《Wait, DevTools could do THAT?》

什么是Chrome开发者工具(DevTools)?

随意打开一个网页,在任意处鼠标右键,点击“审查元素”(Inspect Element),在浏览器下方出现的东西就是。本质上Chrome开发者工具也是一个HTML页面,只是浮动在当前页面上。

PPT精彩的介绍了:

  1. cmd-? 一秒变身键盘忍者,完全通过快捷键操纵
  2. 设置里可以Disable cache,方便调试
  3. 通过HAR,记录和导出网页加载的过程,保留下来分析
  4. Chrome开发者工具还可以通过js自定义功能
  5. 还可以自定义HTML代码的高亮颜色
  6. 深度跟踪渲染时间

想不到吧?Chrome还可以做这些?速度收藏。