导出元素工具让你点击网页上的任意元素，并以三种格式导出其完整结构：包含所有子节点和属性的原始 HTML 标记、整洁的计算样式表（CSS），或结构化的 JSON 表示。这是提取设计模式、保存代码片段和记录 UI 组件的理想工具。
每个开发者都有需要从现有页面提取代码的时刻——也许是一个精心设计的卡片组件、结构清晰的导航栏，或者是你想复用的表单布局。通常这意味着右键点击、检查元素、从元素面板手动复制 HTML，再从样式面板单独提取 CSS。导出元素将这一切整合为一次点击。选择任意元素，即可获取其完整的 HTML、全量计算 CSS，或结构化 JSON 表示——每种格式都在独立的标签页中，格式化后即可使用。HTML 导出包含元素及其所有子节点，并带有正确的缩进。CSS 导出显示每一条计算样式（而非仅作者样式），因此你得到的是浏览器实际渲染的精确外观。JSON 导出提供结构化的数据表示，适用于文档记录、测试或程序化分析。
<div class="pricing-card">
<div class="card-header">
<img src="icon.svg"/>
<h3>Pricing Card</h3>
</div>
<p>$29.99/month</p>
<button>Subscribe</button>
</div>
获取所选元素的完整 HTML 标记，包括所有子节点、属性和嵌套结构。输出经过正确缩进和格式化——而非 outerHTML 那种单行混乱的结果。可直接粘贴到新的 HTML 文件或组件模板中使用。
将元素的所有计算 CSS 属性提取为整洁、格式化的样式表。包含字体排版、颜色、间距、边框、布局和定位等属性。输出的 CSS 是浏览器实际渲染的结果——已考虑继承、优先级和层叠关系。
获取一个 JSON 对象，包含元素的标签名、属性映射、计算样式、内部文本内容以及递归的子节点数组。适用于程序化分析、文档记录、测试 fixture 构建或自定义工具开发。
在 HTML、CSS 和 JSON 标签页之间即时切换。每种格式均从同一所选元素生成，你可以随时获取所需的表示形式。无需重新选择元素，三种格式始终可用。
每种导出格式在预览面板中均带有语法高亮显示。HTML 标签以红色显示、属性以黄色显示、值以绿色显示；CSS 属性以紫色显示、值以绿色显示；JSON 键和值均有颜色编码，复制前一目了然。
点击复制按钮即可获取当前标签页的内容。状态栏显示导出内容的行数和字节大小，让你清楚了解所复制内容的体量。复制成功后会显示确认反馈。
发现一个想要复用的卡片、Hero 区域或导航栏？点击它，导出 HTML 获取结构，再导出 CSS 获取样式。你将获得构建自己组件的完整起点。
将元素导出为 JSON，用于文档记录或设计系统档案。结构化表示包含标签名、属性和样式——非常适合维护组件清单或输入到文档工具中。
需要用于单元测试的 HTML fixture？导出元素的 HTML 并粘贴到测试文件中。输出整洁且格式化，可直接用作组件测试的 DOM 快照。
CSS 导出显示的是计算样式——即浏览器在应用所有 CSS 规则后实际渲染的结果。将计算输出与你编写的 CSS 进行对比，从而找出优先级冲突、继承覆盖或意外的默认值。
将生产网站中的优雅实现复制到个人代码片段库。同时导出 HTML 和 CSS，完整保留组件的结构与样式，供日后参考使用。
打开 DevSuite Pro 浮动工具栏，点击导出元素图标。鼠标光标变为十字准星选择器，同时打开一个带标签页的导出面板。
点击页面上的任意元素。所选元素将以紫色边框高亮显示，导出面板随即填充该元素的 HTML、CSS 和 JSON 表示，分布于三个标签页中。
点击 HTML、CSS 或 JSON 标签页，以不同格式查看元素。每个标签页均显示导出内容经语法高亮、格式化后的预览。
浏览预览内容，确认其包含所需信息。点击复制按钮将当前标签页的内容放入剪贴板。状态栏显示行数和大小。
点击页面上的其他元素，导出面板将更新为新内容。无需停用工具——持续点击即可导出多个元素。