Skip to content
23 changes: 17 additions & 6 deletions documentation/docs/30-add-ons/60-devtools-json.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,24 @@
title: devtools-json
---

`devtools-json` is essentially a vite plugin [vite-plugin-devtools-json](https://github.com/ChromeDevTools/vite-plugin-devtools-json/) for generating the Chrome DevTools project settings file on-the-fly in the devserver.
The `devtools-json` add-on installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/), which is a Vite plugin for generating a Chromium DevTools project settings file on-the-fly in the development server. This file is served from `/.well-known/appspecific/com.chrome.devtools.json` and tells Chromium browsers where your project's source code lives so that you can use [the workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files in the browser.
Comment thread
dominikg marked this conversation as resolved.

It will prevent this server log:
> [!NOTE]
> Installing the plugin enables the feature for all users connecting to the dev server with a Chromium browser, and allows the browser to read and write all files within the directory. If using Chrome's AI Assistance feature, this may also result in data being sent to Google.
Comment thread
benmccann marked this conversation as resolved.

```sh
Not found: /.well-known/appspecific/com.chrome.devtools.json
```
Alternatively, you can prevent the warning by handling the request yourself, for example by adding logic to your [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook:
Comment thread
benmccann marked this conversation as resolved.
Outdated

```js
/// file: src/hooks.server.js
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);
}

## Usage

Expand All @@ -18,4 +29,4 @@ npx sv add devtools-json

## What you get

- the `vite` plugin added to your vite plugin options.
- `vite-plugin-devtools-json` added to your Vite plugin options
Loading