接口参数总是对不上？我用这个在线 URL 解析器省了半小时调试时间
上周联调一个内部接口，前端传过来的 URL 长成这样：
https://api.example.com:8443/v1/users?role=admin&status=active&page=2&pageSize=20#detail后端同事说参数没对齐，前端说肯定传了。我拿着这串地址盯了半天，手动拆协议、域名、端口、路径、查询串，眼睛都快看花了。后来干脆找了个在线 URL 解析工具，一键拆完，五分钟定位问题——原来是pageSize被拼成了pagesize，大小写不一致导致校验失败。
一、手动拆 URL 的痛
做后端或者接口联调时，经常要处理这种复杂 URL：
- 带端口的，比如
:8443 - 带鉴权信息的，比如
user:pass@host - 查询参数七八个，顺序还乱七八糟
- 有些参数被 URL 编码过，肉眼根本看不懂
- hash 后面还挂了一堆前端状态
以前我都是复制到浏览器控制台里，写一段new URL(...)再展开看。步骤倒是不复杂，但每次都要打开控制台、写临时代码、删变量，很打断思路。特别是手机上收到同事甩过来的链接，根本没法这么搞。
二、在线 URL 解析器能拆什么
这次用的工具把 URL 拆成了下面这些字段，基本覆盖了我日常需要的全部信息：
| 字段 | 说明 | 示例值 |
|---|---|---|
href | 完整 URL | https://user:pass@www.example.com:8080/path/to/page?id=123&name=test#section |
protocol | 协议 | https: |
origin | 来源（协议+主机+端口） | https://www.example.com:8080 |
username/password | 鉴权信息 | user/pass |
host | 主机（含端口） | www.example.com:8080 |
hostname | 主机名（不含端口） | www.example.com |
port | 端口 | 8080 |
pathname | 路径 | /path/to/page |
search | 查询字符串 | ?id=123&name=test |
hash | 哈希 | #section |
最实用的是下面这块：查询参数会被自动解析成表格，参数名、参数值一列一列摆出来，还能勾选“显示解码后的值”。像%E4%B8%AD%E6%96%87这种编码过的内容，直接就能看到原文。
三、我的实际使用步骤
- 复制前端或日志里的完整 URL；
- 粘贴进工具的输入框；
- 点“解析”；
- 看
pathname确认接口路径对不对； - 看查询参数表格，逐个核对字段名和值；
- 如果参数被编码，勾选解码再核对；
- 复制归一化 URL 或 JSON 结果丢给同事。
整个过程不需要写任何代码，也不用开 IDE。对于我这种经常要在浏览器、终端、微信之间来回切换的人来说，能少开一个窗口就少开一个窗口。
四、踩过的一个坑
有一次我复制了一条从日志里截出来的 URL，解析后username和password字段居然是明文。当时吓一跳，以为工具把凭据上传到服务器了。后来看了下说明，这种纯前端工具是在浏览器本地解析的，URL 不会离开本机。不过这也提醒我以后复制带密码的链接时要先脱敏，别把生产环境的账号密码随手丢到公共页面里。
另外注意，如果 URL 本身就是非法的（比如协议写成了ht!tp://），解析结果会不准确。遇到这种情况我通常会先用工具自带的示例快速验证一下是不是工具问题，再回头检查原始链接。
五、什么时候我会用它
- 接口联调时快速核对入参；
- 排查 redirect 链路里被改动的参数；
- 写爬虫或测试脚本时确认 URL 结构；
- 整理接口文档，需要把长链接拆成字段说明；
- 前端路由里带 hash 状态，需要单独取出来看。
这种小工具不需要安装，打开网页就能用，属于那种“平时想不起来，用一次就顺手收藏”的类型。
六、相关工具
我是在整理日常开发小工具时发现的这个 URL 解析器，同类的还有 Cron 表达式解析、正则测试、JSON 格式化等，都是浏览器本地处理，比较适合临时救急。如果你也习惯用在线工具解决这类小问题，相关工具地址：
https://gjupai.com/
项目地址：https://gjupai.com/