Chrome开发者工具（简称DEVTools）是内嵌于Google Chrome浏览器中的一组网页制作和调试工具，熟练使用开发者工具的前提是熟知其各个模块所代表的的意义和作用。下面将结合学习和开发中的经历，对各个模块的展开介绍，不足之处望批评指正。右键选择检查或者直接按F12键，常用模块如图：
开发者工具常用面板
图中，Chrome开发者工具主要包括Elememts、Console、Sources、Network、Performance、Memory、Application、Security、Audites和Layers10个功能面板。其中和调试页面相关的的面板有Elememts、Console、Sources等，和性能相关的面板主要是Network、Performance等。各面板的大致功能划分如下[1]：
Elements面板：可以查看DOM结构、编辑CSS样式，用于测试页面布局和设计页面；
Console面板：可以看成是JavaScript Shell，能执行JavaScript脚本，通过Console还能和页面中的Javascript对象交互；
Sources面板：查看Web应用加载的所有文件；编辑CSS和JavaScript文件内容；将打乱的CSS或者JavaScript格式化；支持JavaScript的调试功能；设置工作区，将更改的文件保存到本地文件夹中；
Network面板：展示页面中所有的请求内容列表，能查看每项的请求头、请求行、请求体、时间线以及网络请求的瀑布图等信息；
Performance面板：记录和查看应用生命周期中的各种事件，并用来分析在执行过程中一些影响性能的要点；
Memory面板：用来查看运行过程中JavaScript占用堆内存的情况，追踪是否存在内存泄漏的情况等；
Application面板：查看Web应用的数据存储情况；PWA的基础数据；IndexedDB；Web SQL；本地和会话存储；Cookie；应用程序缓存图像字体和样式表等；
Security面板：显示当前页面一些基础安全信息；
Audites面板：会对当前网页进行网络应用情况和网页性能方面的诊断，并给出一些优化建议；
Layers面板： 展示一些渲染过程中分层的基础信息。
下面将对几个常用模块的功能做出解释：
1、Elements面板
Elements面板主要是用于DOM结构查看和编辑CSS样式，开发阶段测试页面布局时经常用到。下图中，Elements面板中显示的HTML文件和浏览器渲染过程中构建的DOM树结构基本一致（图中右侧图片是在Console中直接输入document直观展示完整的DOM结构），不同之处在于前者无法直接被浏览器理解和使用，而后者是保存在内存中的树状，可以通过JavaScript来查询和修改。
HTML文件 HTML文件对应的DOM树
除了上述查看DOM树的基本功能外，可以通过单击鼠标右键，对DOM节点实现增加、删除和修改操作。如下图，自上而下分别表示：Add attribute 添加属性；Edit attribute：编辑属性；Edit as HTML：编辑该节点及其子节点的所有HTML元素（包括节点中的文本）；Delete element：删除元素；Hide element：删除元素；Force state：将右侧显示的样式添加到选中元素的style中；Break on：设置DOM断点（包括Subtree Modifications子树修改，Attribute Modifications 属性修改；Node Removal 节点移除）；Expand recursively：展开DOM树；Collapse children：折叠元素；Scroll into view：滚动页面以使节点显示在视口中。
DOM编辑菜单
在调试样式阶段，Elements面板的各个子标签的功能如下。
- Styles（样式）：直观反映CSS（Cascading Style Sheets）样式的继承和层叠特性和计算过程过程；
- Computed（计算）：查看当前节点经过计算后的样式以及盒模型数据；
- Event Listeners（事件监听）：查看为当前节点绑定的事件和事件监听函数；
- DOM Breakpoints（DOM断点）：查看为当前节点设置的DOM断点；
- Properties（属性）：显示当前节点（对象）的所有属性；
- Accessibility：查看整个页面中的Accessibility Tree。
首先，对于Styles子标签的使用，下图以hao123网址导航中a标签的样式为例：
（1）页面中选中的要查看的a标签；
（2）表示选择器找到对应元素的路径；
（3）表示选择器找到对应元素过程中从相应父元素继承的样式；
（4）表示具体的样式，此区域功能丰富。可以通过取消样式前的勾选删除样式，亦可以在此区域双击新增样式，还可以挺过右上角的.cls为元素添加类，直观查看显示效果；
（5）表示样式的具体来源信息，点击对应文件链接可在Sources面板中查看样式文件。CSS样式的来源通常主要有：link标签引用的外部CSS文件、<style>标签内的CSS和元素的style属性内嵌的CSS；
注：（5）中的user agent stylesheet样式表是浏览器提供的一组默认样式，会在元素未被提供任何样式的情况下默认使用。
Elements-styles
其次，Computed子标签中显示了不同来源的CSS样式经过转换，最终计算出的每个DOM节点的样式，并保存在ComputedStyle结构中。使用时可以通过双击不同的位置(top、bottom、left、right) 来修改元对应素的padding、border、margin属性值，还可以通过Filter过滤器筛选需要查看的样式。
再次，Event Listeners子标签可用来查看绑定在元素上的事件，以及事件所在的文件位置；
最后，DOM Breakpoint、Properties和Accessibility使用相对较少。其中，Accessibility子标签可以查看整个页面中的Accessibility Tree，该 Tree 是DOM tree 的子集，对应节点是由对屏幕阅读器（screen reader）有关和有用的展示内容[2]。