通过实时预览、智能选择器简化和语法突出显示编辑器从任何元素中提取 HTML 和 CSS
强大的 DevTools 扩展，可供 Web 开发人员和设计人员从任何 DOM 元素中提取干净、可用于生产的 HTML 和 CSS。
特点包括：
• 带有响应断点的实时预览
• 智能 CSS 选择器简化
• 语法突出显示的代码编辑器
• @font-face 规则提取
• 一键复制到剪贴板
• 可定制的提取设置
非常适合复制组件样式、调试布局和快速原型设计。
### 如何使用
1.打开Chrome开发者工具
在 Windows/Linux 上按 F12 或在 Mac 上按 Cmd + Option + I 打开 Chrome DevTools。
2. 导航到 HTML/CSS 选项卡
首先，确保您位于 DevTools 中的 Elements 选项卡。然后，在 DevTools 面板中查找“HTML/CSS”选项卡。如果您安装了许多扩展，它可能位于溢出菜单 (») 中。
3. 选择一个元素
您可以通过多种方式选择元素：
- 方法 1 - 直接选择：在 Elements 选项卡中，单击 DOM 树中的任意 HTML 元素将其选中，然后切换到 HTML/CSS 选项卡查看提取的代码
- 方法 2 - 元素选择器：单击 DevTools 左上角的元素选择器图标（带有正方形的光标），然后单击网页上的任何可见元素。这将在“元素”选项卡中自动选择它
- 方法3 - 右键单击检查：右键单击网页上的任意元素，然后从上下文菜单中选择“检查”。这将打开 DevTools，其中已选择该元素
提示：使用任何方法选择元素后，请确保切换到“HTML/CSS”选项卡以查看提取的代码和实时预览。
4.查看提取的代码
该扩展程序将自动提取并显示所选元素的 HTML 和 CSS，以及实时预览。
5. 复制或编辑
在语法突出显示的编辑器中编辑代码，然后单击复制按钮将其复制到剪贴板。