Years ago my "dev tools"书签文件夹大约有二十个条目,每个条目都是一个不同的单一用途网站,每个条目都有自己的广告布局,自己的cookie横幅,还有- 这是最后困扰我的部分- 自己的服务器,我的数据悄悄上传到其中一个,我粘贴了一个暂存API令牌来解码,过半时我想:我不知道这个站点用那个字符串做了什么,那天我不再信任随机工具站点,开始构建 Toolz.dev、每个工具都在浏览器中运行,而你粘贴的任何东西都不会离开选项卡。
This is the toolkit that out of that。not a "top 600 工具"列表 - toolz。dev 现在只有五十多个工具,我宁愿向您展示一个正在工作的 Web 开发人员每周打开的工具,也不愿将计数垫到这里,它们按您正在做的工作分组:塑造数据、争论文本、编写 CSS、准备图像、运输 SEO 以及其间的安全和编码杂务。一切都是免费的,不需要帐户,并且可以在本地进行处理。
TL;博士: 构建时保持一个浏览器选项卡组打开。对于数据: json格式化程序、 JSON 迪夫、 YAML 验证器、 CSV 查看器。用于调试令牌: jwt解码器、 Base64 转换器、 时间戳转换器.对于正则表达式: 正则表达式测试仪。对于CSS: 梯度发生器、 颜色选择器、 CSS 迷你器.对于图像: 调整大小、 压缩、 格式转换器。对于搜索引擎优化: 元标记生成器、 打开图预览。所有客户端,全部免费。
当您有终端时,为什么要费心使用浏览器工具?
公平的问题 - 我也住在终端里。诚实的答案是,对于一次性、看一看的任务,一个具有即时反馈的视觉工具会跳动记住 jq 咒语或 openssl flag。api在凌晨2点递给我一个迷你化的blob时,我不想写格式化脚本;我想粘贴它,看看当我需要眼球时两个json响应是否不同,红色/绿色差异比通过任何东西都快。
但决定因素不是便利,而是 数据去向。大量"免费在线"工具上传任何你粘贴到服务器处理它。对于公开样本和生产令牌,客户记录或未发布的资产的真正问题来说,这很好。本指南中的每个工具都完全在您的浏览器中运行 - 处理发生在您的机器上的JavaScript中,并且没有上传步骤需要担心。这种组合,即视即刻加上默认私有,是将这些保留在选项卡组中而不是外壳的全部原因。
整形数据:JSON、YAML、CSV、XML
这是我最常用的类别,因为大多数 Web 开发都在系统之间移动结构化数据,并在数据中断时眯着眼睛查看它。
的 json格式化程序 is 主力-粘贴一个简化的API响应, 并得到缩进, 可读的输出与语法错误位于JSON无效时。当你需要知道 改变了 在两个有效载荷之间, JSON 迪夫 比较结构而不是逐行比较,因此重新排序的键不会产生幻象差异。对于作业的配置侧, YAML 验证器 捕捉安静的 YAML 陷阱 - 缩进中的选项卡、重复的键以及转动的类型强制惊喜 version: 1.10 进入数字 1.1 - 在 Kubernetes 或 CI 文件炸毁部署之前。
数据很少保持一种形状。 json to csv 並 CSV 转 JSON 转换器在 API 输出和电子表格之间移动 CSV 查看器 将混乱的 CSV 渲染为真实的表,以便您可以实际阅读它,并且 XML 到 JSON 並 JSON 到 YAML 工具涵盖了您使用旧 API 和配置文件命中的格式跳跃。如果您想要该类别的更深版本,则 JSON 工具的完整指南 浏览整个工作流程。
调试令牌和时间:JWT、Base64、时间戳
Auth和时间在哪里"代码看起来正确"错误来隐藏,它们几乎总是被解决 看数据 而不是重新读取逻辑。
的 jwt解码器 将令牌分成标头、有效负载和签名,并向您显示声明 - 这就是您发现这一点的方式 exp 你发誓没事其实是过去的,reach for it 而不是一个通用的解码器,因为 JWT 使用 base64url (RFC 4648 §5),而不是标准的Base64,而且很简单 Base64 转换器 是其他一切的正确工具 - 基本的 auth 标头、数据 URI、编码有效负载。 时间戳转换器 将 Unix 秒和毫秒变成真实日期(秒与毫秒混淆是我看到的最常见的 auth 错误),以及 时区转换器 並 日期差异 工具处理"用户现在是什么时间"和"这两个事件之间间隔多久"问题。我写下了整个调试流程 API调试工具指南 如果你想要战争故事。
没有猜测的雷格克斯
正则表达式是一次写入、永远调试。 正则表达式测试仪 让您根据带有实时匹配突出显示的示例文本构建模式,这样您就可以看到与键入它而不是部署验证器和希望的那一刻匹配的内容。如果您宁愿从构建块组装模式, 正则表达式构建器 从另一个方向接近它。无论哪种方式,点都是一样的:在它守护表单或解析日志之前,先对实字符串测试模式。 regex 构建器指南 涵盖了值得记住的常见模式。
文本争论:计数、外壳、差异、占位符
毫无魅力的弦乐杂务加起来。 字数计数器 根据长度限制检查内容(元描述、推文、标题)。 箱转换器 camelcase、snake_case、kebab-case 和 PascalCase 之间的翻转 - 当您在代码库中移植变量名时,非常宝贵。 文本差异 比较两个块并突出显示每个更改,即 Git 之外的代码审查和配置审核合二为一。
具体用于构建和原型设计: 洛雷姆异能发生器 用右侧填充模型 量 的占位符文本(有一个 尺码占位符文本的完整指南),the 蛞蝓发生器 将标题变成干净的 URL 路径,并且 字符串反向 工具处理奇怪的一次性。 文本工具指南 将这些联系在一起。
CSS 和颜色
前端抛光剂就住在这里。的 梯度发生器 为您提供线性梯度和径向梯度以及回手制作 CSS 的可视化编辑器 - 无需猜测角度和停止(the) 梯度指南 更深入)。 颜色选择器 在 HEX、RGB 和 HSL 之间进行转换,我可以在颜色最终无法通过无障碍审核之前检查对比度; 颜色选择器指南 涵盖对比数学。当该发货时, CSS 迷你器 並 HTML 迷你器 删除空格和注释以将字节从电线上剃掉。
网络图像
图像通常是页面上最重的东西,因此此类别可以自行付费 核心网络活力. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 10 图像调整大小 工具设置了精确的尺寸(并且有一个值得了解的视网膜陷阱,覆盖在其中 指南),the 图像压缩器 在保持质量的同时缩小文件大小,并且 图像格式转换器 PNG、JPG 和 WebP 之间移动,因此您可以为该作业提供正确的格式。 后台卸妆师 是一款色键去除剂 - 快速且私密,平坦的背景非常好,并且诚实地了解其局限性 指南. X = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 1000 = 10 图像工具指南 是这套的支柱。
运输:SEO、共享和安全
一页上线前的最后一英里。 元标记生成器 建立您的标题、描述、 打开图表还有推特卡标签,以及 打开图预览 在您找出社交上的困难方法之前,展示链接在共享时的外观。 robots.txt 生成器 並 中海外空建设者 处理抓取规则和活动跟踪,以及 QR 生成器 制作可扫描的打印或幻灯片代码。在安全卫生方面, 密码生成器 並 哈希发生器 涵盖强有力的秘密和诚信检查,以及 用户识别器 吐出测试数据和数据库密钥的标识符。
客户端工具与基于上传的工具:重要的比较
| Toolz.dev(客户端) | 典型的"免费在线工具" | |
|---|---|---|
| 处理发生的地方 | 在您的浏览器中 | 在远程服务器上 |
| 您的数据(令牌、文件、代码) | 永远不要离开选项卡 | 上传到第三方 |
| 注册/登录 | 没有 | 完整功能通常需要 |
| 使用限制 | 工具上没有 | 经常有上限或付费墙 |
| 速度 | 即时,无往返 | 靠上传 + 服务器 |
| 适用于敏感数据 | 是的,根据设计 | Risky - 您正在信任他们的服务器 |
| 工具数量 | 五十多岁,策划 | 每个站点通常有一个工具 |
我最关心的一行是第二行。对于公共样本来说,处理发生在哪里并不重要;对于生产秘密来说,这非常重要。构建整个工具包客户端意味着我永远不必询问"这是将此粘贴到"中的安全站点吗? - 它们都是。
我实际使用方式:链接工具
大多数实际任务都是一个小管道,而不是单击:
调试 API 响应:将其粘贴到 json格式化程序,解码任何带有 的令牌 jwt解码器,转动 exp 与声称约会 时间戳转换器然后将损坏的响应与工作响应进行比较 JSON 迪夫。
准备英雄形象: 后台卸妆师 如果需要切口,那么 图像调整大小 那么对于精确的尺寸 图像压缩器 要达到您的页重预算,请使用以下方式转换为 WebP 格式转换器 在出路。
运输新页面:使用以下内容生成标签 元标记生成器,检查共享卡中的 打开图预览并确认您的副本适合 字数计数器。
将每天触摸到的五六个保持在固定选项卡组中,其余的则在需要时在 K 调色板中搜索一次。
常见问题
这些 Web 开发人员工具真的免费吗?
Yes。toolz。dev上的每个工具都可以免费使用,没有高级层,没有功能门,工具本身也没有使用上限,使用它们不需要帐户。
我必须创建帐户还是登录?
No。打开一个工具,立即使用。没有注册,而且因为工具在浏览器中运行,所以没有什么可以同步到配置文件。
粘贴令牌、密钥或私人数据安全吗?
是的,这是核心设计决策。工具在 JavaScript 中处理客户端的所有内容,因此您粘贴的内容 - JWT、API 响应、未发布的映像 - 在您的计算机上处理,并且不会上传到服务器。这是使用它们而不是基于上传的替代方案的主要原因。
Toolz.dev 有多少个工具?
目前只有五十多个,涵盖数据、文本、编码、CSS、颜色、图像、SEO、安全性和计算器类别。我宁愿故意增长集合,也不愿声称一个大多是填充物的数字 - 此处列出的每个工具今天都存在并有效。
这些工具在移动设备上工作吗?
是的,界面响应灵敏,可以在移动浏览器中工作。较重的工作(尤其是大型图像处理)在桌面上更快、更舒适,但工具本身可以以任何一种方式运行。
这些工具离线工作吗?
Mostly yes。因为每个工具都在浏览器中运行JavaScript,一旦页面加载,工具就一直工作,没有连接 - 在飞机或片状网络上很有用。您只需在线即可第一次打开工具;之后处理本身不需要服务器。
客户端和服务器端在线工具有什么区别?
Client-side工具在你的浏览器中完成它的工作,所以你粘贴的数据永远不会离开你的机器,一个服务器端工具将你的输入上传到远程计算机来处理它,并将结果发回输出可以看起来相同,但只有客户端工具会保留一个生产令牌,私人文件或客户记录在别人身上's服务器 - 这就是为什么这里的每个工具都是构建客户端的。
我可以使用这些工具代替终端或 IDE 工具吗?
对于一次性、可视化的任务 - 格式化一个 blob、解码一个令牌、观察一个 diff、构建一个梯度 - 它们通常比记住命令行等效项更快。对于脚本化、可重复的工作,您仍然需要终端。实际上,它们并排坐着:在通常的客户端中发出请求,然后将输出粘贴到这些中以读取它。
我应该首先添加哪些工具的书签?
从您每天都会触摸的开始: json格式化程序、 jwt解码器、 正则表达式测试仪、 时间戳转换器CSS 或图像工具中与您的工作相匹配的工具。在您点击需要它们的任务时添加其余的。
包裹起来
A modern web developer's工具包不是一大应用程序- 它是一个十几个小而尖锐的工具,你不假思索地伸手去拿,陷阱是把它们分散在十几个草图网站,这些网站上传你的数据来处理它,修复的是把你信任的那些放在一个标签组中,全部在本地运行,全部免费,全部一个按键离开。
就是这样 Toolz.dev 是:这些工具中只有五十多个,构建的客户端,以便您的令牌和文件保持您的。Pin the json格式化程序的,该 正则表达式测试仪并且 时间戳转换器 jin天,并按照工作要求加上其余的,永远自由,yi设计私密。



