Chrome开发者工具教程

1、使用Elements面板通过自由操作DOM和CSS来反复调整您的网站的布局和设计。

2、检查和编辑页面与样式-检查和实时编辑 DOM 树中的任何元素(html标签)。要实时编辑 DOM 节点，只需双击选定元素，然后进行更改。DOM 树视图会显示树的当前状态；可能会与最初因其他原因加载的 HTML 不匹配。 例如，您可以使用 JavaScript 修改 DOM 树；浏览器引擎会尝试修正无效的作者标记并生成意外的 DOM。

3、检查和编辑页面与样式-实时编辑样式。在"Styles"窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与用户代理样式表一样）。要编辑名称或值，请点击它，进行更改，然后按 Tab 或 Enter 保存更改。默认情况下，您的 CSS 修改不是永久的，重新加载页面时更改会丢失。 如果您想要在页面加载时保留更改，请设置永久制作。

4、检查和编辑页面与样式-检查和编辑框模型参数。使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。同轴矩形包含当前元素 padding、border 和 margin 属性的 top、bottom、left、right 值。

5、检查和编辑页面与样式-撤消更改。如果您未设置永久制作，每次您重新加载页面时，所有的实时编辑都会丢失。假设您已设置了永久制作，要撤消更改，请执行以下操作：(1)使用 Ctrl+Z (Windows) 或 Cmd+Z (Mac) 通过 Elements 面板快速撤消对 DOM 或样式所做的细微更改。(2)要撤消对文件所做的所有本地修改，请打开 Sources 面板，然后选择文件名旁的 revert。

6、编辑样式。利用 Styles 窗格，您可以在本地以尽可能多的方法更改 CSS，包括修改现有样式、添加新样式，以及为样式添加规则。如果您希望样式可以保持（不会在重新加载后消失），则需要将其保存到您的开发工作区中。

7、编辑样式-检查应用到元素的样式。选择一个元素以检查其样式。 Styles 窗格可以显示应用到选定元素的 CSS 规则，优先级从高到低。下图上的标签与下方带编号的剐疫柩缓项目对应。(1)与元素匹配的选择器的关联样式。(2)用户代理样式表清晰标记，并且在网页上经常被 CSS 替换。(3)已被级联规则替换的规则将显示为带删除线的文本。(4)继承的样式将在“Inherited from <NODE>”标头下显示为一组。点击标头中的 DOM 节点可以导航到其在 DOM 树视图中的位置。(5)灰色的条目不是已定义的规则，而是在运行时计算的规则。

8、编辑样式-编辑现有属性名称或值。点击 CSS 属性名称或值可以对其进行编辑。在名称或值突出显示时，按 Tab 可以向前移动到下一个属性、名称或选择器。按 Shift+Tab 可以向后移动。编辑数字式 CSS 属性值时，可以使用下面的键盘快捷键增大和减小值：(1)使用向上键和向下键能够以 1 为增量增大和减小值（如果当前值介于 -1 和 1 之间，则增量为 0.1）。(2)使用 Alt+向上键和 Alt+向下键能够以 0.1 为增量增大和减小值。(3)使用 Shift+向上键能够以 10 为增量增大值；使用 Shift+向下键能够以 10 为增量减小值。(4)使用 Shift+Page Up（Windows、Linux）或 Shift+Function+向上键 (Mac) 能够以 100 为增量增大值。使用 Shift+Page Down（Windows、Linux）或 Shift+Function+向下键 (Mac) 能够以 100 为增量减小值。

9、编辑DOM。Chrome 开发者工具的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构。通过 DOM 更新实时修改页面的内容和结构。

10、编辑DOM-检查元素。使用 Elements 面板可以在一个 DOM 树中检查页面中的所有元素。 选择任何元素并检查应用到该元素的样式。

11、编辑DOM-DOM 导航。(1)点击一次可以突出显示节点。(2)要展开节点，请双击节点上的任何地方，或者点击节点旁边的箭头。(3)要折叠节点，请点击节点旁边的箭头。