Пропустить до содержимого

Панель разработчика

Пока работает сервер разработки, Astro включает панель инструментов разработчика в нижней части каждой страницы в локальном просмотре браузера.

Эта панель включает в себя ряд полезных инструментов для отладки и инспекции вашего сайта во время разработки и может быть расширена другими приложениями для панели разработчика, найденными в каталоге интеграций. Вы даже можете создавать свои собственные приложения, используя Dev Toolbar API!

Эта панель включена по умолчанию и появляется при наведении курсора на нижнюю часть страницы. Она предназначена только для разработчиков и не будет отображаться на опубликованном сайте.

Приложение Astro Menu предоставляет удобный доступ к различной информации о текущем проекте и ссылкам на дополнительные ресурсы. Особенно стоит отметить, что оно обеспечивает доступ к документации Astro, репозиторию GitHub и серверу Discord в один клик.

Это приложение также включает кнопку “Скопировать отладочную информацию”, которая выполнит команду astro info и скопирует вывод в буфер обмена. Это может быть полезно при обращении за помощью или сообщении об ошибках.

Приложение Inspect предоставляет информацию обо всех островах на текущей странице. Оно покажет вам свойства, переданные каждому острову, и клиентскую директиву, которая используется для их отображения.

Приложение Audit автоматически запускает серию проверок на текущей странице, проверяя наиболее распространенные проблемы с производительностью и доступностью. Если проблема найдена, на панели инструментов появляется красная точка. При нажатии на приложение появится список результатов аудита и будут выделены соответствующие элементы непосредственно на странице.

Приложение Настройки позволяет вам переключать различные настройки панели разработчика, такие как подробное журналирование и возможность отключить уведомления.

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

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

Панель разработчика включена по умолчанию для каждого сайта. При необходимости вы можете отключить ее для отдельных проектов и/или пользователей.

Чтобы отключить панель инструментов разработчика для всех, кто работает над проектом, установите devToolbar: false в файле конфигурации Astro.

astro.config.mjs
import { defineConfig } from "astro/config";
export default defineConfig({
devToolbar: {
enabled: false
}
})

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

Чтобы отключить панель инструментов dev для себя в конкретном проекте, выполните команду astro preferences.

Terminal window
astro preferences disable devToolbar

Чтобы отключить панель разработчика во всех проектах Astro для пользователя на текущей машине, добавьте флаг --global при выполнении команды astro-preferences:

Terminal window
astro preferences disable --global devToolbar

Панель разработчика позже можно будет включить с помощью:

Terminal window
astro preferences enable devToolbar