直接在页面上检查和直观地编辑元素及其 CSS，以加快设计和 UI 调试速度。
用于浏览器的可视化 CSS 编辑器
使用 UI Inspector 提升您的 Web 开发和设计工作流程，这是一个功能强大的 Chrome 扩展，可让您以可视化方式实时检查、编辑任何网页并设置其样式。跳过深入使用 DevTools 的麻烦，直接在页面上进行即时调整。
使用 UI 检查器，您可以：
- 检查元素 - 激活扩展并单击任何元素以查看其属性。
- 编辑属性 - 在可视化编辑器中修改样式并实时查看更改。
- 控制排版 — 调整字体系列、大小、粗细、行高和字母间距。
- 配置布局和间距 — 设置边距、填充、显示属性和对齐方式。
- 增强背景和阴影 - 应用自定义颜色、渐变、背景模糊和阴影效果。
- 自定义边框 — 调整边框宽度、样式、颜色和半径。
- 微调外观 - 控制不透明度、混合模式和旋转等变换。
- 查看所有更改 — 查看您在一个位置更新的每个元素的列表。
- 复制 CSS — 立即查看并复制您所做更改的已编译 CSS。
---
解锁 UI Inspector PRO 并：
- 全局应用更改 - 使用灵敏度滑块自动将样式更改应用到页面上的类似元素。
- 样式预设 — 将任何元素保存为可重复使用的预设，只需单击一下即可将其应用到任何网站。
- 导出为 Tailwind、SCSS 或 JSX — 将更改复制到项目所需的代码格式中。
- 导出屏幕截图 — 捕获各个样式元素的高分辨率 PNG 屏幕截图。
- 导出到 GitHub — 将您的设计更改编译为 CSS，生成 GitHub 问题。
---
UI 检查器适合谁？
网页开发人员：
- 加速前端开发：通过动态编辑元素快速识别并修复布局或样式问题。
- 简化 CSS 调试：使用直观的可视化编辑器绕过 DevTools。
- 导出生产就绪代码：将更改作为 CSS、Tailwind、SCSS 或 JSX 直接复制到您的代码库中。
网页设计师：
- 实时设计验证：在浏览器中调整和完善设计，以确保像素完美的实现。
- 桥梁设计和开发：通过直接调整实时页面更有效地协作。
- 保存和重用预设：构建可重用样式库并在项目中一致应用它们。
---
如何使用 UI 检查器
1. 激活扩展：单击浏览器工具栏中的 UI 检查器图标或按 Alt/Option + Shift + I。
2. 检查和编辑元素：将鼠标悬停在任何元素上以选择它并立即查看其可调整样式。
3. 直观地修改样式：使用直观的界面来更改排版、布局、间距、背景、边框、阴影等。
4. 保存并应用预设：创建一致设计的样式预设并将其应用到任何网站上的任何元素。
5. 导出和共享：以多种格式复制 CSS、捕获屏幕截图或将更改导出为 GitHub 问题。
---
安装
与任何支持侧面板 API 的 Chromium 浏览器兼容。为了获得最佳结果，请确保您的浏览器支持所有必需的 API。如果出现安装问题，请将浏览器更新到最新版本，然后重试。
