실험적 Chrome 개발자 도구 작업공간

타입: boolean
기본값: false

추가된 버전: astro@5.13.0 새로운 기능

Astro 개발 서버를 위한 실험적인 Chrome 개발자 도구 작업공간 통합을 활성화합니다.

이 기능을 사용하면 Chrome 개발자 도구에서 직접 파일을 편집하고 연결된 작업공간 폴더를 통해 로컬 파일 시스템에 변경 사항을 반영할 수 있습니다. 브라우저 탭을 벗어나지 않고도 CSS 값 조정과 같은 편집 내용을 적용할 때 유용합니다.

이 기능을 활성화하고 astro dev 명령을 실행하면 프로젝트에 대한 Chrome 개발자 도구 작업공간이 자동으로 구성됩니다. 그러면 프로젝트가 연결할 수 있는 사용 가능한 작업공간 소스로 나타납니다. 그러면, “Sources” 패널에서 만들어진 변경 사항이 프로젝트 소스 코드에 자동으로 저장됩니다.

이 기능을 활성화하려면 Astro 구성에 실험적 플래그인 chromeDevtoolsWorkspace를 추가하세요.

astro.config.mjs

import { defineConfig } from 'astro/config';

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

프로젝트 연결하기

Astro는 Chrome 개발자 도구 작업공간을 지원하는 데 필요한 구성 파일을 생성합니다. 그러나 파일을 저장하려면 프로젝트가 소스로 연결되어 있어야 합니다.

1. 사용중인 패키지 관리자에 적합한 CLI 명령어로 Astro 개발 서버를 실행합니다.

2. Chrome에서 사이트 미리 보기 (예: http://localhost:4321/)로 이동하여 개발자 도구를 엽니다.

3. Sources > Workspaces 탭에서 Astro 프로젝트 폴더를 찾을 수 있습니다. Connect를 클릭하여 디렉터리를 작업공간으로 추가합니다.

자세한 내용은 Chrome 개발자 도구 작업공간 문서를 참조하세요.