Chrome DevTools攻略（MD编辑器）

​
目录

Chrome DevTools 概览

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

访问 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元素，资源和源码。

DevTools现已经支持内置颜色选择器…

DevTools目前主要包括以下八个主要功能组：

Elements
Resources
Network
Sources
Timeline
Profiles
Audits<