Chrome开发者工具详解 _Chrome开发者工具

chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。

元素（Elements）：用于查看或修改html元素的属性、css属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面
控制台（Console）：控制台一般用于执行一次性代码，查看JAVAScript对象，查看调试日志信息或异常信息。还可以当作JavaScript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行
源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。
1、元素（Elements）：这个部分主要是显示实时的DOM树。在页面中右键单击" 审查元素 "，就会出现Elements的面板。
查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置
查看元素的属性：定位到元素的源代码之后，可以从源代码中读出该元素的属性。如下图中的class、src、width等属性的值。

文章插图

在一个DOM节点上点击右键就会出现一个菜单，一共分为4部分

文章插图

第一部分是添加和编辑节点的属性，例如class等。
第二部分是编辑节点，点击Edit as HTML，就可以像在编辑器中一样编写代码，Copy as HTML就是复制代码了，Delete node是整个删除节点。
第三部分是添加DOM的断点（给元素添加断点）
如果我们添勾选了任何一个，就会在右边栏的第五部分DOM breakpoints出现，这个页面可以看到当前网页的所有元素断点。当元素被修改（通常是JS代码修改），如果出现对应的事件（节点子树改变、节点属性改变、节点被移除），那么页面加载就会暂停，JS就会在相应的事件监听函数那里挂起。

文章插图

文章插图

底部显示的是一个当前元素的所有祖先元素。例如，上图中当前元素是body，它的祖先元素是html（也是父级元素），如果html有父级元素，仍然会显示html的父级元素（这里例子有点特殊）。
接下来看看右边栏。一共有6部分，分别是：Computed Style、Styles、Metrics、Properties、DOM Breakpoints、Event Listeners 。Computed Style显示的是所选元素的最终样式，如果勾选了Show all，将会显示此元素的所有style属性，Computed Style中的属性是该元素经过计算之后的所有CSS属性，即最后浏览器渲染页面时使用的属性是只读的，不能实时修改，所以主要用来查看元素的最终属性值，属性的计算由浏览器自动进行，是浏览器渲染页面的一个必不可少的过程。
而第二部分Styles估计是用得最多的。这里会显示作用在所选元素的所有css规则，包含css文件中的样式规则，还有user stylesheet和user agent stylesheet的样式。样式按照权重的大小排列，最上面的是权重最高的，下面是权重低的。最上面的element.style是元素的内嵌样式。user stylesheet是用户样式，不过一般不会有人自定义样式。user agent stylsheet是浏览器的默认样式，通常的css reset就是将这个reset掉。背景不是灰色的部分是可以修改的样式，我们对样式的修改会实时显示在页面中，这就省去了我们为了修改几个像素去修改css文件然后保存刷新的过程，同时也可以禁用和启用某些样式。在Styles的标题栏有一个鼠标箭头的图标，点击之后就会出现伪类，因为一般情况下不会出现伪类的css规则。