개발 툴바

개발 서버가 실행되는 동안에는 로컬 브라우저 미리보기의 모든 페이지 하단에 개발 툴바가 포함되어 있습니다.

개발 툴바에는 개발 중 사이트를 디버깅하고 검사하는 데 유용한 여러 도구가 포함되어 있으며, 통합 디렉터리에서 더 많은 개발 툴바 앱으로 확장할 수 있습니다. 개발 툴바 API를 사용하여 나만의 개발 툴바 앱을 만들 수도 있습니다!

이 툴바는 기본적으로 활성화되어 있으며 페이지 하단에 마우스를 올리면 나타납니다. 이는 개발자 도구로써만 사용되며 게시된 사이트에는 나타나지 않습니다.

내장된 앱

Astro Menu 앱은 현재 프로젝트에 대한 다양한 정보와 추가 리소스 링크에 쉽게 액세스할 수 있는 기능을 제공합니다. 특히, 한 번의 클릭으로 Astro 문서, GitHub 저장소 및 Discord 서버에 액세스할 수 있습니다.

이 앱에는 astro info 명령을 실행하고 출력을 클립보드에 복사하는 “Copy debug info” 버튼도 포함되어 있습니다. 이 기능은 도움을 요청하거나 문제를 보고할 때 유용하게 사용할 수 있습니다.

Inspect 앱은 현재 페이지에 있는 모든 아일랜드에 대한 정보를 제공합니다. 여기에는 각 아일랜드에 전달된 속성과 렌더링에 사용되는 클라이언트 지시어가 표시됩니다.

Audit 앱은 현재 페이지에서 일련의 감사를 자동으로 실행하여, 가장 일반적인 성능 및 접근성 문제를 확인합니다. 문제가 발견되면 도구 모음에 빨간색 점이 표시됩니다. 앱을 클릭하면 감사 결과 목록이 나타나고 관련 요소가 페이지에서 바로 강조 표시됩니다.

Settings 앱을 사용하면 자세한 로깅, 알림 비활성화, 화면에서의 위치 조정 등 개발 도구 모음에 대한 옵션을 구성할 수 있습니다.

Astro 통합은 새로운 앱을 개발 툴바에 추가하여 프로젝트에 특화된 사용자 정의 도구로 확장할 수 있습니다. 통합 디렉터리에서 설치할 더 많은 개발 도구 앱을 찾거나 Astro Menu를 사용할 수 있습니다.

프로젝트에 추가적인 개발 툴바 앱 통합을 설치하려면 다른 Astro 통합과 마찬가지로 해당 설치 지침에 따라 설치할 수 있습니다.

관련 레시피: 개발 툴바 앱 만들기

개발 툴바는 기본적으로 모든 사이트에 대해 활성화되어 있습니다. 필요에 따라 개별 프로젝트 및/또는 사용자를 위해 비활성화할 수 있습니다.

프로젝트에서 모든 사용자에게 개발 툴바를 비활성화하려면, Astro 구성 파일에서 devToolbar: false로 설정하세요.

import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
})

다시 개발 툴바를 활성화하려면, 구성에서 이러한 줄을 제거하거나, enabled:true로 설정하세요.

특정 프로젝트에서 사용자를 위해 개발 툴바를 비활성화하려면, astro preferences 명령을 실행하세요.

astro preferences disable devToolbar

현재 기기에서 사용자의 모든 Astro 프로젝트에서 개발 툴바를 비활성화하려면 astro-preferences를 실행할 때 --global 플래그를 추가하세요:

astro preferences disable --global devToolbar

개발 툴바는 나중에 다음과 같이 활성화할 수 있습니다:

astro preferences enable devToolbar