在 Chrome 的检查器开发工具（“检查器样式表”）中添加新的空白样式表的最快方法

Question

通常，当我想在 Chrome 中实时测试 CSS 修改时，我使用：

• 右键单击>检查

• 使用右下角面板，然后使用+按钮添加新类，然后在那里进行编辑。

  

但我注意到还有一种更方便的方法：打开一个“检查器样式表”，它会打开一个空白的 CSS 文档，可以对其进行编辑，并且修改会实时显示：

问题：在 Google Chrome 中打开此类“检查器样式表”最简单/最快的方法是什么？

（所谓最快，我的意思是比右键单击、检查、+添加新类、单击小检查器样式表链接等更快）

我在 Chrome 控制台/开发人员工具的菜单中找不到它。是否有键盘快捷键可以打开这样的“检查器样式表”？

Answer 1

我没有简单的捷径，但我可以让你更快一点：

1. F12打开开发工具。
2. 元素选项卡上样式面板顶部的按钮，用于创建检查器样式表。
3. 双击打开。

创建检查器样式表后，我将其关闭或关闭 DevTools，如何再次找到它？

• 如果您在检查器样式表仍处于打开状态时关闭了 DevTools，则只需直接转到“源”选项卡（在 DevTools 中的顶部栏），检查器样式表应该仍处于打开状态。
• 如果您已经关闭了检查器样式表本身，则在“源”选项卡上按Ctrl+P并键入“inspector-stylesheet”，通常在“in...”之后，您将已经在源选项卡的顶部看到检查器样式表。可用文件的建议列表。而且它还应该在“元素”
  选项卡 上的“样式”面板顶部（您首次创建它的位置）仍然可见。