直接在浏览器中检查、测量、捕获、分析和设计网页的 39 多个强大工具。
开始非常简单。安装扩展，打开任何网页，然后通过弹出窗口或悬浮停靠栏访问 39 多个开发工具。无需配置。
DevSuite Pro 为网页检查、测量、设计和分析提供 39 多个开发工具。使用直接构建在浏览器中的强大功能加速您的工作流程。
点击任何元素以检查其属性、尺寸、间距、字体和颜色。无需打开浏览器的开发者工具即可立即了解页面结构。
测量距离、检查对齐情况，并在任何网页上添加像素级的标尺和参考线，以确保您的设计完美对齐。
从页面上的任何元素拾取颜色，一键将 HEX、RGB 或 HSL 值复制到剪贴板。
捕获任何网页的全页或可见区域屏幕截图，并立即下载——非常适合共享设计和报告错误。
在不同的屏幕尺寸和设备分辨率下预览网页，以便在不离开浏览器的情况下测试响应式设计。
实时查看和编辑 CSS 样式
实时调试与控制 CSS 动画
将任意元素的 CSS 转换为 Tailwind 工具类
可视化任意页面的完整布局结构
获取任意元素的分类 Tailwind 类
在任意网页上以可视化 HTML 树形图叠加层呈现结构
检测任意网站上的 React、Vue、Angular 和 Svelte 组件
通过 Drag & Drop 重新定位页面上的任意元素
移除或切换任意元素的可见性
将任意元素导出为 HTML、CSS 或 JSON
从任意元素生成 React、Vue 和 Svelte 组件
捕获可见区域或整页 Screenshot
查看、选择并下载任意网页上的所有图片
扫描页面所有链接，精准定位失效引用
将页面上的任意图片替换为您自己的图片
即时为任意 URL 或文本生成 QR Code
在任意页面上实现像素级精准的标尺、参考线与测量
同时预览多种设备 viewport 的页面效果
测量任意两个元素之间的精确像素距离
可视化所有堆叠上下文与 Z-Index 层级
通过视觉 overlay 检查 CSS Grid 和 Flexbox 布局
在任意页面上模拟用户注意力热区
选择性清除 Cache、Cookies、localStorage 和 sessionStorage
一键探测任何网站背后的技术细节
全面的 SEO 审计：Meta Tags、标题结构、OpenGraph 等
自动化 WCAG 审计：对比度、alt text、ARIA 等全面检测
点击页面上的任意文字即可即时编辑
从 Google Fonts 全局或按元素替换任意字体
发现任意网页上使用的每一种字体
精准 eyedropper 工具，支持 HEX、RGB 与 HSL 颜色值
提取任意网页的完整调色板
一键为任意网站启用 dark mode
一键启用或禁用当前标签页的 JavaScript
查看、编辑、添加和删除任意域名的 Cookies
在浮动面板中查看 Console 输出 —— 无需打开 DevTools
实时监控所有网络请求
查看、编辑、添加和删除 localStorage 与 sessionStorage
扫描页面所有链接，精准定位失效引用
即时性能仪表盘：加载时间、DOM 统计和资源
一键格式化、压缩并校验 JSON
即时进行字符串与 Base64 之间的互转
一键进行 URL 字符串的编解码
Encode & Decode HTML Entities Instantly
Escape & Unescape Strings for Code
Convert Images To & From Base64 Data URIs
Decode JSON Web Tokens Instantly
Generate Bulk UUID v4 Identifiers
Compute MD5, SHA-1, SHA-256, SHA-384, SHA-512 Hashes
Generate Cryptographically Strong Passwords
Test Regular Expressions Live With Match Highlighting
Convert Unix, ISO, and Human-Readable Dates
Compare Two Text Blocks Line By Line
Check WCAG Contrast Ratio of Any Two Colors
Convert HEX, RGB, HSL, HSV & OKLCH Instantly
Extract The Dominant Palette From Any Image
Get CSS Selectors & XPath For Any Element
Test Cross-Origin Requests & Inspect CORS Headers
Capture WebSocket Frames in Real Time
Scan The Page For Broken Images Instantly
Auto-Fill Forms With Realistic Test Data
Convert Between CSV and JSON in Either Direction
Format, Validate & View XML With Syntax Highlighting
Beautify & Format SQL Queries
Save Web Pages As Clean PDFs
为您的工作流程选择最佳计划。免费开始，随时升级。
关于 DevSuite Pro 扩展功能和使用的常见问题。如果您有任何疑问，或许可以在下方找到答案。
访问 Chrome 网上应用店，搜索 "DevSuite Pro"，点击 "添加到 Chrome"，然后选择 "添加扩展程序" 进行确认。安装后，扩展程序图标将出现在浏览器工具栏中。点击即可立即使用 39 多个开发工具。
免费工具 (20+) 供所有人无证使用。专业版工具带有金色 PRO 徽章，需要有效的专业版授权才能使用。您可以在弹出窗口中看到哪些工具是免费的或专业版的——免费工具没有锁图标，而专业版工具在激活授权之前会呈现略微灰暗的状态。
一些网站具有严格的内容安全策略 (CSP)，会阻止浏览器扩展的某些操作。这在银行和政府网站上尤为常见。此外，Chrome 的内部页面 (chrome://) 不允许扩展程序运行内容脚本。
不是。通过“移动元素”、“实时文本编辑器”、“删除/隐藏元素”和“CSS Inspector”等工具所做的所有更改都是暂时的。它们只影响您目前在浏览器中看到的内容。刷新页面将使所有内容恢复到原始状态。
打开 DevSuite Pro 弹窗，点击右上角的“设置”图标。向下滚动到“授权”部分，将您的授权码粘贴到输入框中，然后点击“激活”。如果代码有效，徽章将从 FREE 变为 PRO，所有专业工具将立即解锁。
您可以通过以下方式移动停靠栏：前往“设置”并选择不同的侧边栏位置——顶部、底部、左侧或右侧。您也可以通过在“设置”中关闭“在页面上显示停靠栏”开关，或随时按下 Ctrl+Shift+X 来完全隐藏停靠栏。
不会。DevSuite Pro 不会收集、跟踪或传输您的任何浏览数据。所有设置均保存在浏览器本地。唯一的外部请求是在激活授权码期间发送到我们的服务器，用以验证您的激活码。
可以！DevSuite Pro 在 Chrome 网上应用店和 Firefox 附加组件商店中均有提供。它可以运行在 Chrome、Edge、Brave 以及其他基于 Chromium 的浏览器，也可以在 Firefox 上运行。
