[Fixed] No route matches URL “/.well- known/appspecific/com.chrome.devtools.json”

You might have recently encountered an error in your server-side console, particularly if you’re working with frameworks like Remix. This error typically looks like: Error: No route matches URL "/.well-known/appspecific/com.chrome.devtools.json". This blog post will guide you through understanding this problem and how to fix it.

The Problem: A Mysterious Request

This 404 error indicates that your application doesn’t have a route set up to handle requests for /.well-known/appspecific/com.chrome.devtools.json. This specific URL is being requested by Chrome’s DevTools as part of its “Automatic Workspace Folders” feature. This feature tries to map your local project files to the resources loaded in the browser, providing a more integrated debugging experience. However, if your server isn’t configured to respond to this request, it results in an error.

Solution 1: Disabling the Feature in Chrome (Recommended)

If you don’t intend to use the Automatic Workspace Folders feature or want a quick way to stop these requests from hitting your server, you can disable it directly in Chrome.

1. Open your Chrome browser.
2. Navigate to chrome://flags/#devtools-project-settings.
3. Find the flag labeled “DevTools project settings” (or similar related to workspace folders) and disable it.

Keep in mind that this is a client-side solution. Other developers working on the project might still have this feature enabled, or you might encounter it on different Chrome profiles or installations. You cannot prevent this request server-side with this method; you’d need to block it using a reverse proxy like Nginx if you want to stop it from reaching your application entirely.

Solution 2: Handling the Request on the Server (Remix Example)

If you want to utilize the feature or simply handle the request gracefully, you can add a route to your application to respond to it. For Remix applications, you can create a new route file.

Create a file named [.]well-known.appspecific.[com.chrome.devtools.json].tsx inside your app/routes/ directory. The directory structure would look something like this:

app/
├── routes/
│   ├── [.]well-known.appspecific.[com.chrome.devtools.json].tsx
│   ├── other.routes...
└── root.tsx

Inside this new file, you can add a loader function to return the necessary JSON response.

import type { LoaderFunctionArgs } from '@remix-run/node';
import path from 'path';

export const loader = async ({request}: LoaderFunctionArgs) => {
  const jsonData = {
    workspace: {
      root: path.resolve(), // Provides the root path of your project
      uuid: 'my-unique-project-uuid', // Replace with a unique ID for your project
    }
  };
  return Response.json(jsonData);
};

This code defines a loader that responds to requests for the DevTools JSON file. It returns a JSON object specifying the workspace root and a unique identifier.

Alternative Solution: Using a Vite Plugin

If you are using Vite, there’s a plugin specifically designed to handle this: vite-plugin-devtools-json. This plugin generates the Chrome DevTools project settings file on-the-fly within the development server. This can provide a seamless integration for the “DevTools Project Settings (devtools.json)” and “Automatic Workspace folders” features. You can find more information and installation instructions for this plugin on its GitHub page.

By implementing one of these solutions, you can effectively manage the com.chrome.devtools.json request, either by disabling the feature that causes it or by providing the information Chrome DevTools is looking for.