import RecipeLinks from "~/components/RecipeLinks.astro";

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

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

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

Встроенные приложения

Astro Menu

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

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

Inspect

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

Audit

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

:::note Базовый аудит производительности и доступности, выполняемый панелью разработчика, не заменяет специализированные инструменты, такие как Pa11y или Lighthouse, а также, что еще важнее, людей!

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

Настройки

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

Расширение панели разработчика

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

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

<RecipeLinks slugs={["ru/recipes/making-toolbar-apps"]} />

Отключение панели разработчика

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

Для каждого проекта

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

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

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

Для каждого пользователя

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

astro preferences disable devToolbar

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

astro preferences disable --global devToolbar

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

astro preferences enable devToolbar