你不知道的 Chrome 调试工具技巧 第十一天：style editors continued（样式编辑器后续）

Shadow editor 阴影编辑器

听起来很不吉利 …

它允许你在 "Shadow DOM" 中编辑样式。Shadow DOM 是 web 组件的一部分，你可以通过它隐藏你的 DOM 结构。主要使用场景是当你在创建 Web 组件时，你可以有自己独立的样式。

如你所见，你可以直接看到阴影 DOM 中的 style 标签的样式。在开发 Web 组件时这非常有用。

多属性复制

这在复制多个属性到其他地方的时候很有用，比如你要将 style 中的属性复制到内联样式。你只需要勾选你想复制的属性，然后右键，选择 Copy all styles 然后在目标元素上右键点击，选择 Paste all styles 就可以了。

font-family transition 过渡

有一个好的方式可以调试你的字体变化。如果你想调试在字体变化时元素的渲染，那么你可以通过改变属性值来观察效果。

CSS box model 计算

你可以在 Compute panel 中手动计算出 padding ，border 和 margin 的值。

Computed panel 计算面板

计算面板可以帮助你获取到元素上的所有样式信息。在 Style editor 中，直接单击某个值，你就可以在右侧的 Computed panel 中看到详细的信息。

Inspect DOM pane DOM 检查面板

在 Inspect DOM pane 中，你可以看到整个 DOM 结构。它非常适合快速地找到你想要的元素。

not() 伪类

在 Style editor 中，你可以通过一个简单的按钮来使用 not() 伪类。然后你就可以添加你想要的样式。

display

在 Style editor 中，你可以快速地修改元素的 display 属性。

DOM Node

在 Inspect DOM pane 中，你可以展开相应的节点来查看内容。

例如

<div id="root">
  <div>
    <p>Hello world</p>
  </div>
</div>

你可以展开 #root > div 来看到 #root > div > p。