IE11 —— F12 开发者工具( 三 ) _调试

检查完元素后，它将突出显示。

文章插图
突出显示不仅显示元素边界，还显示其填充的边界、边框和边距。可以使用“DOM 资源管理器”工具标题右侧的第二个按钮切换启用或禁用状态。
编辑元素
可以使用三种方法编辑元素：
当你编辑类属性时，将提供来自样式的匹配类的建议列表。双击建议或使用箭头键导航到建议，然后按Tab或Enter选择它。
要点不能在“DOM 资源管理器”中以 HTML 的形式编辑、html、head、body和元素。
如果你的更改没有产生需要的结果，请按 CTRL + Z 撤销上一处更改。
移动元素
你可以采用两种方法移动元素：
当复制某个元素并使用 CTRL + V 进行粘贴时，剪切板上的元素将作为选中元素的子元素粘贴。右键单击该元素以使用上下文菜单中的“粘贴之前的内容”选项。
注意请勿使用上下文菜单中的“复制带有样式的元素”选项来移动 DOM 中的元素。它将包含该元素的 HTML 文档及其所有相关样式放置在剪切板上，以便粘贴到外部编辑器。
样式窗格
“样式窗格”提供不同视图，用于查看向元素应用了哪些样式，以及元素关联事件触发了哪个代码。该窗格有五个选项卡。
样式
“样式”选项卡是应用到元素的所有样式以及应用的样式属性的列表。它将直接面向元素的样式与继承样式分开，并识别继承样式来自哪些上级元素。它还可以根据CSS 媒体查询查找应用了哪些元素。
它可以实时更新，因此如果你执行了基于窗口宽度的媒体查询，调整窗口大小将改变应用的样式列表，这是因为匹配了不同的媒体查询。
编辑样式
你可以通过选中或取消选中属性左侧的框来启用或禁用样式属性。
若要编辑规则名称或属性，请单击它。自动完成建议是 IE11 中的新功能。键入属性名称时，将建议匹配的 CSS 属性名称。键入属性值时，如果该属性具有一组已定义的可能的值，将建议匹配的值。双击建议或使用箭头键导航到建议，然后按Tab或Enter以选择它。
要添加新规则或将属性添加到现有规则，请在选项卡中右键单击，然后单击“添加规则”或“添加属性” 。
跟踪
“跟踪”选项卡可以跟踪元素样式的源。
该图像显示了元素的颜色以及已覆盖的父元素的颜色属性链。如果元素上的特定属性与预期不同，可以使用跟踪以查找该属性的来源和它覆盖的元素。
在“跟踪”选项卡中，不能编辑属性，但可以使用属性旁的复选框切换其启用或禁用状态。关闭当前活动属性将激活链中的下一个属性。
已计算
“已计算”样式选项卡与“跟踪”选项卡非常相似，但具有以下两处明显的差异：
打开该按钮时，它仅显示用户定义的样式。关闭时，它显示的默认样式和任何应用到元素的隐式样式。该列表可能很长，因此它旁边有“筛选属性”框。在该框中键入文本，将筛选属性列表，仅显示匹配文本的属性。
布局
“布局”选项卡显示用于选定元素定位的框模型图表，它采用的颜色与选定元素突出显示的颜色相同。你可以通过单击图表中的任意值以进行编辑。
事件
“事件”选项卡显示元素的 DOM 事件或 CSS 选择器，这些选择器具有采用方式分配给它们的处理程序。可以单击文件名以在调试程序中显示文件
在上图中，一个元素的单击事件由两个脚本中的两个函数进行处理。如果单击该元素时发生异常行为，可能是因为一个处理程序在侦听另一个元素的事件。