[Nuxt series articles] Understanding Nuxt DevTools in one article

foreword

Hello everyone, I am Liu Ming, a ten-year entrepreneurial veteran and open source technology enthusiast.
Recently, the Nuxt team released the official developer tool Nuxt DevTools.

• Why is the official team releasing Nuxt DevTools?
• What functions does Nuxt DevTools have?

With these questions in mind, I translated the official article on the introduction of Nuxt DevTools into Chinese and shared it with you.

Original title: Introducing Nuxt DevTools
Original link: https://nuxt.com/blog/introducing-nuxt-devtools
Author: Anthony Fu
Release date: March 24, 2023

At Vue Amsterdam 2023 we announced the preview of Nuxt DevTools, a new tool to help you understand your Nuxt application and further improve the developer experience. Today we released a new minor version 0.3.0 with a bunch of updates and improvements.

In this post, we'll explore the reasons behind creating Nuxt DevTools , how it can enhance your development experience , and what you can expect from the future .

developer experience

In recent years, there has been a growing focus on developer experience (DX). Tools and frameworks are constantly working to improve DX. Along the way, Nuxt has introduced many innovative features and conventions to make your daily development easier and more efficient.
In Nuxt 3, we switched to Vite as the default bundler for instant Hot Module Replacement (HMR) during development, creating a faster feedback loop for your workflow. Additionally, we have introduced Nitro, a new server engine that allows you to deploy Nuxt applications to any hosting service such as Vercel, Netlify, Cloudflare, etc. with zero configuration.
Nuxt provides many built-in common practices:

• Write out-of-the-box TypeScript and ESM across your entire codebase.
• Build single-page applications (SPA), server-side rendering (SSR), static site generation (SSG), or mix them by route - using the same code base isomorphic without any explicit setup.
• Use multiple composable functions, such as useState and useAsyncData, for sharing state across server-side and client-side access.
• Enhanced SEO tools such as useHead and useSeoMeta make meta tag management a breeze.

Additionally, features such as layout systems, plugins, routing middleware, and other tools make application creation easier and codebases more organized.
Conventions such as file-based routing and a file-based server API make routing intuitive and easy.
Component auto-import makes it easy to create shared components that can be used directly in any Vue file. Unlike global components, they are code split. We've also introduced auto-import of composite functions, where all of Vue's APIs are available out of the box. Nuxt modules also enable automatic import of native and custom composite functions.
Recently, we introduced client- and server-only components that can be used by adding .clientand to the filename .server. All of these conventions are fully typed, and developers can even use type autocompletion when navigating routes or fetching data from an API. These conventions significantly reduce boilerplate code, avoid duplication, and increase productivity.
In terms of ecosystem, Nuxt has a huge community of developers around which to build modules, providing hundreds of high-quality modules. Modules allow developers to get the integration of functionality they want without worrying about configuration or best practices.

existing problems

Nuxt makes it easy to create a large-scale application, but there is a problem: lack of transparency .
With every new feature and convention we introduce, we're adding more abstractions to the framework.
Abstraction is a great thing for reducing complexity, making construction easier and work more focused. On the other hand, they also put an extra burden on the user to learn and understand the underlying principles. For example, where auto-imported components come from, or how many modules are using a certain component, etc. It also makes the code difficult to debug.
There are trade-offs, and you have to learn and understand the tool to use it effectively. While we've improved the documentation and provided more examples, we believe there is an opportunity to improve the lack of transparency .

Introducing Nuxt DevTools

Nuxt DevTools is a visualization tool that helps you understand your Nuxt application and further improve the developer experience. It was created to increase the transparency of Nuxt and applications, find performance bottlenecks and help you manage your applications and configurations.
It is introduced as an experimental module and provides views inside your application. Once installed, it adds a small icon at the bottom of your apps. Clicking it will open the DevTools panel.
To try it out, see the installation guide .

Introduction to Nuxt DevTools Tabs

Overview

Displays a quick overview of your application, including the Nuxt version, pages, components, modules and plugins you are using. It also checks your Nuxt version and allows you to upgrade with a single click.

Pages

The Pages tab shows your current routes and provides a quick way to navigate to them. For dynamic routing, it also provides a form to fill in each parameter interactively. You can also use the text boxes to play and test each route for matches.

Components

The Components tab shows all the components you use in your application and their sources. You can also search for them and go to the source code.

It also provides a graphical view showing the relationships between components. You can filter components to see dependencies for a specific component. This may help identify unexpected dependencies and improve the page's performance and bundle size.

You can also use the Inspector feature to inspect the DOM tree and see which component is rendering it. Click to go to the editor for a specific row. Changes can be made more easily without a thorough understanding of the project structure.

Imports

The Imports tab shows all the automatic imports registered with Nuxt. You can see which files are importing them, and where they came from. Some entries can also provide a short description and a link to documentation.

Modules

The Modules tab shows all the modules you have installed and provides links to their documentation and source code. You can find more available modules in Nuxt Modules.

Recently we launched an experimental upgrade feature that allows you to easily upgrade Nuxt or modules. Use the Terminal tab, which transparently displays the output of the upgrade process.

Assets

Assets tab showing all static assets and their information. You can copy the paths to the assets, or use their code snippets. In the future, with the integration of Nuxt Image, you can even optimize images with one click.

Plugins

The Plugins tab shows all the plugins you have used in your app. Since plugins run before the application is installed, the time spent on each should be minimal to avoid blocking the application from rendering. The provided time cost of each plugin can help find performance bottlenecks.

Hooks

The Hooks tab helps you monitor the time spent on each hook from client and server side. You can also see how many listeners are registered for each hook, and how many times they are called. This helps to find performance bottlenecks.

App Config

You can inspect and modify application configurations in DevTools, try different configurations and see the effect immediately.

Payload & Data

This tab shows the status created by , and . It can be helpful to understand how data is fetched and state is managed, or changed passively to see their impact on your application. For and , you can also manually trigger a refetch. useStateuseAsyncDatauseFetchuseAsyncDatauseFetch

Terminals

In some integrations, they may need to run subprocesses to do some work. Before DevTools, you either completely hid the subprocess's output and swallowed potential warnings/errors, or piped to stdout and polluted your terminal with multiple outputs. Now you can get the output of each process clearly isolated in DevTools.

Virtual Files

The Virtual Files tab displays convention-supported virtual files generated by Nuxt and Nitro. This helps with advanced debugging.

Inspect

Inspect exposes integrations that allow you to inspect Vite's transformation steps. It's helpful to understand how each plugin transforms your code and spot potential problems.

VS Code

Thanks to VS Code Server, we were able to integrate a fully functional instance of VS Code into DevTools. You can install extensions and sync your settings. This enables you to have a tighter feedback loop where you can make changes to your code and see the results immediately without leaving your browser.

Module Contributed View

With the ecosystem in mind, Nuxt DevTools is designed to be flexible and extensible. Modules can contribute their own views to DevTools, providing interactive data for their integration. Here are a few examples:

• The VueUse module provides a search page for available composition functions and view their documentation.
• UnoCSS Modules provides an interactive inspector to see how each module contributes to the final CSS.
• The Nuxt Icon module provides a search engine for all available icons.
• The Nuxt Vitest module provides a Vitest UI for tests run using the same pipeline as a Nuxt application.

For module authors

With the release of v0.3.0, we've improved the ability of module authors to contribute to DevTools.
This includes:

• Module Contribution View
• Utilities to access the context of client applications and development tools
• Custom RPC functions to communicate between server and client
• Subprocess generation and output streamlining
• @nuxt/devtools-kit- A set of utilities to help you integrate modules with DevTools
• @nuxt/devtools-ui-kit- UI components used in DevTools to make your module's view consistent with the rest of DevTools
• Starter Template for Creating Modules with DevTools Integration
  Check out the Devtools Module Author's Guide for more information.

What else will we do?

This is just the beginning of the journey. We plan to add more features to DevTools while exploring ways to present data in more intuitive and interesting ways.
The goals of Nuxt DevTools are:

• Improve the transparency of the agreement
• Check performance and analysis
• interactive fun
• personalized document
• Easily manage and build applications
• Provide insights and improvements
• Make the development experience more enjoyable
  You can help us improve DevTools by viewing our project roadmap and sharing your thoughts and suggestions.
  You can follow the latest updates by following the GitHub repository and following Nuxt's official Twitter.
  Thanks for reading, and we look forward to your feedback and contributions!

---

The translation ends here.
I am Ming Liu, a ten-year entrepreneurial veteran and open source technology enthusiast. Whether you are communicating and learning, or have development needs, welcome to contact us by private message.
If you have any questions, please contact Lao Liu.