Chrome DevTools攻略（话题文章）

目录

Chrome DevTools 概览

访问 DevTools

DevTools 窗口

审查DOM元素和样式

使用Console

调试 JavaScript

提高网络性能

监听

提高渲染性能

JavaScript & CSS 性能

审查存储

扩展阅读

扩展资源

---

Chrome DevTools 概览

Chrome开发者工具（简称DevTools）是一组网页制作和调试的工具，内嵌于Google Chrome浏览器中。DevTools使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用DevTools，可以更加高效的定位页面布局问题，设置JavaScript断点并且更好的理解代码优化。

注意: 如果你是一个web开发者并且希望获取最新版本的DevTools，你可以使用 Google Chrome Canary.

访问 DevTools

访问DevTools，首先用Chrome打开一个web页面或web 应用，也可以通过下面的方式：

• 在浏览器窗口的右上方选择Chrome菜单, 然后选择工具 > 开发者工具。
• 在页面上任意元素上右键，然后选择审查元素。

DevTools窗口会在Chrome浏览器的底部打开。

下面是一些有用的快捷键来快速的打开DevTools:

• 使用 Ctrl + Shift + I (Mac上为 Cmd+Opt+I)打开DevTools。
• 使用 Ctrl + Shift + J (Mac上为 Cmd+Opt+J)打开DevTools中的控制台
• 使用 Ctrl + Shift + C (Mac上为 Cmd+Shift+C)打开DevTools的审查元素模式。

为了日常工作，学习快捷键将帮助你节省更多的时间。

DevTools 窗口

DevTools 在窗口顶部的工具栏对不同的任务功能进行分组。在每个工具栏选项卡和对应的操作面板中，你可以处理某项特殊的任务，例如DOM元素，资源