如何在Chrome中修改HTTP请求名称？（基于Node与Angular）

Chrome DevTools的Network面板里，GET请求的名称默认会显示完整请求路径（包含查询参数），要修改这个显示名称，结合你的技术栈，有以下几种可行方案：

方案1：Angular拦截器加自定义请求头，配合DevTools显示 #

通过Angular的HTTP拦截器给请求添加自定义标识头，再在DevTools中开启该头的显示列，实现自定义名称的展示：

1. 编写Angular拦截器：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class RequestLabelInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 给目标GET请求添加自定义请求头，替换成你需要的名称
    const labeledReq = req.clone({
      headers: req.headers.set('X-Request-Label', '用户数据查询')
    });
    return next.handle(labeledReq);
  }
}

2. 在Angular模块中注册拦截器：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestLabelInterceptor } from './request-label.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: RequestLabelInterceptor, multi: true }
  ]
})
export class AppModule { }

3. 在Chrome DevTools中开启自定义列：

• 打开Network面板，右键点击列标题（如Name、Method）
• 勾选「Request Headers」下的X-Request-Label，就能看到自定义的请求名称列。

方案2：后端路由优化，将参数转为路径参数 #

把查询参数改为路径参数，让请求路径本身更具语义，Chrome会直接显示优化后的路径作为请求名称：

比如原请求是GET /api/data?id=123&type=user，改为GET /api/data/user/123。

Node后端（Express示例）路由定义：

app.get('/api/data/:userType/:userId', (req, res) => {
  const { userType, userId } = req.params;
  // 处理业务逻辑
  res.send(yourData);
});

Angular前端请求代码：

this.http.get(`/api/data/${userType}/${userId}`);

方案3：DevTools临时手动修改名称 #

如果只是临时查看需求，可右键点击Network面板中的目标请求，选择「Name」->「Edit」，手动修改显示名称。注意该修改是临时的，刷新页面后会恢复默认。

内容的提问来源于stack exchange，提问作者petrushka_95