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

由 珍珍阿姨 创建，Loen 最后一次修改 2016-08-12 编辑样式以及 DOM简介元素（Elements）面板使你可以浏览当前页面的结构化信息，在如今的应用中，为初始页面载入服务的 HTML 标记不一定是你在文档对象模型（DOM）树中看到的那样。在调试以及创建网页的时候，实时展示页面样式将会是非常有用的功能。你可以使用元素面板来完成多种工作：检查网页的 HTML 和 CSS 元素测试不同的布局实时编辑 CSS如果想要更好地利用屏幕空间，请遵循下面这些有关工作区间的提示：关掉你不常用的面板。调整 DOM 树和侧栏之间的分隔线。DOMDOM 树窗口展示了当前页面的 DOM 结构。DOM 树实际上是由 DOM 节点构成的一棵树，并且每个节点都表示一个 HTML 元素，比如body 标签和 p 标签。为了阅读的便捷性，DOM 树窗口使用 HTML 元素标签来代替 DOM 节点，例如，用p标签来代替 HTMLParagraphElement。DOM 树视图展示了树当前的状态，这可能和最初加载的 HTML 页面并不相符，原因如下：你可能使用 Javascript 修改了 DOM 树。浏览器引擎可能尝试着修复无效的标签，因而产生和预期不符的 DOM 树。审查元素审查元素界面会展示的 负责呈现的元素显示在浏览器中的 DOM 节点和 CSS 样式表。审查元素的方式有多种：使用右键点击页面上的任何元素，然后选择Inspect Element。按Ctrl+Shift+C（在Mac上则是Cmd+Shift+C）以审查元素模式打开 DevTools，然后点击一个元素。点击 DevTools 窗口顶部的 Inspect Element button，随后会进入审查元素模式，然后选择元素。在控制台中使用 inspect() 方法，比如inspect(document.body)。关于如何使用 inspect 请参考Command-Line API使用鼠标或键盘来定位 DOM 元素你可以使用鼠标或者键盘在 DOM 结构中进行定位。如果要展开一个收缩的节点，双击这个节点或者按键盘的右键。如果要隐藏一个展开的节点，双击这个节点或者按键盘的左键。展开一个节点的时候会自动选中它的第一个孩子节点，因此你可以通过多次按右键来展开一个深度嵌套的结构。在你定位的时候，元素面板会在底部显示浏览路径：当前选中的节点用蓝色高亮显示，在该结构上向下定位会展开尾部：沿着结构向上定位则会移动高亮部分：DevTools 路径尾部会显示尽可能多的条目：如果整个路径不能在状态栏中完整显示，那么就会用省略号（...）来表示省去的路径，点击省略号就会显示隐藏的元素。有空可以看看这份快捷键表编辑 DOM 节点以及属性元素面板允许你修改 DOM 元素：像 HTML 一样编辑 DOM 节点。单独增加或删除 DOM 节点。编辑属性名称和值。移动 DOM 元素。更新内存中的 DOM 树并不会修改源文件，重新加载页面的时候会 DOM 树上的全部更改都会消失。编辑 DOM 节点对于 DOM 节点，双击它可以打开元素标记（H2,section,img）。现在，该字段是可以编辑并且能重命名的，重命名后关闭标签就会自动更新标签信息。编辑属性对于 DOM 属性，DevTools 会区分属性名和属性值，点击这些元素相应的部分来进入编辑状态。双击属性名来编辑属性名，这个过程是和属性值无关的。双击属性值来编辑这部分的类容而不影响属性名。编辑模式处于活跃状态时，通过按 Tab 键可以在属性值之间循环。一旦到达了最后一个属性值，再按 Tab 键则会创建一个新的属性字段。使用 Tab 不是增加并编辑属性的唯一方式，它只是一种常见的模式，实际上，在 DOM 节点的上下文菜单中，有专门的添加属性和编辑属性的条目。选择 Add Attribute 来在打开的标签结尾添加一个新的字段。选择 Edit Attribute 来修改一个已存在的属性。这个动作是上下文敏感的，你右键点击的部分将决定节点中哪个部分会进入可编辑状态。像 HTML 一样编辑 DOM 节点如果想像 HTML 一样来编辑 DOM 节点及其子节点：右键点击相应节点并选择 Edit as HTML（在 Windows 下，按F2来使当前选中节点切换到编辑状态）使用可编辑域来完成你的修改。点击可编辑域以外的地方来完成对 DOM 节点的修改按Esc键可以在不修改节点的情况下推出编辑。移动元素你可以在元素面板中重新排列 DOM 树节点来测试页面在不同布置下的状况。在元素面板中拖动节点来将它移动到 DOM 树中的其他位置。删除元素使用以下技巧来删除 DOM 节点：右键点击节点并选择 Delete Node。选择节点并按Delete键（即删除键）。你也可以在 Edit as HTML 菜单删除相应标签来删除元素。如果你不小心删除掉了某个元素，通过Ctrl+Z组合键回溯到最近一次动作。（或者在Mac下按Cmd+Z）在视图中滑动到相应位置当你的鼠标悬停在一个 DOM 节点或者选中了一个 DOM 节点时，在浏览器主窗口中渲染的相应元素就会高亮显示。如果该元素在屏幕之外显示，浏览器窗口的边缘会有一个提示告诉你，选中的元素在屏外之外。如果想将屏幕滑动至元素出现在屏幕上为止，右键点击该元素并选择 Scroll into View。设置 DOM 断点DOM 断点类似于源面板中的断点，它用来暂停在一定条件下运行的 JavaScript 代码。JavaScript 断点是和JavaScript 文件的特定行相关联的，并且在执行到该行的时候被触发。而 DOM 断点是和特定的 DOM 元素相关联的，并且在元素被用某种方式修改时触发。当你不确定 JavaScript 脚本的哪一部分会更新给定元素的时候，你可以使用 DOM 断点来调试复杂的 JavaScript 应用。举个例子，如果你的 JavaScript 脚本用于更改 DOM 元素的样式，你可以设定一个在相关元素属性被修改时触发的 DOM 断点。子树的修改当一个子元素添加，删除或移动时，将会触发子树修改断点。例如，如果在 ‘main-content’ 元素上设置子树修改断点，下面的代码会触发断点：var element = document.getElementById('main-content');//修改元素的子树var mySpan = document.createElement('span');element.appendChild( mySpan );属性修改当元素的属性（class,id,name）动态发生变化时，会出现属性修改：var element = document.getElementById('main-content');// 元素的 class 属性被修改element.className = 'active';节点移除当问题提及的节点从 DOM 中移除时，将触发节点移除修改：document.getElementById('main-content').remove();在上面的演示中，有下面这么几个步骤：用户在搜索框中输入数据，输入框尺寸发生变化。用户在搜索框上设置了一个属性修改断