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

点。用户继续在搜索框中输入数据，触发了断点，并且停止执行。用户鼠标悬停在 JavaScript 变量上方，相应变量的详细信息会展示出来。元素和源面板都包含了一个管理 DOM 断点的面板。要查看你的 DOM 断点，点击断点旁边的扩展箭头以显示断点面板。对于每个断点，其元素标识符和断点类型都会显示出来。你可以通过以下几种方式来和断点进行交互：在元素标示符上悬停以显示元素在页面中相应的位置（和在元素面板中的节点上悬停是类似的效果）。点击一个元素，可以跳转到它在元素面板中的位置。切换复选框来启用或者禁用断点。当你触发 DOM 断点时，这个断点会在 DOM 断点面板中高亮显示。调用栈面板会显示调试器暂停的原因：查看元素事件监听器查看与时间监听器面板中 DOM 节点相关联的 JavaScript 事件监听器。事件监听器器面板中的顶级项目会显示已注册监听器监听的事件类型。单击事件类型旁边的展开箭头以查看已注册的事件处理器列表，每个处理器其都是由 CSS 选择器所标记的，就像元素标示符 "document" 或者 "button#call-toaction" 等。如果多个处理器为相同的元素而注册，则该元素会被重复列出。点击元素标识符旁边的展开箭头以查看事件处理器的属性，事件监听器为每个监听器列出了以下属性：handler：包含回调方法。右键点击方法并选择 Show Function Definition 来查看该方法定义的地方。（如果源代码可用的话）isAttribute：如果事件是通过 DOM 属性注册则返回 True。（例如， onclick）lineNumber：包含事件注册的行号。listenerBody：代表回调函数的字符串。node：监听器注册的那个 DOM 节点。鼠标悬停在此可以显示它在页面视图中的位置。sourceName：包含事件监听器的源文件的 URL 路径。type：事件所注册的类型。（例如， click）useCapture：一个布尔值，表示是否已设置 addEventListener 中的 useCapture 标志。默认状态下，已注册的事件处理器会显示以下类型的元素：当前选中的元素。当前选中元素的祖先节点。如果你觉得包括了那些使用事件委托注册的处理器之后，视图上显示的事件处理器太多了，可以点击 Filter 然后在菜单列表中选中 Selected Node Only 就可以只显示那些在相应节点上注册的事件监听器。注意：很多 chrome 的扩展插件会把它们的事件监听器也添加到 DOM 中。如果你发现了一些不是由你的代码所设置的事件监听器，你可能希望在隐身模式中重新打开你的页面，在隐身模式下，浏览器默认阻止扩展插件的运行。样式CSS 定义了你的页面的表示层。你可以查看或者修改那些作用在当前页面元素上的 CSS 的声明，级联（在级联样式表中）和继承可以理解为是为了开发和调试工作流的：级联涉及到为 CSS 声明给定权重，以决定在不同的规则存在重合的情况下哪一条优先执行。继承涉及到如何让 HTML 元素从 CSS 所包含的元素中继承相关属性（祖先）。如果想了解更多，请参照 W3C 关于级联和继承的文档：http://www.w3.org/TR/CSS2/cascade.html样式面板样式面板按照优先级从高到底的顺序显示了对应选定元素的 CSS 规则：直接用于元素 style 属性的元素样式（或者在 DevTools 中使用的）。匹配的 CSS 规则包括任何与元素相匹配的任何规则。例如，CSS 的选择器span 对应 HTML\ 元素。继承的样式包括yu选中元素的祖先节点相匹配的任何可继承的样式规则。上图中用数字标记的在下面有相应的解释。匹配元素的选择器相关联的样式。级联规则指出，如果两个规则的起始、权重和特性都相同，最靠近元素定义的规则优先执行。在这种情况下，第二个元素属性将取得优先权，第一个元素属性会以被画了删除线的形式来显示在文本中，表明它被复写了。User agent stylesheets 是被明确标记的，而且通常会被你的网页上的 CSS 覆盖。这里的级联表明，作者的样式的优先权是高于使用者的代理样式的，所以样式 display:inline-block 覆盖了用户定义的样式 display:block。继承的样式会在 “Inherited from [node]”这一栏下面显示。点击该栏中的 DOM 节点就可以定位到它在 DOM 树中的位置。（CSS 2.1 的属性表中表明了那些属性是可以继承的）选择器 :root body 比单纯的 body 具有更高的特异性，所以它的样式声明优先。body 中的 font-family 被重写了。font-size 也是类似的情况（由于选择器特异性而被重写）。用逗号分隔的选择器颜色是不同的，具体取决于他们是否匹配所选中的 DOM 节点。灰色的选择器，比如 audio 和 video 没有应用于有选定的节点。上述的规则和下面的 CSS 源代码相对应：video, audio, div, .message, body *, time { /* visibility: hidden */ margin-top: 10px;}如果可见的声明被注释掉了，那么在样式面板中它将显示为已禁用状态。使用快捷键 Ctrl + 点击（或者在Mac上用 Cmd + 点击） 样式面板中的 CSS 属性或者属性值，可以定位到他们在源码中的位置，并切换到源代码面板。编辑及创建样式你可以在元素面板中的样式面板上添加或者修改样式。除了包含样式信息的区域显示为灰色外（就像是 user agent stylesheets 那种情况），所有的样式都是可编辑的。可以通过以下方式来编辑样式：编辑已有的属性名称或者属性值。添加新的属性声明。添加新的 CSS 规则。想要启用或者禁用某个样式的声明，勾选或者取消它旁边的复选框。编辑已有的属性名或者属性值点击 CSS 属性的名称来编辑其名称：点击属性值可以修改其值。如果你正在修改属性名称，按 Tab 或者 Enter 键可以开始编辑属性值。默认情况下，你对 CSS 做出的更改都是暂时的，重新加载页面的时候所有修改都会复原。想要自定义相关行为，可以参考 <a href=""">WorkSpace当编辑一个属性值为数字的 CSS 时，你可以使用以下的快捷键来增加或者减少 CSS 属性的数值：按 Up 或者 Down 来将相应值增加或者减少1.（如果当前值在-1到1之间，则每次变动0.1）按 Alt + up 或者 Alt + Down 来让相应值增加或者减少0.1。按 Shift + Up/Down 或者 PageUp/PageDown 来让相应值增加或者减少10。按 Shift + PageUp/PageDown 来让相应值增加或者减少100。使用颜色选择器你可以通过使用颜色选择器来把某个颜色修改或者设置为当前页面样式面板中已经存在的颜色。添加新的属性声明点击符合可编辑 CSS 规则的空白区域就可以创建一个新的样式，此时编辑模式