Gepiu的博客

有点想法很好,有点行动更好

树欲动...


Chrome开发者工具 - Elements(元素面板) ②

使用颜色选择器修改颜色

要打开Color Picker(颜色选择器,也称作拾色器),在Styles(样式)窗格中找到一个定义颜色(如color: blue)的CSS声明。在声明值的左边有一个有颜色的小方块。方形的颜色与声明值匹配。点击这个小方块打开Color Picker(颜色选择器)。(注:按住Shift键,点击这个小方块,可以修改颜色格式。关闭颜色选择器可以按EscEnter键。) opening the color picker 您可以通过多种方式与Color Picker(颜色选择器)进行交互,请看下图中对应编号的说明:

  1. Eyedropper (吸管)。
  2. Current color (当前颜色) - 当前值的可视化显示。
  3. Current value (当前值) - 十六进制,, RGBA, 或用 HSL 表示 Current color (当前颜色) 。
  4. Color palette (调色板)。
  5. Tint and shade selector (色调和色调选择器)。
  6. Hue selector (色相选择器)。
  7. Opacity selector (不透明度选择器)。
  8. Color value selector (颜色值选择器) - 单击可在RGBA,HSL和十六进制之间切换。
  9. Color palette selector (调色板选择器) - 单击以选择不同的模板。

annotated color picker

吸管

点击eyedropper(吸管)按钮,使其启用(enabled eyedropper),将鼠标悬停在实际页面的颜色上,然后单击选定当前颜色。

the eyedropper in action

调色板

Color Picker(颜色选择器)提供以下的调色板:

  • Page Colors (页面颜色) - 从页面的CSS中自动生成的一组颜色。
  • Material Design (配色方案) - 符合 网页设计规范 的配色方案。
  • Custom (自定义) - 一组你自己选择过的颜色。 DevTools 会保存您的自定义调色板,甚至跨页面,直到您删除它。

修改自定义调色板

plus sign(加号)按钮将当前颜色添加到自定义调色板。单击并按住颜色将其拖动到其他位置,或将其拖动到trash can(垃圾桶)图标可以将其删除。右键单击颜色,然后选择Remove color(删除颜色)可以将其删除。选择Remove all to the right可以删除当前所选颜色右侧的所有颜色。右键单击调色板区域中的任意位置,然后选择Clear template(清除模板)可以删除所有模板的颜色。

查看和编辑CSS自定义属性(CSS 变量)

您可以查看和编辑使用CSS自定义属性定义的声明(非正式的称为CSS变量)就像任何其他声明一样。

自定义属性通常定义在:root选择器中。要查看定义在:root中的自定义属性,请检查html元素。 custom property defined on :root 然而,自定义属性不必须定义在:root选择器上。如果你在别的地方定义它,可以检查定义它的元素来查看定义。

你可以查看和编辑使用自定义属性的声明值,就像任何其他声明值一样。

如果你看到一个像var(--main-color)的声明值,如下面的截图所示,这意味着该声明正在使用自定义属性。这些值可以像其他任何声明值一样进行编辑。目前没有办法跳转到自定义属性定义的地方。 using a custom property

编辑 Sass, Less 或者 Stylus

如果您使用Sass,Less,Stylus或其他任何CSS预处理器,在Styles(样式)窗格编辑器中编辑生成的CSS输出文件将无济于事,因为它们不会映射到您的原始源文件。

使用CSS source maps,DevTools可以自动将生成的文件映射到原始源文件,它允许您在Sources(源代码)面板中实时编辑这些内容,并查看结果,而无需离开DevTools或刷新页面。

处理器的工作流程

当你检查一个元素的样式是由生成的CSS文件提供的,Elements(元素)面板显示指向原始源文件的链接, 不是生成的CSS文件。

当你检查一个元素的样式是由生成的CSS文件中提供的元素时,面板会显示一个链接到原始的源文件,不生成的CSS文件地址. Elements panel showing .scss stylesheet 要跳转到源文件:

  • 点击链接,在 Sources (源代码)面板中打开(可编辑的)源文件.
  • 按住 Ctrl (或者 Cmd )键,在任何CSS属性的名称或值上点击,会在 Sources (源代码)面板中打开源文件并跳转到相应的行. Sources panel showing .scss file 当您将更改保存到DevTools中一个CSS预处理文件时,CSS预处理器将重新生成CSS文件。 然后DevTools将重新加载新生成的CSS文件。

启用/禁用 CSS source maps 和自动加载

CSS source maps 默认是启用的。您可以选择启用自动重新生成CSS输出文件。要启用或者禁用 CSS source maps 和 CSS重新加载:

  1. 打开 DevTools Settings (设置) 然后点击 General (常规)。
  2. 勾选或者取消 Enable CSS source maps (启用 CSS source maps) 和 Auto-reload generated CSS (自动重新加载生成的CSS文件)。

要求 & 陷阱

  • DevTools不会检测外部编辑器中进行的更改,直到 Sources (源代码)面板中包含关联的源文件重新获得焦点。
  • 手动编辑由 Sass / LESS /其他编译器生成的CSS文件将破坏源映射关联,直到页面重新加载。
  • 使用 Workspaces 工作区确保生成的CSS文件也映射到工作区。您可以通过查看 Sources (源代码)面板右侧树来验证这一点,并且看到CSS是从您的本地文件夹提供。
  • 为了让DevTools在更改源文件时自动重新加载样式,您的预处理器必须设置为每当源文件更改时重新生成CSS文件。否则您必须手动重新生成CSS文件,并重新加载页面以查看您的更改。
  • 您必须从网络服务器(而不是 file:// URL)访问您的网站或应用,并且服务器必须提供CSS文件以及source maps( .css.map )和源文件( .scss 等)。
  • 如果 使用Workspaces 工作区功能,则Web服务器还必须提供 Last-Modified 标头。

了解如何在Setup CSS&JS预处理器中设置源映射。