概述
Ctrl+드래그(Mac: Cmd+드래그)로 웹 요소의 CSS position 값을 실시간으로 표시하는 개발자 도구입니다.
🎯 为Web开发者打造的革命性CSS定位工具 Elements Position Drag Overlay是一款革命性的Chrome扩展程序，完全改变了CSS定位工作方式。在拖拽元素时获得实时坐标反馈，让CSS定位变得更快、更准确、更直观。 ✨ 为什么这款扩展如此革命性？ 即时视觉反馈：拖拽position: absolute元素时实时查看left、top、right、bottom CSS值。不再需要猜测或试错，无需在浏览器和代码编辑器之间来回切换！ 开发者优先设计：专为需要精确元素定位的前端开发者、UI设计师和QA工程师精心打造。 🚀 核心功能 🎮 直观的拖拽控制 • Windows：Ctrl + 拖拽移动绝对定位元素 • Mac：Cmd + 拖拽提供macOS无缝体验 • 智能检测：仅position: absolute元素可拖拽 - 防止意外更改布局 • 悬停高亮显示可拖拽元素 📊 实时位置显示 • 显示精确CSS坐标的实时覆盖层 • 四值显示：以像素为单位显示left、top、right、bottom • 拖拽时即时更新 - 实时查看变化！ • 可自定义覆盖层位置（4个角落选项） ⚙️ 完全可定制界面 • 覆盖层位置：从左上、右上、左下、右下中选择 • 吐司通知：启用/禁用拖拽开始/结束消息 • 悬停高亮：使用可定制颜色进行视觉元素选择 • 持久覆盖层：拖拽完成后保持位置显示 • 现代玻璃形态弹窗设计 🔧 专业开发者工具 • 键盘快捷键：Ctrl+Shift+Q（Windows）/ Cmd+Shift+Q（Mac）切换扩展 • 智能元素检测：自动识别可拖拽元素 • 跨平台支持：Windows和Mac完美兼容 • 无布局干扰：仅影响position: absolute元素 • Chrome浏览器间设置同步 💡 完美适用于 前端开发者：像素级精确元素定位。完美适用于响应式设计、模态框定位、下拉菜单、工具提示和复杂布局。 UI/UX设计师：快速原型化布局并调整元素放置。无需触及代码即可测试不同定位场景。 QA工程师：验证不同屏幕尺寸和设备上的定位准确性。确保元素在各种视口尺寸中正确定位。 CSS学习者：可视化学习CSS定位概念。立即查看定位更改的结果。 网页代理：通过更快、更准确的元素定位加速客户工作。显著减少开发时间。 🎯 使用方法 1. 从Chrome网上应用店安装扩展程序 2. 访问您想要处理的网站 3. 按住Ctrl（Mac上按Cmd）并拖拽绝对定位元素 4. 移动元素时观察实时更新的位置值 5. 释放鼠标完成定位 6. 通过扩展弹窗访问设置进行自定义 🔥 专业技巧 • 使用Esc键立即隐藏覆盖层 • 在包括localhost在内的所有网站上运行 • 完美适用于响应式设计测试 • 理想用于模态框、弹窗、覆盖层定位 • 优秀的动画起始/结束位置微调 🛡️ 隐私和安全 • 无数据收集 - 您的隐私100%受保护 • 完全在浏览器本地运行 • 无外部服务器或跟踪 • 开源开发方法 • 只需最小权限 💻 技术规格 • 支持所有现代网站 • 兼容动态内容和SPA • 兼容所有CSS框架（Bootstrap、Tailwind等） • 轻量快速 - 无性能影响 • 跨平台键盘快捷键 • 现代Chrome扩展Manifest V3 🌟 为什么选择Elements Position Drag Overlay？ 这不仅仅是另一个开发者工具 - 这是CSS定位方法的范式转变。取代传统的猜测-检查方法，提供即时、可视化的反馈，让定位变得直观而精确。 之前：编写CSS → 刷新 → 检查 → 调整 → 重复 现在：拖拽 → 查看坐标 → 几秒钟内完美定位！ 今天就改变您的开发工作流程。加入已经革新其CSS定位过程的数千名开发者。 立即下载体验CSS开发的未来！
详情
- 版本1.0.0
- 上次更新日期2025年6月25日
- 提供方soominyim15
- 大小105KiB
- 语言4 种语言
- 开发者
邮箱
soominyim15@gmail.com - 非交易者该开发者尚未将自己标识为交易者。欧盟地区消费者须知：消费者权利可能不适用于您与该开发者达成的合约。
隐私权
“Elements Position Drag Overlay”已就收集和使用用户数据披露了以下信息。 如需了解详情，请查看开发者的privacy policy。
Elements Position Drag Overlay会处理以下数据：
该开发者已声明，您的数据：
- 不会因未获批准的用途出售给第三方
- 不会为实现与产品核心功能无关的目的而使用或转移
- 不会为确定信用度或放贷目的而使用或转移
