终极的 开发者工具 用于网页设计和调试

实时检查和编辑 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,自动移除广告,并打印文章。

从页面本身发送 REST、GraphQL 和 WebSocket 请求

API Tester 是一个用于 REST、GraphQL 和 WebSocket 调用的内置 HTTP 客户端，它在您所在页面的上下文中运行 - 因此您的…

阻止请求、重写标头和虚假 API 响应

Request Mocker 无需接触后端即可更改浏览器中的网络流量 - 阻止请求、设置或删除请求和响应标头，并返回您自己的状态代码、正文和延迟，以便您可以测试真实 API…

使用页面时观看 LCP、CLS 和 INP 直播

Core Web Vitals 显示 Google 排名的三个指标 - LCP、CLS 和 INP - 在您正在查看的页面上实时测量，根据 Google…

查找未使用的 CSS 规则和 JavaScript 膨胀

代码覆盖率针对实时页面测试每个可读样式表中的每个选择器，以便您可以查看哪些 CSS…

无需打开 DevTools 即可查看加载时间线

Resource Waterfall 在时间轴上绘制页面发出的每个请求，每个条都分为其实际阶段 - 排队、DNS、TCP、TLS、等待和下载 - 带有 FCP、LCP、DOMContentLoaded…

一目了然地阅读您的安全标头和内容安全策略

安全和 CSP 检查器会读取您所在页面的响应标头并对它们进行评分 - 内容安全策略、HSTS、Referrer-Policy、跨源系列等 - 然后按指令分解 CSP…

查看页面上的每个分析脚本、像素和第三方跟踪器

Tracker & Pixel Scanner 列出了访问者正在观察的内容——分析、广告像素、会话记录器、标签管理器、聊天小部件和同意工具——按类别分组，并在旁边显示每一项的证据。…

在任何页面上读取和更改Redux、Zustand、Pinia和Vuex状态

State Inspector会在您所在的页面上查找Redux、Zustand、Pinia和Vuex…

提取网站的颜色、字体和CSS变量作为Design Tokens

Design Tokens收集页面使用的每个CSS变量、颜色、字体堆栈、半径和阴影，将它们分类为基本tokens、主题模式和组件范围，并将它们下载为Figma的W3C design-token…

查看哪些元素响应点击、悬停和滚动 — 并观察 DOM 变化

Event Listeners概述了具有event listener的每个元素，按类型着色（单击、悬停、滚动、触摸、键盘和表单），显示每个处理程序的来源，并在 DOM…