使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS。
7CC1873D-2F8E-4C05-BD0E-27C8F43A96DA.png
1. 定位代码和视图
点击左上角的箭头图标进入选择元素模式，然后从页面选中需要查看的元素，然后可以在开发者工具元素一栏定位到该元素的具体位置。选中第二个图标，在Elements中选中代码，可以看到元素对应的视图。
DBFD80F5-A40F-4174-B27D-EE498831E721.png
2. 编辑Dom
要实时编辑 DOM 节点，只需双击[选定元素]，然后进行更改或者选中节点，右键
290884DB-D559-44C0-BAD9-706371B1A560.png
DOM 树视图会显示树的当前状态；可能会与最初因其他原因加载的 HTML 不匹配。 例如，您可以使用 JavaScript 修改 DOM 树；浏览器引擎会尝试修正无效的作者标记并生成意外的 DOM。
3. 修改元素的代码和属性
选中元素，然后查看右键菜单，可以看到Chrome提供的可对元素进行的操作：包括添加属性，编辑属性和HTML,删除元素，设置断点,隐藏元素，删除元素，拖动排序等
3DCCC984-F91A-4218-9123-CF343EDBAB28.png
在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改，包括属性修改，节点删除，子树修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。
元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数），大大提高开发维护的效率。
在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。
在 Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与 User Agent 样式表一样）。要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改。
EF885C00-BF37-450F-881B-DB369C0E1EEE.png
默认情况下，您的 CSS 修改不是永久的，重新加载页面时更改会丢失。 如果您想要在页面加载时保留更改，请设置永久保存
在 Computed 窗格中查看和修改选定元素的框模型。
使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。
EC85AE02-C2C1-49CC-8F94-73B10F83B8BF.png
同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。
对于位置为非静态的元素，还会显示 position 矩形，包含 top、right、bottom 和 left 属性的值。
290884DB-D559-44C0-BAD9-706371B1A560.png
对于 position: fixed 和 position: absolute 元素，中心域包含选定元素实际的 offsetWidth × offsetHeight 像素尺寸。所有值都可以通过双击修改，就像 Styles 窗格中的属性值一样。 不过，无法保证这些更改能够生效，因为这要取决于具体的元素定位详情。
D073C7D5-6933-46CC-96ED-21150379DBCA.png
在 Sources 面板中查看在本地对页面所做的更改。
要查看对页面所做实时编辑的历史记录，请执行以下操作：
- 在 Styles 窗格中，点击您修改的文件。DevTools 会将您带到 Sources 面板。
- 右键点击文件。
- 选择 Local modifications。
要探索所做的更改，请执行以下操作
- 展开顶级文件名查看做出修改的时间。
- 展开第二级项目查看修改相应的[不同]。
粉色背景的线表示移除，绿色背景的线表示添加。
撤消更改
如果您未设置永久保存，每次您重新加载页面时，所有的实时编辑都会丢失。
假设您已设置了永久制作，要撤消更改，请执行以下操作：
使用 Ctrl+Z (Windows)或 Cmd+Z (Mac)通过Elements 面板快速撤消对DOM 或样式所做的细微更改。
要撤消对文件所做的所有本地修改，请打开 Sources 面板，然后选择文件名旁的 revert。
网友评论