×
←
→
适用于以下浏览器
Edit web pages like Figma! 使用UI Inspertor（一种强大的Chrome扩展程序）来提升您的Web开发和设计工作流程，可让您在视觉上和实时进行检查，编辑和样式。
跳过跳入DevTools的麻烦，然后直接在页面上进行即时调整。
与UI检查员一起，您可以： - Inspect elements - activate the extension and click on an element to view its attributes. - 编辑属性 - 在Visual编辑器中修改属性，以查看实时更改。
- Control typography - adjust font family, size, weight, and letter spacing. - Configure layout and spacing - set margins, paddings, display properties. - Enhance backgrounds and shadows - apply custom colors, background blurs, and shadow effects. - Customize borders - adjust border width, style, and color. - 查看您在一个地方更新的所有元素的列表。
--- Unlock UI Inspector PRO and: - Apply changes globally - automatically apply style changes to similar elements throughout the page. - Style presets - save and reuse frequently used styles to maintain design consistency across projects. - Export screenshots - capture high-resolution screenshots of styled elements for documentation or collaboration. - View CSS - See the generated CSS of your changes to a particular element or the whole page. - Copy CSS - Copy the compiled CSS code to your clipboard. - Export to GitHub - Generate a GitHub issue with your changes compiled to CSS. --- Who Is UI Inspector For? 网络开发人员： - 加速前端开发：快速识别和解决布局或样式问题，通过即时编辑元素。
- Simplify CSS Debugging: Bypass DevTools with an intuitive, visual editor. 网页设计师： - Real-Time Design Validation: Adjust and perfect designs in the browser to ensure pixel-perfect implementation. - Bridge Design and Development: Collaborate more effectively by directly tweaking live pages. --- 如何使用UI检查员 1。
激活扩展名：单击浏览器工具栏中的UI Inspector图标，或按Alt/Option + Shift + I. 2。
检查和编辑元素：悬停在任何元素上以选择它并立即查看其可调样式。
3.在视觉上修改样式：使用直观接口来更改字体，布局，间距，背景等。
4。
保存并应用预设：创建样式预设以保持一致的设计，并轻松地将其应用于其他元素。
5。
出口和共享：捕获调整或出口样式的屏幕截图，以与团队共享。
--- 安装 与支持侧面面板API的任何铬浏览器兼容。
为了获得最佳结果，请确保您的浏览器支持所有必需的API。
如果出现安装问题，请将浏览器更新到最新版本，然后重试。