🏠 首页 › 攻略 › 开发者工具箱：3个被忽略的神器

开发者工具箱：3个被忽略的神器

📅 2026-07-02 🏷 开发工具 · SQL格式化 · 文本比对 · SVG编辑 · 效率工具

SQL格式化、文本比对、SVG编辑，3个每天必用的开发工具。不用装软件，浏览器打开就能干活，效率直接翻倍。

你的开发工具箱里，是不是缺了这几样？

每天写代码、查数据、改配置，你肯定用过不少工具。

但有几个工具，你可能从来没注意到——因为它们看起来太简单了。

SQL格式化、文本比对、SVG编辑，这三个场景听起来都很基础。但基础的东西恰恰是最高频的。我统计了一下自己每周的使用次数：SQL格式化大概20次，文本比对15次以上，SVG编辑虽然少一些但也经常碰到。

今天把这三个工具的使用技巧整理出来。全部用 navbox 的在线工具，不用装任何软件，打开浏览器就能用。

一、SQL格式化：让乱码一样的查询语句变清晰

场景： 从日志里复制了一条SQL，或者别人发的SQL没格式化，密密麻麻挤在一行，根本看不出结构。

手动加缩进？太慢了，而且容易加错位置。

操作步骤

  1. 打开 navbox SQL格式化工具
  2. 把混乱的SQL粘贴到左侧输入框
  3. 工具自动格式化，右侧实时显示结果
  4. 点击"复制"按钮，直接粘贴到你的代码里

实际例子

原始SQL长这样：

SELECT u.name,u.age,o.order_no,o.total_price FROM users u INNER JOIN orders o ON u.id=o.user_id WHERE o.status='paid' AND o.created_at>'2026-01-01' ORDER BY o.total_price DESC

格式化后：

SELECT
  u.name,
  u.age,
  o.order_no,
  o.total_price
FROM users u
INNER JOIN orders o ON u.id = o.user_id
WHERE
  o.status = 'paid'
  AND o.created_at > '2026-01-01'
ORDER BY
  o.total_price DESC

一眼就能看出查询结构。JOIN条件、WHERE过滤、ORDER BY排序，层次分明。

进阶技巧

  • MySQL / PostgreSQL / SQLite 语法支持：工具自动识别SQL方言，不同数据库的关键字高亮不一样。如果你不确定选哪个，保持默认就行，大多数情况都能正确处理。
  • 反向压缩：格式化后的SQL如果太长，也可以点"压缩"按钮，把所有内容合并成一行，方便存入配置文件或日志。
  • 批量处理：如果你有多个SQL语句，用分号隔开粘贴进去，工具会逐个格式化，不用一个一个来。

二、文本比对（Diff）：一眼看出改了哪里

场景： 两个人改了同一个配置文件，你不知道谁改了什么。或者代码review的时候，想看具体改动了哪些行。

用IDE的比对功能也行，但有时候你只是在手机上改个配置，或者临时要看两段文本的差异。打开navbox的diff工具，比开IDE快多了。

操作步骤

  1. 打开 navbox Diff Checker
  2. 左侧粘贴"旧版本"文本，右侧粘贴"新版本"文本
  3. 工具自动标注新增、删除、修改的行
  4. 红色背景 = 删除的行，绿色背景 = 新增的行

实际例子

假设有两段nginx配置：

旧版本：

server {
    listen 80;
    server_name example.com;
    location / {
        proxy_pass http://localhost:3000;
    }
}

新版本：

server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate /etc/ssl/cert.pem;
    location / {
        proxy_pass http://localhost:8080;
    }
    location /api {
        proxy_pass http://localhost:8081;
    }
}

diff结果会高亮显示：

  • listen 80 → listen 443 ssl（端口变更）
  • 新增了 ssl_certificate 行
  • proxy_pass 目标从 3000 变成了 8080
  • 新增了 /api 路由

进阶技巧

  • 按单词比对：如果文本很短，可以切换到"按单词"模式。比如比较两个JSON值的变化，按行比对可能看不出细节，按单词比对能精确定位到哪个字段变了。
  • 忽略空白：配置文件的空格和缩进经常不一致，但这些差异通常不重要。打开"忽略空白"开关，只看实质性的内容变化。
  • 生成补丁文件：diff工具支持输出统一格式（unified diff），可以直接用 patch 命令应用到文件上。适合需要在服务器上批量打补丁的场景。
  • 和git diff对比：如果你熟悉 git diff 的输出格式，navbox的diff工具和它的显示逻辑基本一致。习惯了git diff的人上手零成本。

三、SVG编辑器：轻量级图形处理不求人

场景： 你需要改一个简单的图标、调整logo的颜色、或者给SVG加个文字标注。

用Figma？太重量级了。用Photoshop？SVG本来就不是位图，用PS改它有点大材小用。

其实很多SVG编辑需求，打开代码直接改就行。但如果想要可视化操作，navbox的SVG编辑器是个不错的选择。

操作步骤

  1. 打开 navbox SVG编辑器
  2. 上传SVG文件或粘贴SVG代码
  3. 在画布上选择元素，修改颜色、尺寸、位置
  4. 导出修改后的SVG

适合的场景

  • 改颜色：图标颜色要和品牌色对齐，直接选元素改填充色，比改代码快
  • 调尺寸：SVG放大缩小不失真，但有时候 viewBox 设置不对导致显示异常，编辑器里可以直接调整
  • 删元素：从别人的SVG库里拿了一个图标，里面有多余的图层，直接选中删除
  • 加文字：给图标加个简短的文字说明，编辑器里打字就行

进阶技巧

  • SVG代码直出：编辑完成后，工具会同时显示修改后的SVG源码。你可以直接复制源码嵌入到HTML里，不用下载文件。
  • 和CSS配合：SVG的颜色、描边等属性可以用CSS控制。在编辑器里调好基础样式后，再到CSS里做精细调整，分工明确。
  • 压缩输出：编辑完的SVG文件可能比较大，工具支持压缩输出。去掉注释、合并相同属性，文件体积能缩小30%-50%。
  • 和Diff Checker搭配：改SVG之前，先用Diff Checker对比一下改动前后的代码差异，确认只改了你要改的部分，没有意外影响到其他内容。

三个工具的组合玩法

单独用每个工具都够用，但组合起来威力更大。

场景：团队协作修改配置文件

  1. 同事A改了一份SQL查询，你用SQL格式化工具看一下结构对不对
  2. 同事B改了一份nginx配置，你用Diff Checker对比一下差异
  3. 设计给了一个新图标，你用SVG编辑器调整颜色和尺寸
  4. 最后用Diff Checker再次确认最终版本和预期的差异

整个过程都在浏览器里完成，不用切到IDE，不用装软件。

场景：代码审查（Code Review）

  1. 有人提了PR，你拉下来看代码
  2. 先用SQL格式化器检查SQL语句的规范性
  3. 用Diff Checker看具体改了什么
  4. 如果有涉及SVG资源的变更，用SVG编辑器预览效果

为什么这些工具值得用？

你可能会问：这些功能IDE里不都有吗？

当然有。但有几个优势是IDE给不了的：

  • 跨平台。Mac、Windows、Linux、甚至手机浏览器都能用
  • 零安装。不用配环境，不用装插件，打开网页就能干活
  • 轻量快速。改个SQL格式、比两段文本，开IDE太重了。这些工具就是为这种小操作设计的
  • 隐私安全。navbox的工具都是前端处理，数据不会上传到服务器。你的SQL、配置文件、设计稿都留在你自己的浏览器里

小结

SQL格式化、文本比对、SVG编辑——三个看起来不起眼的工具，加起来每周能帮你省下好几个小时。

不用追求大而全的开发环境。有时候，一个小小的在线工具，反而能解决最频繁的问题。

下次再遇到这三种场景，试试 navbox 上的工具。打开浏览器，粘贴进去，三秒钟搞定。

你的开发工具箱里，还有什么小众但好用的工具？欢迎在评论区分享。