i18n(ja): create chrome dev tools page (#13859)

Author: fkatsuhiro

src/content/docs/ja/reference/experimental-flags/chrome-devtools-workspace.mdx

@@ -0,0 +1,51 @@
+---
+title: 試験的なChrome DevToolsワークスペース
+sidebar:
+  label: Chrome DevToolsワークスペース
+i18nReady: true
+---
+
+import Since from '~/components/Since.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+
+<p>
+
+**Type:** `boolean`<br />
+**Default:** `false`<br />
+<Since v="5.13.0" />
+</p>
+
+Astro開発サーバー向けの試験的な[Chrome DevToolsワークスペース統合](https://developer.chrome.com/docs/devtools/workspaces)を有効にします。
+
+この機能により、Chrome DevToolsで直接ファイルを編集し、接続されたワークスペースフォルダーを通じてローカルファイルシステムに変更を反映させることができます。ブラウザのタブを離れることなくCSSの値を調整するなどの編集に役立ちます。
+
+この機能を有効にすると、`astro dev`の実行時にプロジェクト用のChrome DevToolsワークスペースが自動的に設定されます。プロジェクトは[接続可能なワークスペースソース](#プロジェクトへの接続)として表示されるようになります。その後、「Sources」パネルで行った変更はプロジェクトのソースコードに自動的に保存されます。
+
+この機能を有効にするには、Astroの設定に試験的フラグ`chromeDevtoolsWorkspace`を追加します。
+
+```js title="astro.config.mjs" ins={4-6}
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  experimental: {
+    chromeDevtoolsWorkspace: true,
+  },
+});
+```
+
+## プロジェクトへの接続
+
+AstroはChrome DevToolsワークスペースをサポートするために必要な設定ファイルを作成します。ただし、ファイルの保存を有効にするには、プロジェクトを[ソースとして接続](https://developer.chrome.com/docs/devtools/workspaces#manual-connection)する必要があります。
+
+<Steps>
+
+1. パッケージマネージャーに対応したCLIコマンドで[Astroのdevサーバーを起動](/ja/develop-and-build/#astroのdevサーバーを起動する)します。
+
+2. Chromeでサイトプレビュー（例：`http://localhost:4321/`）を開き、DevToolsを起動します。
+
+3. **Sources** > **Workspaces**タブにAstroプロジェクトフォルダーが表示されます。**Connect**をクリックしてディレクトリをワークスペースとして追加します。
+
+</Steps>
+
+詳細については[Chrome DevToolsワークスペースのドキュメント](https://developer.chrome.com/docs/devtools/workspaces#connect)をご参照ください。