Экспериментальная рабочая область Chrome DevTools

Тип: boolean
По умолчанию: false

Добавлено в: astro@5.13.0

Включает экспериментальную интеграцию с рабочей областью Chrome DevTools для сервера разработки Astro.

Эта функция позволяет редактировать файлы прямо в Chrome DevTools и отражать эти изменения в вашей локальной файловой системе через подключенную папку рабочей области. Это полезно для применения правок, таких как настройка значений CSS, не покидая вкладку браузера.

При включенной функции запуск astro dev автоматически настроит рабочую область Chrome DevTools для вашего проекта. Затем ваш проект появится как доступный источник рабочей области, который вы можете подключить. После этого изменения, внесенные вами в панели «Sources» (Источники), будут автоматически сохраняться в исходном коде вашего проекта.

Чтобы включить эту функцию, добавьте экспериментальный флаг chromeDevtoolsWorkspace в вашу конфигурацию Astro:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    chromeDevtoolsWorkspace: true,
  },
});

Подключение вашего проекта

Astro создаст необходимый файл конфигурации для поддержки рабочих областей Chrome DevTools. Однако ваш проект также должен быть подключен как источник, чтобы включить сохранение файлов.

Запустите сервер разработки Astro с помощью соответствующей команды CLI для вашего менеджера пакетов.
Перейдите к предварительному просмотру вашего сайта (например, http://localhost:4321/) в Chrome и откройте DevTools.
На вкладке Sources > Workspaces (Источники > Рабочие области) вы найдете папку вашего проекта Astro. Нажмите Connect (Подключить), чтобы добавить вашу директорию в качестве рабочей области.

Смотрите документацию по рабочей области Chrome DevTools для получения дополнительной информации.