HTML/CSS Extractor在浏览器中使用的扩展工具，这款工具支持提供Web 开发人员和设计人员从任何 DOM 元素中提取干净、可用于生产的 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. 复制或编辑
在语法突出显示的编辑器中编辑代码，然后单击复制按钮将其复制到剪贴板。
插件安装说明
1、在打开的谷歌浏览器的扩展管理器
就是点击最左侧的三个点，在弹出的菜单中选择【更多工具】——【扩展程序】
或者你可以在地址栏中直接输入chrome://extensions/
2、进入扩展程序页面后将开发者模式打勾
3、最后将解压出来的crx文件拖入到浏览器中即可安装添加
4、如果出现无法添加到个人目录中的情况，可以将crx文件右键，然后选择【管理员取得所有权】，再尝试重新安装
5、安装好后即可使用
扫码关注公众号，发【识别码】获取
