一、如何调出开发者工具

在浏览器页面上

F12 键 ( 笔记本电脑 Fn + F12)

右键选择 检查(N)

快捷键 Ctrl + Shift + i

二、开发者工具初步介绍

开发者工具最常用的四个功能模块：

元素（ ELements ）、控制台（ Console ）、源代码（ Sources ），网络（ Network ）。

本次我们就来介绍一下 元素模块

元素（ Elements ）

查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、 CSS 属性、监听事件以及断点等等 .

查看元素的代码

点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C ）进入选择元素模式，从页面中选择需要查看的元素，可以在开发者工具元素（ Elements ）一栏中定位到该元素源代码的具体位置。

查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。

修改元素的代码与属性

点击元素，然查看右键菜单，可以看到 chrome 提供的可对元素进行的操作：包括编辑元素代码（ Edit as HTML ）、修改属性（ Add attribute 、 Edit attribute ）等。选择 Edit as HTML 选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

「注意：」

这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

给元素添加断点

在元素的右键菜单中选择断点选项（ Break on …），选中之后，当元素被修改（通常是被 JS 代码修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的 DOM Breakpoints 页面中看到，这个页面可以看到当前网页的所有元素断点。

分为 子树修改断点、属性修改断点和节点移除断点

子树修改断点是 添加、移除或移动子元素时将触发子树修改断点。

属性修改断点是 动态更改元素的属性将发生属性修改（例如）

节点移除断点：从 DOM 中移除有问题的节点时将触发节点移除修改

查看元素的监听事件

元素的右边栏的 Event Listener 页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的 JS 文件以及在该文件中的具体位置（行数）。