この記事はなに？

急にSvelteKitで開発中に「Error: No route matches URL "/.well-known/appspecific/com.chrome.devtools.json"」が出てきて迷惑だったので対処法をまとめた記事です。

対処法 (とりあえず無効化したい場合)

以下のURLをChromeにそれぞれペーストしてアクセスし、設定項目をDisabledにする。

chrome://flags#devtools-project-settings
chrome://flags#devtools-automatic-workspace-folders

対処法 (特定のSvelteKitのプロジェクトで無効化したい場合)

リクエストを自分で処理することで、ウェブサーバーがアプリケーションのすべての開発者に受信リクエストに関する通知を発行しないようにすることができます。

import { dev } from '$app/environment';

export function handle({ event, resolve }) {
	if (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
		return new Response(undefined, { status: 404 });
	}

	return resolve(event);
}

これってそもそも何？

Google Chrome 135で追加されたローカル開発サーバーで動かしているプロジェクトのソースコードを、Chrome DevToolsの「Sources」パネルから直接編集・保存できるようにするための機能

対処法 (有効化する場合)

以下のコマンドを実行してvite-plugin-devtools-jsonをインストールし、設定します。
vite-plugin-devtools-json は、開発サーバーでChromium DevToolsプロジェクト設定ファイルをオンザフライで生成するための Vite プラグインです。このファイルは/.well-known/appspecific/com.chrome.devtools.jsonから提供され、Chromiumブラウザにプロジェクトのソースコードがどこにあるかを伝えます。

npx sv add devtools-json

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
import devtoolsJson from "vite-plugin-devtools-json";

export default defineConfig({
  plugins: [sveltekit(),devtoolsJson()],
});

参考