diff --git a/content/7.blog/3.introducing-nuxt-devtools.md b/content/7.blog/3.introducing-nuxt-devtools.md index 77eac9cef..e571e8786 100644 --- a/content/7.blog/3.introducing-nuxt-devtools.md +++ b/content/7.blog/3.introducing-nuxt-devtools.md @@ -1,64 +1,64 @@ --- -title: 'Introducing Nuxt DevTools' -description: 'Unleash the Developer Experience with Nuxt and understand your app better than ever.' +title: 'Представляем Nuxt DevTools' +description: 'Раскройте опыт разработчика с помощью Nuxt и изучите свое приложение лучше, чем когда-либо.' image: /assets/blog/nuxt-devtools.png authors: - - name: Anthony Fu + - name: Энтони Фу avatarUrl: https://github.com/antfu.png link: https://github.com/antfu date: 2023-03-27 category: Релиз --- -We announced the preview of [Nuxt DevTools](https://github.com/nuxt/devtools) on [Vue Amsterdam 2023](https://vuejs.amsterdam/), a new tool to help you understand your Nuxt app and improve the developer experience even further. Today we released a new minor version [`v0.3.0`](https://github.com/nuxt/devtools/releases/tag/v0.3.0) with a bunch of updates and improvements. +На [Vue Amsterdam 2023](https://vuejs.amsterdam/) мы анонсировали предварительную версию [Nuxt DevTools](https://github.com/nuxt/devtools), нового инструмента, который поможет понять ваше приложение Nuxt и еще больше улучшить опыт разработчика. Сегодня мы выпустили новую минорную версию [`v0.3.0`](https://github.com/nuxt/devtools/releases/tag/v0.3.0) с кучей обновлений и улучшений. ![devtools-tab-overview](/assets/blog/devtools/tab-overview.png) -In this post, we will explore the reasons behind the creation of Nuxt DevTools, how it can enhance your development experience, and what you can expect in the future. +В этой статье мы рассмотрим причины создания Nuxt DevTools, то, как он может улучшить ваш опыт разработки, и чего можно ожидать в будущем. -## Developer Experience +## Опыт разработчика (DX) -Over the recent years, there has been an increasing focus on Developer Experience (DX). Tools and frameworks have been striving to improve the DX. Along the way, Nuxt introduced many innovative features and conventions to make your day-to-day development easier and more efficient. +В последние годы все больше внимания уделяется Developer Experience (DX). Инструменты и фреймворки стремятся улучшить DX. Попутно Nuxt представил множество инновационных возможностей и соглашений, чтобы сделать вашу повседневную разработку проще и эффективнее. -In Nuxt 3, we switched to [Vite](https://vitejs.dev/) as the default bundler for the instant hot module replacement (HMR) during developement, creating a faster feedback loop to your workflow. Additionally, we have introduced [Nitro](https://github.com/unjs/nitro), a new server engine that allows you to deploy your Nuxt app to any hosting service, such as [Vercel](https://vercel.com), [Netlify](https://netlify.com), [Cloudflare](https//cloudflare.com) and [more](https://nitro.unjs.io/deploy) **with zero-config**. +В Nuxt 3 мы перешли на [Vite](https://vitejs.dev/) в качестве бандлера по умолчанию для горячей замены модулей (HMR) во время разработки, что создает более быструю обратную связь для вашего рабочего процесса. Кроме того, мы представили [Nitro](https://github.com/unjs/nitro), новый серверный движок, который позволяет вам развертывать приложение Nuxt на любом хостинге, таком как [Vercel](https://vercel.com), [Netlify](https://netlify.com), [Cloudflare](https//cloudflare.com) и [других](https://nitro.unjs.io/deploy) **с нулевой конфигурацией**. -Nuxt offers many common practices built-in: -- Write TypeScript and ESM out-of-the-box throughout your codebase. -- Build single-page applications (SPA), server-side rendering (SSR), static site generation (SSG), or [hybrid them **per routes**](/docs/guide/concepts/rendering#route-rules) - using the same codebase isomorphically without any explicit setup. -- Use several composables, like [`useState`](/docs/api/composables/use-state) and [`useAsyncData`](/docs/api/composables/use-async-data) for sharing states accessible across the server and client sides. -- Leverage SEO utilities, like [`useHead`](/docs/api/composables/use-head) and [`useSeoMeta`](/docs/getting-started/seo-meta#useseometa) to make meta-tags management a breaze. +Nuxt предлагает множество встроенных распространенных практик: +- Пишите TypeScript и ESM из коробки по всей вашей кодовой базе. +- Создавайте одностраничные приложения (SPA), используйте рендеринг на сервере (SSR), генерацию статических сайтов (SSG) или [сочетайте их **на роутах**](/docs/guide/concepts/rendering#route-rules) — используя одну и ту же кодовую базу изоморфно без какой-либо явной настройки. +- Используйте несколько композаблов, таких как [`useState`](/docs/api/composables/use-state) и [`useAsyncData`](/docs/api/composables/use-async-data) для совместного использования состояния, доступных на сервере и клиенте. +- Используйте SEO-утилиты, такие как [`useHead`](/docs/api/composables/use-head) и [`useSeoMeta`](/docs/getting-started/seo-meta#useseometa), чтобы упростить управление метатегами. -Moreover, features such as the [layout system](/docs/guide/directory-structure/layouts), [plugins](/docs/guide/directory-structure/plugins), route [middleware](/docs/guide/directory-structure/middleware), and other tools make app creation easier and codebases more organized. +Более того, такие функции, как [система лейаутов](/docs/guide/directory-structure/layouts), [плагины](/docs/guide/directory-structure/plugins), [middleware](/docs/guide/directory-structure/middleware) и другие инструменты упрощают создание приложений и делают кодовую базу более организованной. -Conventions like [file-based routing](/docs/guide/directory-structure/pages) and [file-based server APIs](https://nitro.unjs.io/guide/introduction/routing) making the routing intuitive and effortless. +Такие соглашения, как [маршрутизация на основе файлов](/docs/guide/directory-structure/pages) и [API-интерфейсы сервера на основе файлов](https://nitro.unjs.io/guide/introduction/routing), делают маршрутизацию интуитивно понятной и простой. -[Components auto-imports](/docs/guide/directory-structure/components) makes it easy to create shared components that are directly available in any Vue file. Unlike global components, they are code-splitted. We also introduced [composables auto-import](/docs/guide/concepts/auto-imports), where all APIs from Vue are directly available. Nuxt modules can also provide their custom composables to be auto-imported, as well as your [local composables](/docs/guide/directory-structure/composables). +[Автоимпорт компонентов](/docs/guide/directory-structure/components) упрощает создание общих компонентов, которые напрямую доступны в любом файле Vue. В отличие от глобальных компонентов, они разделены по коду. Мы также представили [автоимпорт композаблов](/docs/guide/concepts/auto-imports), где все API из Vue доступно напрямую. Модули Nuxt также могут предоставлять свои собственные композаблы для автоматического импорта, а также ваши [локальные композаблы](/docs/guide/directory-structure/composables). -Recently, we introduced client and server-only components, which can be used by adding `.client` and `.server` to the filename. All these conventions are fully typed and developers can even have type autocomplete when doing route navigation or fetching data from APIs. **These conventions significantly reduce boilerplate code, avoid duplications, and improve productivity.** +Недавно мы представили клиентские и серверные компоненты, которые можно использовать, добавив `.client` и `.server` к имени файла. Все эти соглашения полностью типизированы, и разработчики могут даже иметь автодополнение типов при навигации по маршруту или извлечении данных из API. **Эти соглашения значительно сокращают шаблонный код, исключают дублирование и повышают производительность.** -When it comes to ecosystem, Nuxt has a large community of developers building modules around it, [with hundreds of high-quality modules](/modules) available. Modules allow developers to get integrations for features they want without worrying about configuration or best practices. +Что касается экосистемы, Nuxt имеет большое сообщество разработчиков, создающих модули вокруг него, [с сотнями доступных высококачественных модулей](/modules). Модули позволяют разработчикам получать интеграции для нужных им возможностей, не беспокоясь о конфигурации или лучших практиках. -## The Problem +## Проблема -Nuxt is capable of creating a large scale application at ease, however there is one problem: **the lack of transparency**. +Nuxt способен легко создавать крупномасштабные приложения, однако есть одна проблема: **отсутствие прозрачности**. -For every new feature and convention we introduce, we are adding a bit more abstraction to the framework. +С каждой новой функцией и соглашением, которые мы вводим, мы добавляем немного больше абстракции во фреймворк. -Abstractions are great things to transfer implementation complexity and make things easier to get more focus when building. On the other hand, they can also add extra burden for users to learn and understand what's going on under the hood. Leading also to implicitness, like where a auto-imported component is from, or how many modules is using a certain component, etc. It can also make things hard to debug. +Абстракции — это отличные вещи для переноса сложности реализации и упрощения фокусировки при сборке. С другой стороны, они также могут добавить дополнительную нагрузку для пользователей, чтобы изучить и понять, что происходит под капотом. Это также приводит к неявности, например, откуда автоматически импортируется компонент или сколько модулей используют определенный компонент и т.д. Это также может затруднить отладку. -This might be considered as a trade-off of any tools, you have to learn and understand the tool to use it with efficiency. Despite improving the documentation and providing more examples, **we believe of an opportunity to improve the lack of transparency**. +Это может рассматриваться как компромисс между любыми инструментами, вы должны изучить и понять инструмент, чтобы эффективно его использовать. Несмотря на улучшение документации и предоставление большего количества примеров, ** мы считаем, что есть возможность устранить недостаток прозрачности **. -## Introducing Nuxt DevTools +## Представляем Nuxt DevTools -[Nuxt DevTools](https://github.com/nuxt/devtools) is a visual tool to help you understand your Nuxt app and improve the developer experience even further. It's created to provide a better transparency of Nuxt and your app, find performance bottlenecks and help you manage your app and configuration. +[Nuxt DevTools](https://github.com/nuxt/devtools) — визуальный инструмент, который поможет вам понять ваше приложение Nuxt и еще больше улучшить опыт разработчика. Он создан для обеспечения большей прозрачности Nuxt и вашего приложения, поиска узких мест производительности и помощи в управлении вашим приложением и конфигурацией. -It is shipped as an experimental module and provide the views right inside your app. Once installed, it will add a small icon on the bottom of your app. Clicking it will open the DevTools panel. +Он поставляется как экспериментальный модуль и предоставляет представления прямо внутри вашего приложения. После установки он добавит небольшой значок в нижнюю часть вашего приложения. Щелчок по нему откроет панель DevTools. -To try it, please refer to the [installation guide](https://devtools.nuxtjs.org/guide). +Чтобы попробовать, обратитесь к [руководству по установке](https://devtools.nuxtjs.org/guide). -### Overview +### Обзор -Shows a quick overview of your app, including the Nuxt version, pages, components, modules, and plugins you are using. **It also check your Nuxt version and allow you to upgrade with a single click.** +Дает краткий обзор вашего приложения, включая версию Nuxt, страницы, компоненты, модули и плагины, которые вы используете. **Он также проверяет вашу версию Nuxt и позволяет вам обновиться одним щелчком мыши.** ::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1679922926/nuxt3/nuxt-devtools-upgrade_dnfghq.jpg" controls autoplay} :source{src="https://res.cloudinary.com/nuxt/video/upload/v1679922926/nuxt3/nuxt-devtools-upgrade_dnfghq.webm" type="video/webm"} @@ -66,9 +66,9 @@ Shows a quick overview of your app, including the Nuxt version, pages, component :source{src="https://res.cloudinary.com/nuxt/video/upload/v1679922926/nuxt3/nuxt-devtools-upgrade_dnfghq.ogg" type="video/ogg"} :: -### Pages +### Страницы -The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched. +Вкладка "Pages" показывает ваши текущие маршруты и обеспечивает быстрый способ навигации по ним. Для динамических маршрутов она также предоставляет форму для интерактивного заполнения каждого параметра. Вы также можете использовать текстовое поле для воспроизведения и проверки того, как сопоставляется каждый маршрут. ::video{poster="https://res.cloudinary.com/nuxt/video/upload/v1679923373/nuxt3/nuxt-devtools-pages_csjoh0.jpg" controls autoplay} @@ -77,145 +77,145 @@ The pages tab shows your current routes and provide a quick way to navigate to t :source{src="https://res.cloudinary.com/nuxt/video/upload/v1679923373/nuxt3/nuxt-devtools-pages_csjoh0.ogg" type="video/ogg"} :: -### Components +### Компоненты -Components tab show all the components you are using in your app and where they are from. You can also search for them and go to the source code. +Вкладка "Components" показывает все компоненты, которые вы используете в своем приложении, и откуда они. Вы также можете выполнить поиск по ним и перейти к исходному коду. ![nuxt-devtools-tab-components](/assets/blog/devtools/tab-components.png) -It also provides a graph view that show the relationship between components. You can filter the components to see the dependencies of a specific component. This could help to identify unintended dependencies and improve the performance and bundle size of pages. +Она также предоставляет вид графа, который показывает взаимосвязь между компонентами. Вы можете фильтровать компоненты, чтобы увидеть зависимости определенного компонента. Это может помочь выявить непреднамеренные зависимости и улучшить производительность и размер бандла страниц. ![nuxt-devtools-components-graph](/assets/blog/devtools/tab-components-graph-all.png) ![nuxt-devtools-components-graph-filtered](/assets/blog/devtools/tab-components-graph-filtered.png) -You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. +Вы также можете использовать функцию "Инспектор", чтобы проверить DOM-дерево и увидеть, какой компонент его отображает. Щелкните, чтобы перейти в редактор на определенную строку. Это значительно упрощает внесение изменений, без необходимости глубокого понимания структуры проекта. ![nuxt-devtools-tab-components-inspector](/assets/blog/devtools/tab-components-inspector.png) -### Imports +### Импорты -Imports tab shows all the auto-imports registered to Nuxt. You can see which files are importing them, and where they are from. Some entries can also provide short descriptions and documentation links. +Вкладка "Imports" показывает все автоматические импорты, зарегистрированные в Nuxt. Вы можете видеть, какие файлы их импортируют, и откуда они. Некоторые записи также могут содержать краткие описания и ссылки на документацию. ![nuxt-devtools-tab-imports](/assets/blog/devtools/tab-imports.png) -### Modules +### Модули -Modules tab shows all the modules you have installed and providing the links to their documentation and source code. You can find more modules available in [Nuxt Modules](/modules). +Вкладка "Modules" показывает все установленные вами модули и предоставляет ссылки на их документацию и исходный код. Вы можете найти больше модулей в [модулях Nuxt](/modules). ![nuxt-devtools-tab-modules](/assets/blog/devtools/tab-modules.png) -Recently we introduce the experimental upgrade feature, which allows you to upgrade your Nuxt or modules with ease. With the [Terminal tab](#terminals), it shows the output of the upgrade process transparently. +Недавно мы представили экспериментальную функцию обновления, которая позволяет вам легко обновлять Nuxt или модули. С помощью вкладки [Terminal](#terminals) он прозрачно показывает вывод процесса обновления. ![nuxt-devtools-tab-modules-upgrade](/assets/blog/devtools/tab-modules-upgrade.png) -### Assets +### Ассеты -The assets tab that shows all your static assets and their information. You can copy the paths of the assets, or the code snippets of using them. In the future, with the integrations of [Nuxt Image](https://image.nuxtjs.org/), you can even optimize images with a single click. +Вкладка "Assets" показывает все ваши статические ассеты и информацию о них. Вы можете скопировать пути к ассетам или фрагменты кода для их использования. В будущем, с интеграцией [Nuxt Image](https://image.nuxtjs.org/), вы даже сможете оптимизировать изображения одним щелчком мыши. ![nuxt-devtools-tab-assets](/assets/blog/devtools/tab-assets.png) -### Plugins +### Плагины -Plugins tab shows all the plugins you are using in your app. As plugins runs before the app is mounted,the time spent in each plugin should be minimal to avoid blocking the app from rendering. The time cost of each plugin provided can be helpful to find performance bottlenecks. +Вкладка "Plugins" показывает все плагины, которые вы используете в своем приложении. Поскольку плагины запускаются до монтирования приложения, время, затрачиваемое на каждый плагин, должно быть минимальным, чтобы не блокировать приложение при рендеринге. Временные затраты каждого предоставленного плагина могут быть полезны для поиска узких мест производительности. ![nuxt-devtools-tab-plugins](/assets/blog/devtools/tab-plugins.png) -### Hooks +### Хуки -Hooks tab can help you to monitor the time spent in each hook from both client and server side. You can also see how many lisenters registed to each hook, and how many times they have been invoked. This can be helpful to find performance bottlenecks. +Вкладка "Hooks" поможет вам отслеживать время, проведенное в каждом хуке как на клиенте, так и на сервере. Вы также можете увидеть, сколько слушателей зарегистрировалось для каждого хука и сколько раз они были вызваны. Это может быть полезно для поиска узких мест производительности. ![nuxt-devtools-tab-hooks](/assets/blog/devtools/tab-hooks.png) -### App Config +### Конфигурация приложения -You can inspect and modify the app config in DevTools, try different configurations and see the effects immediately. +Вы можете проверить и изменить конфигурацию приложения в DevTools, попробовать различные конфигурации и сразу увидеть результаты. ![nuxt-devtools-app-config](/assets/blog/devtools/tab-app-config.png) -### Payload & Data +### Полезная нагрузка и данные -This tab shows the state created by [`useState`](/docs/api/composables/use-state), [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch). It can be helpful to understand how the data is fetched and how the state is managed, or change them reactively to see it they affects your app. For `useAsyncData` and `useFetch`, you can also manually the trigger the refetch. +На этой вкладке показано состояние, созданное [`useState`](/docs/api/composables/use-state), [`useAsyncData`](/docs/api/composables/use-async-data) и [`useFetch`](/docs/api/composables/use-fetch). Может быть полезно понять, как получаются данные, и как управляется состояние, или изменить их реактивно, чтобы увидеть, как они влияют на ваше приложение. Для `useAsyncData` и `useFetch` вы также можете вручную запустить их повторное получение. ![nuxt-devtools-tab-payload](/assets/blog/devtools/tab-payload.png) -### Terminals +### Терминалы -In some integrations, they might require to have subprocesses running to do certain jobs. Before DevTools, you either hide the output of the subprocess entirely and swallow the potential warnings/errors, or pipe to stdout and pollute your terminal with multiple outputs. Now you can now have the outputs in DevTools for each process and clearly isolated. +В некоторых интеграциях может потребоваться запустить подпроцессы для выполнения определенных задач. До DevTools вы либо полностью скрывали вывод подпроцесса и поглощали потенциальные предупреждения/ошибки, либо перенаправляли в stdout и засоряли свой терминал множественными выводами. Теперь вы можете иметь вывод в DevTools для каждого процесса и четко изолировать его. ![nuxt-devtools-tab-terminals](/assets/blog/devtools/tab-terminals.png) -### Virtual Files +### Виртуальные файлы -Virtual Files tab shows the virtual files generated by Nuxt and Nitro to support the conventions. This can be helpful for advanced debugging. +Вкладка "Virtual Files" показывает виртуальные файлы, сгенерированные Nuxt и Nitro для поддержки соглашений. Это может быть полезно для расширенной отладки. ![nuxt-devtools-tab-virtual-files](/assets/blog/devtools/tab-virtual-files.png) -### Inspect +### Инспектирование -Inspect expose the [`vite-plugin-inspect`](https://github.com/antfu/vite-plugin-inspect) integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues. +Вкладка "Inspect" предоставляет интеграцию [`vite-plugin-inspect`](https://github.com/antfu/vite-plugin-inspect), позволяя вам инспектировать этапы преобразования Vite. Это может быть полезно для понимания того, как каждый плагин преобразует ваш код, и для выявления потенциальных проблем. ![nuxt-devtools-vite-plugin-inspect](/assets/blog/devtools/tab-inspect.png) ### VS Code -Thanks to [VS Code Server](https://code.visualstudio.com/docs/remote/vscode-server), we are able to integrate a **full-featured** VS Code instance into DevTools. You can install extensions and sync your settings. This allows you to get closer feedback loop where you can change the code and see the result immediately without leaving the browser. +Благодаря [VS Code Server](https://code.visualstudio.com/docs/remote/vscode-server) мы можем интегрировать **полнофункциональный** экземпляр VS Code в DevTools. Вы можете устанавливать расширения и синхронизировать свои настройки. Это позволяет вам получить более тесный цикл обратной связи, где вы можете изменять код и видеть результат немедленно, не выходя из браузера. ![nuxt-devtools-tab-vscode](/assets/blog/devtools/tab-vscode.png) -### Module Contributed View +### Представления, предоставленные модулями -With the ecosystem in mind, Nuxt DevTools to designed to be flexible and extendable. Modules could contribute their own views to DevTools, to provide interactive data and playgrounds for their integrations. The following are a few examples: +Учитывая экосистему, Nuxt DevTools разработаны гибкими и расширяемыми. Модули могут вносить свои собственные представления в DevTools, чтобы предоставлять интерактивные данные и интерактивные площадки для их интеграции. Ниже приведено несколько примеров: -[VueUse module](/modules/vueuse) provides a search page for available composables and see their documentation. +[Модуль VueUse](/modules/vueuse) предоставляет страницу поиска доступных композаблов и просмотра их документации. ![nuxt-devtools-tab-vueuse](/assets/blog/devtools/tab-vueuse.png) -[UnoCSS module](/modules/unocss) provides an interactive inspector to see how each module contributes to the final CSS. +[Модуль UnoCSS](/modules/unocss) предоставляет интерактивный инспектор, позволяющий увидеть, как каждый модуль вносит вклад в конечный CSS. ![nuxt-devtools-tab-unocss](/assets/blog/devtools/tab-unocss.png) -[Nuxt Icon module](/modules/icon) provides a search engine for all icons available. +[Модуль Nuxt Icon](/modules/icon) предоставляет поисковую систему для всех доступных иконок. ![nuxt-devtools-tab-nuxt-icon](/assets/blog/devtools/tab-icones.png) -[Nuxt Vitest module](https://nuxt.com/modules/vitest) provides Vitest UI for tests runing with the same pipeline as your Nuxt app. +[Модуль Nuxt Vitest](https://nuxt.com/modules/vitest) предоставляет пользовательский интерфейс Vitest для тестов, работающих по тому же пайплайну, что и ваше приложение Nuxt. ![nuxt-devtools-tab-vitest](/assets/blog/devtools/tab-vitest.png) -### For Module Authors +### Для авторов модулей -With the release of `v0.3.0`, we improved the ability for module authors to contribute to the DevTools. +С релизом `v0.3.0` мы улучшили возможность авторов модулей вносить свой вклад в DevTools. -It includes: -- Module contributed views -- Access to client app's context and devtools' utils -- Custom RPC functions to communicate between server and client -- Subprocesses spawning and output steaming -- [`@nuxt/devtools-kit`](https://devtools.nuxtjs.org/module/utils-kit) - a set of utilities help you integrate your module with DevTools -- [`@nuxt/devtools-ui-kit`](https://devtools.nuxtjs.org/module/ui-kit) - the UI components used in DevTools, to make your module's view consistent with the rest of DevTools -- Starter template to create module with DevTools integration +Он включает: +- Представления, предоставленные модулем +- Доступ к контексту клиентского приложения и утилитам devtools +- Пользовательские функции RPC для связи между сервером и клиентом +- Создание подпроцессов и потоковая передача вывода +- [`@nuxt/devtools-kit`](https://devtools.nuxtjs.org/module/utils-kit) - набор утилит, помогающих интегрировать ваш модуль с DevTools +- [`@nuxt/devtools-ui-kit`](https://devtools.nuxtjs.org/module/ui-kit) - компоненты пользовательского интерфейса, используемые в DevTools, чтобы сделать представление вашего модуля согласованным с остальной частью DevTools +- Начальный шаблон для создания модуля с интеграцией DevTools -Please check out the [Devtools Module Authors Guide](https://devtools.nuxtjs.org/module/guide) to learn more. +Чтобы узнать больше, ознакомьтесь с [Руководством для авторов модулей Devtools](https://devtools.nuxtjs.org/module/guide). -## What to Expect Next? +## Чего ожидать дальше? -This is just the beginning of the journey. We are planning to add more features to DevTools, while exploring the ways to present the data in more intuitive and playful ways. +Это только начало пути. Мы планируем добавить в DevTools больше функций, одновременно исследуя способы представления данных более интуитивным и игровым способом. -The goals of Nuxt DevTools are to: +Цели Nuxt DevTools: -:list{icon="uil:pathfinder" type="default"}[Improve transparency for conventions] -:list{icon="uil:tachometer-fast" type="default"}[Inspecting performance & analysis] -:list{icon="uil:swatchbook" type="default"}[Interactive & playful] -:list{icon="uil:file-bookmark-alt" type="default"}[Personalized documentations] -:list{icon="uil:create-dashboard" type="default"}[Manage and scaffold apps with ease] -:list{icon="uil:lightbulb-alt" type="default"}[Provide insights and improvements] -:list{icon="uil:user-check" type="default"}[Make the development experience more enjoyable] +:list{icon="uil:pathfinder" type="default"}[Улучшение прозрачности для соглашений] +:list{icon="uil:tachometer-fast" type="default"}[Проверка производительности и анализ] +:list{icon="uil:swatchbook" type="default"}[Интерактивность и игривость] +:list{icon="uil:file-bookmark-alt" type="default"}[Персонализация документации] +:list{icon="uil:create-dashboard" type="default"}[Управление и создание шаблонов приложений с легкостью] +:list{icon="uil:lightbulb-alt" type="default"}[Предоставление идей и улучшений] +:list{icon="uil:user-check" type="default"}[Более приятный процесс разработки] --- -You can check our [Project Roadmap](https://github.com/nuxt/devtools/discussions/31) and share your [Ideas & Suggestions](https://github.com/nuxt/devtools/discussions/29), helping us to make the DevTools better. +Вы можете ознакомиться с нашей [дорожной картой проекта](https://github.com/nuxt/devtools/discussions/31) и поделиться своими [идеями и предложениями](https://github.com/nuxt/devtools/discussions/29), помогая нам сделать DevTools лучше. -You can follow the latest updates by staring the [GitHub repository](https://github.com/nuxt/devtools), and following [Nuxt's official Twitter](https://twitter.com/nuxt_js). +Вы можете следить за последними обновлениями, открыв [репозиторий GitHub](https://github.com/nuxt/devtools) и подписавшись на [официальный Twitter Nuxt](https://twitter.com/nuxt_js). -Thank you for reading, and we are looking forward to your feedback and contributions! +Спасибо за чтение, и мы с нетерпением ждем ваших отзывов и вклада!