核心功能
DevSuite Pro 的核心功能
DevSuite Pro 提供 64+ 款开发者工具,用于检查、测量、设计和分析网页。借助直接构建在浏览器中的强大功能,提升您的工作流程。
CSS 检查器
将鼠标悬停在任意元素上,即可立即查看并实时编辑其 CSS 样式,轻松调试和调整设计。
了解更多 →
元素检查器
点击任意元素以检查其属性、尺寸、间距、字体和颜色。无需打开浏览器开发者工具即可了解页面结构。
了解更多 →
标尺与参考线
在任意网页上测量距离、检查对齐方式,添加像素级精确的标尺和参考线,确保设计对齐完美。
了解更多 →
取色器
从页面上任意元素拾取颜色,一键将 HEX、RGB 或 HSL 值复制到剪贴板。
了解更多 →
截图捕获
捕获任意网页的整页或可见区域截图,即时下载,适合分享设计和反馈错误。
了解更多 →
响应式测试
在不同屏幕尺寸和设备分辨率下预览任意网页,无需离开浏览器即可测试响应式设计。
了解更多 →
实时检查和编辑 CSS 样式
CSS Inspector 让您只需将鼠标悬停在元素上,即可立即查看任何元素的样式,并直接在浏览器中实时编辑 CSS 属性。
调试 CSS 动画和过渡
Animation Inspector 检测、暂停并逐帧检查 CSS 动画、过渡和 @keyframes,让动画调试变得简单。
将 CSS 即时转换为 Tailwind 类
右键点击任意元素,即可将其 CSS 样式转换为可直接粘贴的 Tailwind CSS 实用类。
可视化页面布局结构
为所有元素应用 1 像素轮廓,以可视化页面布局并立即调试布局问题。
为任意元素获取 Tailwind 类
悬停在任意元素上,查看带响应式和暗黑模式变体的等效 Tailwind 类。
查看 HTML DOM 树结构
查看实时 HTML DOM 树层次结构,轻松浏览文档结构。
识别使用的 JavaScript 框架
检测网站是否使用 React、Vue、Angular、Svelte、Next.js 或其他框架。
拖拽元素重新定位布局
拖动元素以可视化方式重新定位布局,无需编写代码。
永久移除元素
点击即可永久抑制弹出窗口、横幅或该站点上的任何元素。
提取 HTML、CSS 和 JSON 数据
提取任意元素的内部 HTML、计算 CSS 和 JSON 数据。
导出为 React/Vue/Svelte
将页面元素转换为可直接粘贴的 React JSX、Vue SFC 或 Svelte 代码。
捕获整页或单个元素
捕获可见视口、整页滚动截图或单个 UI 元素。
批量下载所有页面图像
批量下载所有页面图像(PNG、JPG、WebP、SVG)为 ZIP 文件。
查找、预览和复制 SVG
查找、预览、优化和复制内联矢量 SVG 或直接下载它们。
用本地文件交换实时图像
用本地文件交换实时图像,实现持久的模拟效果。
将 URL 转换为可扫描的二维码
将当前 URL 或文本转换为可扫描的二维码。
测量像素精确的尺寸
绘制像素精确的标尺以测量网站尺寸和元素。
并排预览多个屏幕尺寸
并排预览移动、平板和桌面布局,同步滚动。
测量元素之间的像素距离
立即查看任意两个元素之间的 X、Y 和对角线像素距离。
调试堆叠上下文
可视化诊断堆叠上下文和隐藏的模态对话框。
检查 CSS Grid 和 Flexbox 容器
检查带有显示间距和对齐的叠加层的 CSS Grid 和 Flexbox 容器。
生成预测的注意力热图
根据视觉层次结构生成预测的用户注意力 UX 热图。
选择性清除当前站点数据
仅针对当前站点选择性地清除缓存、Cookie 和本地存储。
识别框架和分析工具
识别任何网站背后的技术栈(框架、分析、CMS)。
页面 SEO 审计
全面的页面 SEO 审计:元标签、H1-H6、OpenGraph、规范化和链接分析。
WCAG 2.1 合规审计
自动 WCAG 2.1 审计,检查对比度问题、ARIA 问题和 ADA 合规性。
直接编辑网页文本
点击即可直接编辑现有网页文本,用于模拟。
全局替换网站字体
用 1,500+ 款 Google 字体全局或按元素替换站点排版。
发现页面上使用的字体
发现页面上使用的网络字体和系统字体。
像素精确的滴管工具
用于 HEX、RGB 和 HSL 值的像素精确滴管工具。
为任意网站应用深色主题
为任何网站应用智能深色主题,减轻眼睛疲劳。
一键禁用 JavaScript
一键禁用 JS,测试 SSR 渲染和站点弹性。
查看、编辑和导出 Cookie
查看、编辑、导入和导出浏览器 Cookie,用于调试身份验证流程。
查看控制台日志和错误
用于控制台日志、警告和错误的内联查看器。
捕获 fetch、XHR 和 AJAX 请求
捕获 fetch、XHR 和 AJAX 请求,包含详细的标头和有效负载。
管理 localStorage 和 sessionStorage
管理 localStorage 和 sessionStorage,用于功能标志和状态。
扫描损坏的超链接
扫描页面以查找损坏的超链接以及 404/500 错误。
快速时间指标和健康评分
快速时间指标、资源细分和页面速度健康评分。
美化和验证 JSON
立即美化、验证和打印 JSON 文件。
Base64 双向文本转换
双向文本到 Base64 的转换。
安全编码 URL 字符串
安全地编码或解码 URL 查询字符串。
转义 HTML 特殊字符
转义特殊字符以安全输出 HTML。
解析反斜杠序列
解析正则表达式和 JSON 字符串的反斜杠序列。
图像和 Base64 之间转换
使用数据 URL 将图像内联到 CSS/HTML 中。
解码 JSON Web Token
解码 JSON Web Token 并验证有效负载/声明。
生成加密随机 UUID/GUID
生成加密强随机 v4 UUID/GUID。
计算 MD5、SHA-256、SHA-512
计算 MD5、SHA-256 和 SHA-512 哈希。
创建高度安全的随机密码
创建高度安全的随机密码短语。
测试正则表达式
通过实时高亮和捕获组测试正则表达式。
在 Unix、ISO 和人类可读之间转换
在 Unix、ISO 和人类可读日期之间转换。
逐行比较两段文本
逐行比较两段文本以发现代码更改。
验证 WCAG 合规等级
验证背景色和文本色的 WCAG 合规等级。
在 CSS 颜色格式之间转换
在一个面板中将任意颜色转换为所有 CSS 格式(HEX、RGB、HSL、HSV、OKLCH),并带透明度变体。
从图像中提取调色板
直接从照片和主视觉中提取调色板。
获取 CSS 选择器和 XPath
获取 CSS 选择器、完整 XPath 和 querySelector 代码片段,用于测试自动化。
诊断跨域问题
诊断跨域 "被 CORS 阻止" 的错误和预检请求。
调试实时 WebSocket 帧
捕获实时 WebSocket 帧以调试聊天应用程序和 socket.io。
突出显示丢失的图像
突出显示缺失或加载失败的图像。
用虚拟数据自动填充输入
用真实的虚拟数据自动填充输入,用于快速 QA 测试。
美化和验证 XML
美化和验证 XML 有效负载和站点地图。
整理和组织 SQL 查询
将混乱的 SQL 查询缩进和组织为可读代码。
将网页保存为干净的 PDF
将干净的网页保存为 PDF,自动移除广告,并打印文章。