Chrome开发工具 编辑样式以及 DOM

适用于当前 CSS 属性字段，你可以出输入一个新的属性。要添加新的属性并且在 CSS 属性字段中查看代码提示，请执行以下步骤：在 CSS 属性字段中输入内容，下拉框中会显示建议。按 Up 或者 Down 来选中某一条建议。要接受建议使用 Tab 键，右键或者 Enter 键。当你选择了一个有效的 CSS 属性后，将光标移动到 CSS 属性值字段以获取可关于使用的 CSS 值的建议。例如，对于属性 display，建议的值有 block，flex，none 等等。使用 Ctrl + V（或者在Mac上使用 Cmd+ V）来把 CSS 粘贴到样式面板中。属性和其值会被解析并放到正确的字段中。添加样式规则你可能会觉得在一个新的选择器中添加样式比较好。在样式面板的头栏中点击加号来创建新的 CSS 规则。在元素上触发伪类你可以使用伪类选择器为你的 UI 元素提供动态的样式，比如：hover。然而，这些动态的元素很难调试。所以 DevTools 允许你手动为各个元素设置伪类。你可以触发下面四个伪类的任意组合：:active - 适用于激活过程中的链接（例如，单机前）。:hover - 适用于当鼠标悬停在元素上方时。:focus - 适用于获得焦点的元素（比如，通过 Tab 键来获取焦点）。:visited - 适用于浏览器中已经浏览过的链接。如果要设置元素的状态的话：点击样式面板中 New Style Rule 旁边的 Toggle Element State 按钮。右键点击元素面板中的一个 DOM 节点然后选中 Force Element State。更改历史记录（本地修改）本地修改包含了对源文件代码，如 JavaScript 和 CSS 所做的修改。用以下方式来找到本地修改面板：打开源面板。右键（或者在 Mac 上使用 Ctrl + 鼠标点击）点击侧栏中的某个源文件。选择 Local modifications。要做出修改，在 Source 面板的编辑器里修改源代码即可。要对一个源自于外部样式表的 CSS 规则做出修改，请注意本地修改面板中的变化。注意：当你使用 New Style Rule 按钮的时候，新的 CSS 规则并不属于已经存在的样式表中。DevTools 把它添加到一个特殊的监视样式表中，这个监视样式表可以像其他文件一样在源面板中被修改。关于本地修改面板：展开顶层文件名，可以查看修改发生的时间展开第二级的项目来查看对应修改的不同之处（之前及之后的）。粉色背景的一行表示删除的部分，绿色背景的一行表示添加的部分。点击文件名排旁边的 revert 来撤销掉在该文件上的全部修改。你也可以使用 Ctrl + Z（或者在Mac上使用 Ctrl + Z）来迅速撤销在元素面板上对 DOM 或者样式的细小改动。Metrics 面板Metrics 面板直观阐述了样式是如何影响 CSS 盒子模型的。Metrics 面板显示了一组表示盒子维度的矩形，以此来表示 CSS 盒子模型。内部的内容框显示内容区域的尺寸，外部的边框，比如边界的边框，表示每个边缘的值：border-top（上边框），border-right（右边框），border-bottom（下边框），and border-left（左边框）。如果边缘没有设定值，将会用破折号（英文的）来代替。注意：如果你提供了一个非静态的值给 CSS 位置属性，那么 Metrics 面板中会显示标记的位置。Boxes （盒子）显示的内容可能是（自外向内）：position （位置）margin （边距）border （边界）padding （内边距）Content box （内容盒子，最内层，没有标记）通过以下技巧来使用 metrics 面板：鼠标悬停在盒子上方来使浏览器窗口中相应的区域高亮显示。编辑盒子内的字段（如果没有值则用破折号显示），该更改会在 element.style 部分中反映出来。