后端开发过程关闭 com.chrome.devtools.json 请求方法

1584 字

8 分钟

后端开发过程关闭 com.chrome.devtools.json 请求方法

2025-12-17

2026-05-06

博客

Chrome

/

开发体验

前言#

如果你在开发服务器过程中遇到这样的一个请求：“/.well-known/appspecific/com.chrome.devtools.json”，或许你会很疑惑，自己的代码中并没有写这样的一个请求，其实它是 Chrome DevTools 发起的一个资源请求，核心目的是为了实现 “自动工作区文件夹” 功能 —— 让 DevTools 能自动识别本地开发服务器的项目结构，目的是跳过手动配置直接编辑并保存文件到本地源码。

但是作为开发者，开发环境后台输出意料之外的请求总是让人恼火，尤其对于不了解该功能的开发者，容易误以为是自己的路由配置或代码出现 bug。

解决方法#

针对这个请求，我们可以根据需求选择 “禁用” 或 “利用” 两种策略

禁用方法#

打开 Chrome 浏览器，在地址栏输入 chrome://flags/#devtools-project-settings；
在打开的页面中，找到 “DevTools Project Settings” 选项并设置为 “Disabled”;
重启浏览器，后续将不再发起该请求。

深入了解 com.chrome.devtools.json#

当你在工作本地项目时打开 Chrome DevTools，它会自动向 URL /.well-known/appspecific/com.chrome.devtools.json 发送请求以检查特定的 JSON 文件。此文件包含有关你的项目文件夹结构的信息，使 DevTools 能够将你的本地文件映射到浏览器中加载的资源。

触发条件#

其实这个请求并非所有场景下都会出现，它的触发有严格限制：

仅当项目运行在localhost（本地开发服务器）时触发；
仅在开发模式下，且 Chrome DevTools 处于打开状态；
仅 Chromium 内核浏览器（Chrome、Edge、Brave 等）会发起该请求，Firefox 等其他浏览器无此行为。

功能背景#

该请求是 Chrome DevTools 在 M-135 版本（2025 年发布）新增的 “Automatic Workspace Folders”的功能，在这个功能出现之前，Chrome 的 Workspace 功能虽能实现 “DevTools 编辑→本地文件同步”，但存在两大问题：一是需要手动配置文件映射，操作繁琐且不直观；二是多项目切换时需重复设置，易用性极差。而 “Automatic Workspace Folders” 功能通过自动识别项目结构，完美解决了这两个痛点 Chrome 开发者工具中的自动 Workspace 连接。

文件：com.chrome.devtools.json 的规范#

DevTools 之所以发起请求，是为了获取一个特定的 JSON 文件，该文件需满足以下要求：

路径位置：必须放在项目根目录的 /.well-known/appspecific/ 文件夹下；
核心结构：包含 workspace 对象，且必须有两个属性：
- root：项目文件夹的绝对路径（如 /Users/foobar/Projects/my-awesome-web-project）；
- uuid：项目唯一标识，推荐使用 v4 版本 UUID（可通过 npx uuid v4 生成）。

示例文件内容如下：

json

1
{
2
  "workspace": {
3
    "root": "/Users/foobar/Projects/my-awesome-web-project",
4
    "uuid": "53b029bb-c989-4dca-969b-835fecec3717"
5
  }
6
}

如果服务器无法返回该文件，就会出现 404 错误 —— 这也是大多数开发者遇到的核心问题，因为 Remix、Next.js、SvelteKit 等主流框架默认都没有配置该路由。

充分利用 com.chrome.devtools.json#

如果想充分利用 Chrome 的这个实用功能，只需让服务器正确返回 JSON 文件即可。不同框架有不同的实现方式，以下是主流场景的配置指南：

通用手动配置（适用于所有框架）#

在项目根目录创建文件夹：/.well-known/appspecific/；
在该文件夹下创建 com.chrome.devtools.json 文件，按规范填写 root 和 uuid；
确保服务器能正常访问该静态文件（如使用 npx serve 启动简单服务器）。

框架专属配置（更高效）#

Vite 项目（React、Svelte 等）：使用 vite-plugin-devtools-json 插件自动生成文件，无需手动配置：
1. 安装插件：npm install --save-dev vite-plugin-devtools-json；
2. 在 vite.config.js 中引入：
  
  javascript
  
  运行
```
1
import { defineConfig } from 'vite';
2
import devtoolsJson from 'vite-plugin-devtools-json';
3

4
export default defineConfig({
5
  plugins: [devtoolsJson()],
6
});
```

Remix 项目：创建路由文件 app/routes/[.]well-known.appspecific.[com.chrome.devtools.json].tsx，添加 loader 函数：

typescript

运行

1
import { json } from '@remix-run/node';
2

3
export const loader = async () => {
4
  return json({
5
    workspace: {
6
      root: process.cwd(),
7
      uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
8
    },
9
  });
10
};

Next.js 项目：在 app/.well-known/appspecific/com.chrome.devtools.json/ 目录下创建 route.js：

javascript

运行

1
export async function GET() {
2
  return Response.json({
3
    workspace: {
4
      root: process.cwd(),
5
      uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
6
    },
7
  });
8
}

优点：启用 “自动工作区文件夹” 功能，实现 DevTools 实时编辑本地文件，提升调试效率；

缺点：需要少量配置，新增文件会带来轻微的维护成本。

如何使用 “Automatic Workspace Folders” 功能#

配置完成后，即可享受该功能带来的高效调试体验，步骤如下：

启动本地开发服务器（如 npm run dev），确保项目运行在localhost；
打开 Chrome DevTools（快捷键 Ctrl+Shift+I 或 Cmd+Option+I）；
切换到 Sources 标签，找到 Workspace 面板；
点击项目文件夹旁的 “Connect”，并允许 DevTools 访问本地文件；
此后在 DevTools 中编辑 HTML、CSS、JS 文件，更改会自动保存到本地源码，文件旁会显示绿色圆点表示映射成功。

常见问题与最佳实践#

1. troubleshooting 常见问题#

禁用功能后请求仍存在：清除浏览器缓存或重新启动 Chrome；
Brave 浏览器也出现该请求：Brave 基于 Chromium 内核，需在 brave://flags/#devtools-project-settings 中禁用；
UUID 无效报错：使用 npx uuid v4 生成标准 v4 UUID，避免手动编写；
配置后文件无法访问：检查服务器是否正确配置静态文件访问，或路由是否匹配。