元素 - Element

元素面板上主要有以下功能:

• 审查网页中的HTML&CSS元素.
• 测试不同的布局.
• 实时编辑CSS.

审查修改页面

编辑样式

• margin/padding/width/height等值可以使用上下方向键改变1个单位的大小，Alt+上下方向键改变0.1个单位大小，shift+上下方向键改变10个单位，shift+翻页键改变100个单位。

• 触发元素的active, :hover, :focus, :visited状态

  

DOM元素

• 编辑DOM标签：双击标签
• 以编辑HTML方式编辑DOM：右键选择Edit as HTML。
• 添加或删除独立的DOM节点
• 编辑属性名或值：双击进入编辑状态
• 移动DOM元素，更改元素位置：鼠标点击选中 + 拖拽可
• 展开收起节点：鼠标点击选中 + 上下左右方向键（上下-选择定位；左-收起；右-展开）或点击元素前的箭头
• 滚动元素至当前可视窗口内 - 右键选择Scrolling into view
• 通过CSS选择器搜索DOM元素：CMD + F和输入你需要的类名或ID名
• 查看事件监听器：在“Event Listeners”菜单中选择一个事件，右击并选择“Show Function Definition”，你可以查看到对应的源码

样式

Styles Pane

Metrics pane

元素事件监听

DOM元素断点

DOM元素断点和特定的元素关联，元素被更改时触发。如果想知道页面中某些元素为何会更改，被哪些JS代码更改，可对DOM元素设置断点跟踪其变化过程。

Elements中选中元素右键 - Break on - 选中断点类型

• 子元素变更（Subtree modifications）

  增加、删除、移动子元素时触发。

• 属性变更（Attributes modifications）

  元素属性(class, id, name) 更改时触发。

• 元素被删除（Node removal）

  元素被删除时触发。