Nuxt DevTools v1.0

Мы рады объявить о выпуске Nuxt DevTools v1.0! 🎉

Вы можете начать играться с ними, обновив Nuxt до последней версии и нажав Shift + Option + D (macOS) или Shift + Alt + D (Windows) в своем браузере, чтобы открыть DevTools. По умолчанию плавающая панель скрыта, чтобы не отвлекать внимание. Вы можете включить ее на странице настроек Nuxt DevTools или явно включить ее в своей конфигурации:

export default defineNuxtConfig({
  devtools: {
    enabled: true
  }
})

Причины, по которым мы создали Nuxt DevTools

В последние годы все больше внимания уделяется Developer Experience (DX). Инструменты и фреймворки стремятся улучшить DX. Попутно Nuxt представил множество инновационных функций и соглашений, чтобы сделать вашу повседневную разработку проще и эффективнее.

Например, маршрутизация на основе файлов, система слоев, плагины, middleware маршрутов, автоматический импорт композаблов, API-интерфейсы серверов на основе файлов, мощная система модулей и многое другое.

Nuxt способен создавать различные виды приложений: от простых хобби-проектов до крупномасштабных приложений, от простых одностраничных приложений с рендерингом на клиенте до гибридных сайтов с серверлесс-функциями на распределенных серверах и т.д. Мы предоставляем эти функции и соглашения, чтобы упростить поддержку всех этих вариантов использования и сценариев.

Проблема

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

Обычные абстракции — это отличные вещи для переноса сложности реализации и упрощения фокусировки при сборке. С другой стороны, они также могут добавить дополнительную нагрузку на пользователей, чтобы изучить и понять, что происходит под капотом. Это также приводит к неявности, например, откуда автоматически импортируется компонент или сколько модулей используют определенный компонент и т.д. Это также может затруднить отладку.

Компромиссы неизбежны. В целом мы считаем, что эти компромиссы того стоят, поскольку они помогут организовать кодовую базу пользователей и облегчат ее поддержку в долгосрочной перспективе. В то же время мы хотим компенсировать потерянную нами прозрачность, предоставив инструмент, который поможет вам понять, что происходит под капотом, и сделать кривую обучения более гладкой.

Вот тут-то и пригодится Nuxt DevTools! Мы впервые представили его в феврале 2023 года, чтобы поэкспериментировать с этой идеей. После нескольких месяцев исследований и разработок, благодаря удивительно положительным отзывам сообщества, эта идея оказалась полезной, и мы решили сделать ее основной частью вашего опыта разработки Nuxt.

Возможности

Nuxt DevTools — это набор визуальных инструментов, которые помогут вам понять ваше приложение Nuxt и еще больше улучшить опыт разработчика. Он создан для обеспечения большей прозрачности между Nuxt и вашим приложением, поиска узких мест производительности и помощи в управлении вашим приложением и конфигурацией.

DevTools в приложеннии

Nuxt DevTools — это встроенный DevTools, который находится рядом с вашим приложением. Он будет отображаться как плавающая панель, которую вы можете открыть, нажав на нее.

Мы считаем, что это лучший подход, чем традиционное расширение браузера DevTools, поскольку он:

• Работает во всех браузерах и даже на мобильных устройствах! - Возможности браузерных расширений DevTools ограничены API, которые предоставляет каждый браузер, а также поддержка нескольких расширений потребовала бы больших усилий. Такой подход позволил бы нам больше сосредоточиться на функциональности и возможностях, при этом сделав их доступными для пользователей в любых браузерах и на любых устройствах.
• Интеграция инструментов сборки - Традиционно браузерные расширения DevTools могут получать доступ только к контексту выполнения вашего приложения и не имеют доступа к инструментам сборки. Наличие DevTools в составе Nuxt позволяет нам взаимодействовать с инструментами сборки и предоставлять гораздо больше информации и функций.
• Избегайте смещений макета - Наличие DevTools в виде плавающей панели позволит избежать смещений макета при переключении DevTools.

Просмотр страниц

Чтобы помочь улучшить неявность маршрутизации на основе файлов, мы ввели Pages View в DevTools. Он перечисляет все страницы, зарегистрированные в вашем приложении, и вы можете легко их протестировать и перемещаться между ними.

Просмотр компонентов

Вкладка Components показывает все компоненты, которые вы используете в своем приложении, и откуда они. Вы также можете выполнить поиск по ним и перейти к исходному коду.

Он также предоставляет графическое представление, которое показывает взаимосвязь между компонентами. Вы можете фильтровать компоненты, чтобы увидеть зависимости определенного компонента. Это может помочь выявить непреднамеренные зависимости и улучшить производительность и размер пакета страниц.

Просмотр композаблов

В представлении Composables отображаются все автоматически импортированные композаблы, зарегистрированные в Nuxt. Вы можете видеть, какие файлы их импортируют и откуда они. Некоторые записи также могут содержать краткие описания и ссылки на документацию.

Управление модулями

На вкладке Modules отображаются все модули, зарегистрированные в вашем приложении, со ссылками на их документацию и репозитории.

Мы также предоставляем вам возможность искать и изучать модули из сообщества. И устанавливать их одним щелчком мыши!

Управление статическими ассетами

Вкладка Assets показывает все статические ассеты в вашей директории public. Она поддерживает предварительный просмотр изображений, видео, шрифтов, PDF-файлов и других файлов, URL-адрес или фрагмент кода которых вы можете легко скопировать для использования в своем приложении. Вы также можете перетаскивать файлы, чтобы загружать их напрямую из Nuxt DevTools.

Редактор runtime-конфигураций

Вкладка Runtime Configs отображает runtime-конфигурации вашего приложения и предоставляет интерактивный редактор, позволяющий вам экспериментировать с различными значениями.

Редактор полезной нагрузки

Подобно редактору runtime-конфигураций, редактор полезной нагрузки позволяет редактировать полезную нагрузку из композаблов, таких как useState и useFetch, чтобы увидеть, что было передано с сервера клиенту при рендеринге на стороне сервера.

Предпросмотр Open Graph

Open Graph играет важную роль в обмене данными в социальных сетях, а также в SEO. В традиционном рабочем процессе нам обычно нужно сначала развернуть наше приложение, чтобы проверить, работает ли Open Graph так, как ожидается, на различных платформах социальных сетей. С помощью Open Graph Preview вы теперь можете предварительно просмотреть Open Graph в DevTools и обновить его в реальном времени с мгновенным циклом обратной связи.

Мы также помогаем вам проверить теги Open Graph в приложении и даем предложения по их улучшению. Вы можете скопировать сгенерированный фрагмент кода и вставить его в свои роуты, чтобы исправить их за один раз.

Обзор плагинов

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

Timeline

Timeline — это инструмент для проверки того, когда и как вызывался каждый композабл. В отличие от инструментов производительности DevTools браузера, эта вкладка проверяет только высокоуровневые композаблы, объединенные с другими событиями, такими как навигация по маршруту, что ближе к повседневному использованию. Она также записывает аргументы и возвращаемые значения каждого вызова, чтобы вы могли лучше понять, что происходит под капотом.

Анализатор сборки для продакшена

Хотя Nuxt DevTools в основном сосредоточен на предоставлении инструментов разработки, иногда нам может понадобиться узнать, как чанки компонуются в продакшене. Build Analyzer позволяет вам запустить продакшен-сборку и проанализировать чанки и модули в любое время, а также увидеть, как они связаны. Вы также можете сделать несколько сборок на разных ветках, чтобы сравнить, как ваш рефакторинг/изменения влияют на размер пакета и т.д.

Площадка для API сервера

Nuxt предоставляет очень удобный способ создания серверных API функций с помощью роутов сервера. Поскольку в Nuxt у нас есть эта информация, мы можем предоставить вам площадку для тестирования и отладки функций API сервера, похожую на инструменты вроде Postman. Мы автоматически перечисляем все API сервера, доступные в приложении. И мы выполняем эти функции в контексте вашего приложения, поэтому вам не нужно вручную настраивать их во внешних инструментах. Как всегда, у нас также есть фрагменты кода, которые вы можете скопировать и вставить в свое приложение.

Встроенный полнофункциональный VS Code

Благодаря гибкости нашего подхода к DevTools мы можем использовать мощь современного веба для встраивания полнофункционального VS Code прямо в DevTools. В этом VS Code вы можете войти в свою учетную запись и синхронизировать настройки, а все расширения будут работать как обычный клиент VS Code. Это позволяет вам быстро редактировать код, не выходя из браузера.

Инспектор компонентов

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

Разделенный экран

В последних версиях мы представили функцию разделения экрана, которая позволяет открывать две вкладки рядом.

Кастомизация UI

В настройках DevTools мы предоставляем вам несколько опций для настройки вкладок, которые вы хотите видеть, и лейаута DevTools.

Экосистема

В Nuxt мы очень ценим экосистему. Подобно тому, как модули Nuxt улучшают ядро ​​Nuxt, мы также разработали Nuxt DevTools как высокорасширяемые, что позволяет модулям предоставлять дополнительные функции и интеграции.

Модули сообщества

Мы гордимся тем, что сообщество уже начало создавать модули для Nuxt DevTools. Вот некоторые из них:

Модуль Vitest предоставляет пользовательский интерфейс Vitest для тестов, работающих с тем же конвейером, что и ваше приложение Nuxt. Это делает проще отладку тестов вместе с приложением.

Модуль VueUse предоставляет страницу поиска доступных композаблов и просмотра их документации.

Модуль SiteMap предоставляет интерактивный редактор для управления картой сайта.

Модуль TailwindCSS предоставляет средство просмотра конфигурации Tailwind, позволяющее вам проверить, что доступно на основе вашей конфигурации.

Модуль UnoCSS предоставляет интерактивный инспектор, позволяющий увидеть, как каждый модуль вносит вклад в конечный CSS.

Модуль Storybook предоставляет UI Storybook для ваших компонентов.

И это лишь некоторые из них! Мы с нетерпением ждем появления новых модулей в Nuxt DevTools!

Проекты, вдохновленные Nuxt DevTools

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

• webfansplz/vite-plugin-vue-devtools - Порт Nuxt DevTools для поддержки DevTools для приложений Vite + Vue 3.
• pheno-agency/vite-plugin-devtools - Эксперимент по созданию фреймворк-агностик DevTools для Vite.
• Modern.js DevTools - Встроенные инструменты разработчика для Modern.js
• Qwik DevTools - Инструменты разработчика для Qwik

Мы тесно сотрудничаем с разработчиками этих проектов, чтобы понять, как можно вывести возможности DevTools на новый уровень.

Что дальше

Nuxt DevTools только что достиг версии 1.0, но это не значит, что мы закончили. Есть еще много вещей, которые мы хотим исследовать и улучшить. Вот некоторые из идей, которые мы рассматриваем:

• Интеграция доступности Nuxt - Мы создаем интеграцию a11y для Nuxt (#23255). Мы создадим специальное представление в Nuxt DevTools, чтобы вы могли интерактивно проверять подсказки по доступности.
• Интеграция Vue DevTools - Мы работаем с командой Vue, чтобы превратить возможности Vue DevTools в общий инструмент, который работает как для расширений браузера, так и для встроенных инструментов DevTools, таких как vite-plugin-vue-devtools и Nuxt DevTools.
• Дайте знать о ваших идеях/предложениях!

Будущее

Мы рады видеть, как Nuxt DevTools могут помочь вам создавать лучшие приложения и улучшать опыт разработки. Двигаясь вперед, мы представляем себе что-то большее, чем сами Nuxt DevTools. Мы считаем, что наличие таких специфичных для фреймворка DevTools — это путь вперед к предоставлению еще лучшего опыта разработки. Мы также видим, что многие части таких инструментов на самом деле могут совместно использоваться и повторно использоваться в разных инструментах. Мы придумали идею DevTools Kit.

DevTools Kit

DevTools Kit — это идея универсального протокола, которая все еще находится на ранней стадии мозгового штурма. Мы представляем, что в лучшем мире каждая функция DevTools должна быть составной, расширяемой и совместной. Мета-фреймворки могли бы создавать свои собственные функции для удовлетворения своих конкретных потребностей, в то время как различные фреймворки могли бы совместно использовать общие веб-инструменты.

Представьте, что у нас могли бы быть все эти функции, каждая из которых была бы отдельным пакетом. У нас могли бы быть общие веб-инструменты, такие как SEO, Accessibility, PWA, Static Assets и т.д. Затем низкоуровневые инструменты сборки, такие как Vite build analyzer, Vite Inspector или Webpack visualizer и т.д. И, наконец, у нас могли бы быть инструменты, специфичные для фреймворка и метафреймворка, такие как Vue Components View или Nuxt Server API Playground и т.д.

В то время Vue DevTools был бы композицией общих веб-функций и специфичных для Vue функций. А Nuxt DevTools по сути был бы композицией функций выше, унаследовал бы все функции Vue DevTools и добавил бы специфичные для Nuxt функции поверх них.

Можно даже составить свой собственный DevTools по своему усмотрению.

Тем не менее, мы все еще думаем и обсуждаем детали DevTools Kit. Следите за обновлениями!

Conclusion

Надеемся, вам понравится новый опыт Nuxt DevTools! Мы с нетерпением ждем возможности увидеть, как он поможет вам создавать лучшие приложения и улучшить ваш опыт разработки. Если у вас есть какие-либо идеи или предложения, не стесняйтесь сообщать нам об этом в обсуждении Идеи и предложения.

Спасибо за вашу поддержку и удачного взлома! 🚀