개발자 도구 모음

개발 서버가 실행되는 동안 Astro는 로컬 브라우저 미리보기의 모든 페이지 하단에 개발자 도구 모음을 포함합니다.

이 도구 모음에는 개발 중에 사이트를 디버깅하고 검사하는 데 유용한 여러 도구가 포함되어 있으며, 통합 디렉터리에서 더 많은 개발자 도구 모음 앱을 찾아 확장할 수 있습니다. 개발자 도구 모음 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