Chrome开发者工具教程

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

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

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

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)要折叠节点，请点击节点旁边的箭头。