Просмотр компонентов и сервисов Blazor изнутри Chrome DevTools
Blazor Dev Tools, созданный Алексом Ховардом, является расширением Chrome, которое помогает разработчикам отлаживать приложения ASP.NET Core Blazor в процессе разработки. Оно добавляет панель инспекции в инструменты разработчика браузера, чтобы показать отношения компонентов и информацию о времени выполнения без необходимости полагаться на ведение журнала в консоли. Расширение обнаруживает серверные и WebAssembly хосты и требует небольшой интеграции времени выполнения через пакет NuGet. Его целевая аудитория - разработчики Blazor, которые предпочитают визуальную отладку с учетом времени выполнения во время локального кодирования.
Как инструмент показывает внутренние компоненты в реальном времени
Расширение предоставляет визуальный рабочий процесс инспекции, который перемещает отладку с консольных логов в специальную панель DevTools. Внутри этой панели вы можете просматривать дерево компонентов в реальном времени и проверять значения параметров, каскадные параметры, объявленные типы и внутреннее состояние для выбранных узлов. Выбор элемента связывает элементы DOM с их записями компонентов, помогая вам отслеживать пути рендеринга и изменения состояния во время взаимодействия со страницей.
Что нужно установить и где это появляется
Установка состоит из двух частей: добавьте расширение Chrome и включите пакет NuGet в проект Blazor, затем зарегистрируйте его сервис в Program.cs. После настройки инспектор появляется как вкладка 'Blazor' в DevTools (открыть с помощью F12 или Инспектировать). Инструмент автоматически определяет серверное или WebAssembly хостинг, поэтому тот же рабочий процесс инспектора работает для обеих моделей хостинга.
Как он относится к производству и безопасности
Безопасность встроена в управление временем выполнения. Инструмент отключает себя вне режима разработки, предотвращая раскрытие метаданных компонентов на производственных сайтах. Это автоматическое управление означает, что проекты не предоставляют хуки времени выполнения, необходимые для инспекции после развертывания, сохраняя параметры компонентов и сервисные настройки вне публичных сборок, сохраняя при этом локальную и промежуточную диагностику.
Кто получает выгоду и как это формирует рабочие процессы отладки
Это подходит разработчикам, переходящим с JavaScript devtools на .NET. Панель предлагает поток инспекции, похожий на React, который уменьшает необходимость вручную сопоставлять HTML с файлами .razor. Просмотрщик DI показывает, какие сервисы разрешает компонент, что помогает при устранении неполадок в поведении, зависящем от сервиса, в средних и крупных кодовых базах. Команды, которые предпочитают визуальные трассировки вместо произвольного логирования, получают наибольшее увеличение производительности.
Лучше всего подходит для рабочих процессов разработки, которые принимают небольшие изменения в проекте
Этот инструмент является практичным выбором для разработчиков Blazor, которым нужна прямая видимость во время выполнения в процессе разработки. Компромисс требует добавления небольшого хуков во время выполнения в проекты и принимает, что инспектор недоступен после развертывания. Поэтому он подходит командам, которые отдают предпочтение более быстрому, визуальному диагностированию проблем компонентов во время локального кодирования, а не удаленной проверке после развертывания.
