Trae魔法师：API调试从未如此简单

全栈小刘
872 阅读12分钟

image.png

开篇

时间过的好快呀，2025 又过了三分之一了，马上将又是一年，似乎已经看到了26年的到来曙光， 前年春晚的记得有个很火的歌，叫什么上春山，感觉才没过多久

这一下子就到了25年的中旬，时间真是太温柔了，它的温柔在于它无声的更替。每日来回往复奔波上班游走的瞬间， 清晨的地铁、正午的午睡、黄昏落下时候、深夜刷手机时，就在那不知不觉间瞬间悄然度过，

仿佛就是一霎那， 今天又到了是周五，暮色轻柔，回家的地铁似乎也格外温暖，虽然明明是夏天。却又一点都不显得炎热，大家早早的都下班了，地铁的到来的灯光渐次亮起，空气中嘈杂的声音弥漫着一丝慵懒的宁静，我心中已不觉浮现出家的轮廓，虽然已习以为常，对家还是格外的期待，今天回去有时间，看了掘金的文章，想想无聊，写几遍文章吧，于是就有了这篇，先行动起来

行动

好了好了，开始进入正题，其实写这种长篇幅文章,我们不需要向写作文那样，写多少华丽的辞藻， 思路清晰，能写清楚大概就行.

咱们开始进入正题，大概多年前，作为一个研发，我便有了一个想法——开发一款属于自己的API调试工具。那时，技术的积淀尚浅，许多细节仍不清晰，脑海中充满了激情，却不知道从何处着手。

多年之后，当我再次翻阅那些早已尘封的记忆时，偶然间看到自己曾经绘制的API工具的思维导图，上面记录了一个API工具的技术基本功能，我想获取我可以开始尝试下

image.png

那个最初的想法又突然涌上心头。于是，我拿起电脑，随手画下了一张简单的原型图：做一个轻量级的API工具，

能够发送请求并查看响应，，支持HTTP协议、RPC协议。既然只是供自己使用，用前端的技术实现就足够了，不用考虑后端架构，像是RDS、cache Redis 中间件 复杂服务器反而增加成本。哈哈，就用Electron结合Vue3、TypeScript和Vite来实现，最终还能打包成dmg 格式的安装包

image.png

image.png

有了想法，说干就干 不然时间会冲刷掉了你心里中的那份热情，说时迟那时快，我帕的一下， 很快啊，

启程

打开了Trae，点击这里下载

www.trae.ai/

image.png

既然我们要实现API工具，哪肯定需要告诉AI，我们到底要做什么，AI才能懂你，她又不是你对象，怎么可能一说就能秒懂，知道你要的全部细节，所以我们需要一步一步的引导AI，把它当成你朋友一样

  • 进入主页

image.png

在左侧选择Builder模式，模型选择最新的Gemin-2.5 Pro，这个国内后续会开放， 我是使用公司内网 内测的，所以使用SSO登陆会有这个模型， 或者你使用海外版也是一样，大家使用DeepSeekV3-0324也是一样

image.png

接下来很多同学可能就开始直接问AI了，让AI直接帮你开发首先这样是错误的，

  • 提示词
开发一个Postman API接口调试工具

image.png

这样无法发挥出AI的全部性能，你想的东西，一定是明确具体的，例如我们最开始可以问它：

  • 提示词
我需要开发一个PostMan一样的接口调试工具，请问需要有哪些功能，请你帮我列出详细功能列表

image.png

这个时候，我们将功能列表保存成markdown文件，例如：

image.png

接下来，我们需要做的就是完善功能列表的细节，将文件拖拽过来，我们开始进行对话，鼠标，选中不要动，拖动到对话框

image.png

  • 开始进行提问

image.png

  • 提示词
请你仔细完善需求的细节，使用现代化的UI，技术栈
：Ant-deisgn+vite+ts+electron
UI/UX 要求:

-   整体风格需要现代化、简洁、专业，充分利用 Ant Design 的组件美学。

-   确保主布局响应用户操作，提供流畅的交互体验。

-   合理组织组件，代码结构清晰。
-   \[可选：例如，支持亮色/暗色主题切换]
  • 经过上面那段提示词不断的补充，补充，调整，最终变成了这样的markdown格式的提示词

image.png

那么接下来，我们就开始让整个需求进行实现，

  • 注意我们需要开一个新的对话，防止出现幻觉 个人习惯哈

同时我们将直接这个草图拖动进去

image.png

image.png

如果图片无法加载使用，deepseek也是一样

image.png

20250419110245_rec_.gif

敲敲敲，很快第一版功能就实现了，目前仅支持 【GET、POST、PUT、DELETE】输入curl 解析成http 请求，也是为了方便自己吧，毕竟很多用CURL

image.png

接下来，我们继续实现，我们需要使用，我们希望当我们复制CURL的时候能够进行解析，像这类小功能需求，我们可以改成Deepseek0324，个人感觉用下来会好些，注意这里单个功能的开发

注意！注意！注意!

这里单个功能的开发一定，要使用Chat模式，效果会好很多，这样利于修改，需要有一定前端基础，哈哈

image.png

右边有个命令的按钮，点击后，你可以输入curl，就会自动解析请求

image.png

image.png

这里是模仿了Postman方式，但是又不是完全模仿，加了个按钮，哈哈哈，这里当时卡了好一会，因为要分析curl的各种类型然后在进行截取 curl ，贴下实现代码思路,

interface ParsedCurl {
  method: string;
  url: string;
  headers: { key: string; value: string }[];
  params: { key: string; value: string }[];
  data?: string;
}

export function parseCurl(curlCommand: string): ParsedCurl {
  const result: ParsedCurl = {
    method: 'GET',
    url: '',
    headers: [],
    params: [],
  };

  // 移除开头的 "curl" 和多余的空格，处理多行命令
  const command = curlCommand
    .trim()
    .replace(/^curl\s+/, '')
    .replace(/\\\n\s*/g, ''); // 处理多行命令

  // 分割命令为参数数组，保持引号内的内容完整
  const args: string[] = [];
  let current = '';
  let inQuote = false;
  let quoteChar = '';

  for (let i = 0; i < command.length; i++) {
    const char = command[i];
    if ((char === '"' || char === "'") && command[i - 1] !== '\\') {
      if (!inQuote) {
        inQuote = true;
        quoteChar = char;
      } else if (char === quoteChar) {
        inQuote = false;
      } else {
        current += char;
      }
    } else if (char === ' ' && !inQuote) {
      if (current) {
        args.push(current);
        current = '';
      }
    } else {
      current += char;
    }
  }
  if (current) {
    args.push(current);
  }

  // 解析参数
  for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    
    if (arg === '-X' || arg === '--request') {
      result.method = args[++i];
    } else if (arg === '-H' || arg === '--header') {
      const header = args[++i];
      const [key, ...valueParts] = header.split(':');
      const value = valueParts.join(':').trim();
      // 移除引号
      const cleanValue = value.replace(/^["'](.*)["']$/, '$1');
      result.headers.push({ key: key.trim(), value: cleanValue });
    } else if (arg === '-d' || arg === '--data' || arg === '--data-raw') {
      let data = args[++i];
      // 移除外层引号
      data = data.replace(/^["'](.*)["']$/, '$1');
      // 如果是 JSON 字符串，保持原样
      if (data.startsWith('{') || data.startsWith('[')) {
        result.data = data;
      } else {
        // 否则假设是 form 数据
        result.data = data;
      }
      if (!result.method) {
        result.method = 'POST';
      }
    } else if (!arg.startsWith('-') && !result.url) {
      // 解析 URL 和查询参数
      try {
        // 移除引号并解码 URL
        const cleanUrl = arg.replace(/^["'](.*)["']$/, '$1');
        const urlObj = new URL(cleanUrl);
        
        // 设置基本 URL（不包含查询参数）
        result.url = urlObj.origin + urlObj.pathname;
        
        // 解析查询参数
        const searchParams = new URLSearchParams(urlObj.search);
        for (const [key, value] of searchParams.entries()) {
          result.params.push({ key, value });
        }
      } catch (error) {
        console.error('URL parsing error:', error);
        result.url = arg.replace(/^["'](.*)["']$/, '$1');
      }
    }
  }

  // 如果没有找到 Content-Type header，但有 JSON 数据，添加 JSON Content-Type
  if (result.data && result.data.startsWith('{') && 
      !result.headers.some(h => h.key.toLowerCase() === 'content-type')) {
    result.headers.push({
      key: 'Content-Type',
      value: 'application/json'
    });
  }

  return result;
}

优化

当我加上国际化后，可以继续优化了，突然又很快啊，我发现很多平台都有这种颜色，于是我也改上去，这样B格高一些

image.png


.method-select.get :deep(.ant-select-selector) {
  color: #61affe !important;
  background: rgba(97, 175, 254, 0.1) !important;
  border-color: #61affe !important;
}

.method-select.post :deep(.ant-select-selector) {
  color: #49cc90 !important;
  background: rgba(73, 204, 144, 0.1) !important;
  border-color: #49cc90 !important;
}

.method-select.put :deep(.ant-select-selector) {
  color: #fca130 !important;
  background: rgba(252, 161, 48, 0.1) !important;
  border-color: #fca130 !important;
}

.method-select.delete :deep(.ant-select-selector) {
  color: #f93e3e !important;
  background: rgba(249, 62, 62, 0.1) !important;
  border-color: #f93e3e !important;
}

.method-select.patch :deep(.ant-select-selector) {
  color: #50e3c2 !important;
  background: rgba(80, 227, 194, 0.1) !important;
  border-color: #50e3c2 !important;
}

.method-select :deep(.ant-select-selector) {
  height: 40px !important;
  padding: 4px 12px !important;
  border-radius: var(--border-radius) !important;
}

.method-select :deep(.ant-select-selection-item) {
  line-height: 30px !important;
  font-weight: 600;
}

image.png

直接把API fox的截图贴下来，贴上去，让AI 使用CSS 慢慢微调， 这里就是借鉴apifox的风格了，哈哈哈，感觉Postman 的没那么好看，毕竟咱效率高呀，用Trae AI

image.png

接下来，让我们看看调整的历程，嘿嘿，这是最初版本～ ，可以进行切换布局

image.png

这是优化的1小时的样子，加入常规的国际化、布局切换的功能

image.png

又经过2小时半的迭代后，很快哈，加入一个历史记录功能，毕竟，你能请求有啥用，没存档啊，每次我都得重新输入crul，输入的我都烦了，我都想写死值了，反正是测试用的，给历史记录加入增删改查，这个API 工具，稍微好用一点了

image.png

其实说实话，我本来最开始就是想写一个轻量级的请求工具，但是不知道为啥，越写越上瘾，感觉AI 就像是会上瘾，后面功能越写越多、越写越多，功能都不断的堆积，下面是优化前后的心路历程，总共耗时 6小时，当然包括吃饭、就是感觉上瘾了，不开发出来都睡不着

image.png

image.png

image.png

有经历了几个小版本UI的改造，终于改成了下面的样子，似乎还是有很多不足的地方，需要改进的地方，俗话说万丈高楼平地起，没有任何是一开始就很好的，保持一个学徒心的同时，也同时不要太过激进，要平缓，一味的堆功能反而会使应用变得很臃肿，所以先写个简单的功能，周末的时候慢慢的迭代

image.png

关于开源

其实往往在这一个章节，往往是贴github的地址的，但是这里我就把它不进行开源， 原因是几点，

  • 意义不大，你要让我说出项目的细节，我是说不出个所以然来，因为全是AI开发的功能，我只是负责打辅助，AI是主力，

  • 说实在的，市面上成熟的工具实在太多了，技术门槛也低，无法起到什么太大作用， 除非结合公司的业务，进行一些单方面的优化，例如字节的psm 、IDL、go、Python xxx.... 能够结合实际的场景才有用

AI的利与弊

近几年，特别是2023至2025年间，人工智能（AI）的发展慢慢驶入快车道 ，就像高速公路意义，最近几年都是如此，发现越来越强大了， 从基本的文字对话、语音通话、视频通话、到后面的Deepseek、思维链、遇到工具的交互 MCP (模型上下文协议)、

我们也从最开始的焦虑，到现在的释然，其实我们不可否认的是，AI 这些年确实代替了很多很多的岗位也确实如此，同时帮助我们的工作进行提效，

慢慢的公司的产品都接入了AI、 oncall、sql、hive、IDE、甚至offline的一些工具、甚至连飞书的开会结束都有一个AI智能分析视频，最后解析视频中的文字、最后在进行总结，包括我去买菜，把菜一放上去，AI就智能识别这是什么菜、直接打标签，甚至都懒人化，放在10年前，要是想到这些事情，简直闻所未闻，哈哈哈，

不过AI 也有很多优化的空间，例如上下文的限制，参数上不去、各个模型之间的内卷、什么吊打Cusor、吊打Gpt 、层出不穷，

同时AI也在这个新时代、带来了很多机会，例如小红书、抖音直播带货，卖出Deepseek 教程，3 4万份，赚的盆满钵满，各类培训机构，也是如此，因为AI教程的成本似乎是毛利率100%，除了写教程要耗电，哈哈哈

最后

最后进入尾声，大家看着，我使用 Trae开发下来似乎很轻松，但是实际上还是非常废时间的，废时间地方就是在于不断的进行微调！

image.png 我给大家举个例子，例如当我现在需要加一个新的功能，比如API文件上传的功能， 你去让 trae AI 开发，沟通成本相当的高、即使使用Cursor 也是一样

但是确实也可以实现，但是你会发现，你实现了，另外的一个功能，又无法使用了，我就被一个情况折磨了一小时，文件上传了，但是，响应的面板，不知道为啥一片空白，并且AI的上下文长度有限，需要不断的进行微调，

不断的新开chat才解决、最终开始要自己上手，没有什么是一蹴而就的，不过正是这些一个一个新问题出现，我们可以想象Trae这个国产的AI IDE 的未来10年， 我预测一波，哈哈，～ 在2032年的某个下午，大概就是当我们输入一个需求

写一个大型的企业项目，要求包含掘金的功能！， 我相信，我们沟通的成本会减少很多，并且上下文长度的问题，响应速度的问题，都是达到了毫秒级！

在当下，经过一段时间的重度使用Trae，发现trae 还是不错的国产智能IDE，trae AI一定是能排上前三的宝座的

在我心目中的主观想法，国内IDE 编辑排名是这样的，当然不包含Cursor哈

image.png

哈哈这个报文的结论我们也自己用 Trae AI 生成吧，太强了！

avatar
文章
阅读
粉丝