blog: Update 18.nuxt-devtools-v1-0.md (#1550)

content/7.blog/18.nuxt-devtools-v1-0.md

@@ -43,15 +43,15 @@ Out of all these benefits of having a powerful framework, we have to made some t
 
 !["Transparency" as the trade offs of having "Conventions", "Abstractions", "Sensible Defaults" and "Normalizations"](/assets/blog/devtools/slide-transparency.png){.border.border-gray-200.dark:border-gray-700.rounded-lg}
 
-Conventions 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.
+Conventional 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.
 
 Trade-offs are inevitable. Generally we believe those trade-offs are worth it, as they would help organizing users' codebase and make it easier to maintain in the long run. In the meantime, we also want to compensate the transparency we lost by providing a tool to help you understand what's going on under the hood and make the learning curve smoother.
 
 That's where Nuxt DevTools comes in! We [first introduced it](/blog/introducing-nuxt-devtools) in February 2023 to experiment with the idea. After a few months of exploration and development, from surprisingly positive feedbacks from the community, this idea has been proven to be useful and we decided to make it a core part of your Nuxt development experience.
 
 ## Features
 
-[Nuxt DevTools](https://github.com/nuxt/devtools) is a set of visual tools 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) is a set of visual tools to help you understand your Nuxt app and improve the developer experience even further. It's created to provide better transparency between Nuxt and your app, find performance bottlenecks and help you manage your app and configuration.
 
 ### In App DevTools
 
@@ -61,19 +61,19 @@ From the overview, Nuxt DevTools is an in-app DevTools that lives alongside your
 
 We believe this is a better approach than the traditional browser extension DevTools, as it's:
 
-- **Works across all browsers**, and even on mobile devices! - The capability of browser extension DevTools are limited by the APIs each browsers provides, and also maintain multiple extensions would require a lot of efforts. This approach would allow us to focus more on the functionality and features, while having it accessible users on any browsers and devices.
+- **Works across all browsers**, and even on mobile devices! - The capability of browser extension DevTools are limited by the APIs each browsers provides, and also maintain multiple extensions would require a lot of effort. This approach would allow us to focus more on the functionality and features, while having it accessible to users on any browsers and devices.
 - **Build tools integrations** - Tranditionally browser extension DevTools are only able to access the runtime context of your app and have no access to the build tools. Having the DevTools comes with Nuxt, allows us to communicate with the build tools and provide much more insights and features.
 - **Avoid layout shfits** - Having the DevTools as a floating panel would avoid the layout shifts when toggling the DevTools.
 
 ### Pages View
 
-To help improving the implicitness of the file-based routing, we introduced the Pages View in DevTools. It lists all the pages that been registered in your app, that you can easily test and navigate between them.
+To help improving the implicitness of file-based routing, we introduced the Pages View in DevTools. It lists all the pages that have been registered in your app, that you can easily test and navigate between them.
 
 :article-video{cloudinary="v1700132393/devtools/1-pages_kkbecx"}
 
 ### Components View
 
-The 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.
+The Components tab shows 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.
 
 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.
 
@@ -89,7 +89,7 @@ Composables view shows all the auto-imported composables registered to Nuxt. You
 
 The Modules tab shows all the modules that are registered in your app, with the links to thier documentations and repositories.
 
-We also provides the ability for you to search and explore the modules from the community. And install them with a single click!
+We also provide the ability for you to search for and explore the modules from the community. And install them with a single click!
 
 :article-video{cloudinary="v1700132389/devtools/4-modules_v5ha5u"}
 
@@ -113,7 +113,7 @@ Similar to the Runtime Configs Editor, the Payload Editor allows you to edit the
 
 ### Open Graph Preview
 
-[Open Graph](https://ogp.me/) plays an important role in social media sharing as well as [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization). In the traditionally workflow, we ususally needs to first deploy our app to check if the Open Graph is working as expected on various social media platforms. With the Open Graph Preview, you can now preview the Open Graph in DevTools and update them live with instant feedback loop.
+[Open Graph](https://ogp.me/) plays an important role in social media sharing as well as [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization). In the traditional workflow, we usually need to first deploy our app to check if the Open Graph is working as expected on various social media platforms. With the Open Graph Preview, you can now preview the Open Graph in DevTools and update it live with an instant feedback loop.
 
 We also help you check the Open Graph tags in your app and provide suggestions to improve them. You can copy the genreated code snippet and paste it to your routes to fix them in one go.
 
@@ -137,31 +137,31 @@ As of November 2023, the Timeline is still an experimental feature that requires
 
 ### Production Build Analyzer
 
-While Nuxt DevTools is mostly focus on providing developement time tools, sometimes we might want to to know how chunks are composed in production. The Build Analyzer allows you to fire up a production build and analyze the chunks and modules at any time and see how they are bundled. You can also do multiple builds on different branches to compare how your refactoring/changes affect the bundle size, etc.
+While Nuxt DevTools is mostly focused on providing development tools, sometimes we might want to know how chunks are composed in production. The Build Analyzer allows you to fire up a production build and analyze the chunks and modules at any time and see how they are bundled. You can also do multiple builds on different branches to compare how your refactoring/changes affect the bundle size, etc.
 
 :article-video{cloudinary="v1700132394/devtools/11-build-analyze_f3wx6q"}
 
 ### Server API Playground
 
-Nuxt provides a very convenient way to create server API functions with the [server routes](/docs/guide/directory-structure/server#server-routes). Since in Nuxt we have that information, we are able to provide a playground for you to test and debug your server API functions, similiar to tools like Postman. We list all the server APIs available in your app automatically. And we execute those functions **within the same context of your app**, so you don't need to manually setting them up in external tools. As always, we also have code snippets for you to copy and paste to your app.
+Nuxt provides a very convenient way to create server API functions with the [server routes](/docs/guide/directory-structure/server#server-routes). Since in Nuxt we have that information, we are able to provide a playground for you to test and debug your server API functions, similar to tools like Postman. We list all the server APIs available in your app automatically. And we execute those functions **within the same context of your app**, so you don't need to manually set them up in external tools. As always, we also have code snippets for you to copy and paste into your app.
 
 :article-video{cloudinary="v1700132388/devtools/12-server-api_owjyjg"}
 
 ### Embedded Full-feature VS Code
 
-Thanks to the flexibility of our DevTools approach, we can levarage the power of modern web to embed a full-feature VS Code right in the DevTools. In that VS Code, you can sign in to your account and synchourize your settings, and all the extensions just work as your normal VS Code client. This allows you to quickly edit your code without leaving your browser.
+Thanks to the flexibility of our DevTools approach, we can leverage the power of the modern web to embed a full-featured VS Code right in the DevTools. In that VS Code, you can sign in to your account and synchronize your settings, and all the extensions just work as your normal VS Code client. This allows you to quickly edit your code without leaving your browser.
 
 :article-video{cloudinary="v1700132395/devtools/13-vscode_je5x0m"}
 
 ### Component Inspector
 
-The Inspector allows you 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.
+The Inspector allows you to inspect the DOM tree and see which component is rendering it. Click to go to your editor for the specific line. Making it much easier to make changes without the requirement of understanding the project structure thoroughly.
 
 :article-video{cloudinary="v1700132391/devtools/0-inspector_fuxmr7"}
 
 ### Split Screens
 
-In the recent releases, we introduce a split screen feature, allow you to open two tabs side-by-side.
+In the recent releases, we introduced a split screen feature, that allows you to open two tabs side-by-side.
 
 :article-video{cloudinary="v1700132391/devtools/0-split-view_mdeiie"}
 
@@ -207,49 +207,49 @@ And they are just a few of them! We are looking forward to see more modules comi
 
 ### Projects Inspired by Nuxt DevTools
 
-In the meantime, we are also flattered to other frameworks start to build their own DevTools inspired by Nuxt DevTools:
+In the meantime, we are also flattered that other frameworks are starting to build their own DevTools inspired by Nuxt DevTools:
 
 - [`webfansplz/vite-plugin-vue-devtools`](https://github.com/webfansplz/vite-plugin-vue-devtools) - A Nuxt DevTools port to support DevTools for Vite + Vue 3 apps.
 - [`pheno-agency/vite-plugin-devtools`](https://github.com/pheno-agency/vite-plugin-devtools) - An experiment on building framework-agnostic DevTools for Vite.
 - [Modern.js DevTools](https://github.com/Asuka109/modern.js/tree/dev/modernjs-devtools/packages/devtools/plugin) - In App DevTools for Modern.js
 - [Qwik DevTools](https://github.com/QwikDev/devtools) - DevTools for Qwik
 
-We are working close to the maintainers of those projects to see how we can bring the experience of DevTools to the next level.
+We are working closely with the maintainers of those projects to see how we can bring the experience of DevTools to the next level.
 
 ## What's Next
 
 Nuxt DevTools just reached v1.0, but t doesn't mean we are done. There are still a lot of things we want to explore and improve. Here are some of the ideas we are considering:
 
 - Nuxt Accessibility Integration - We are building an a11y integration for Nuxt ([#23255](https://github.com/nuxt/nuxt/issues/23255)). We'll build a dedicated view in Nuxt DevTools for you to check the accessibility hints interactively.
-- Vue DevTools Integration - We are working with the Vue team to bring the Vue DevTools experience to a shared tools that works for both browser extension and in-app DevTools like `vite-plugin-vue-devtools` and Nuxt DevTools.
+- Vue DevTools Integration - We are working with the Vue team to bring the Vue DevTools experience to a shared tool that works for both browser extensions and in-app DevTools like `vite-plugin-vue-devtools` and Nuxt DevTools.
 - [Let us know your ideas/suggestions!](https://github.com/nuxt/devtools/discussions/29)
 
 ## The Future
 
-We are excited to see how Nuxt DevTools can help you build better apps and improve your developer experience. Going forward, we are imagining something bigger than Nuxt DevTools itself. We believe that have such framework-specific DevTools is the way onwards to provide even better developer experience. We also see there are many parts of such tools can actually be shared and reused across tools. We came up with the idea of DevTools Kit.
+We are excited to see how Nuxt DevTools can help you build better apps and improve your developer experience. Going forward, we are imagining something bigger than Nuxt DevTools itself. We believe that having such framework-specific DevTools is the way onwards to provide even better developer experience. We also see there are many parts of such tools can actually be shared and reused across tools. We came up with the idea of the DevTools Kit.
 
 ### DevTools Kit
 
-DevTools Kit is an idea of the universal protocol, that are still in early brainstorming phase. We imagine that in the best world, each feature of the DevTools should be **composable, extensible, and collaborative**. Meta-frameworks could built their own features for their specific needs, while the common web-related tools could be shared and collaborated between different frameworks.
+DevTools Kit is an idea of the universal protocol that is still in the early brainstorming phase. We imagine that in the best world, each feature of the DevTools should be **composable, extensible, and collaborative**. Meta-frameworks could build their own features for their specific needs, while the common web-related tools could be shared and collaborated on between different frameworks.
 
 ![DevTools Kit](/assets/blog/devtools/slide-devtools-kit.png){.border.border-gray-200.dark:border-gray-700.rounded-lg}
 
-Imagine we could have all these features, each as a standalone package. We could have general web related tools like SEO, Accessability, PWA, Static Assets, etc. Then low-level build tools related, like Vite build analyzer, Vite Inspector, or Webpack visualizer, etc. And finally we could have framework and meta-framework specific tools like Vue Components view, or Nuxt Server API Playground, etc.
+Imagine we could have all these features, each as a standalone package. We could have general web-related tools like SEO, Accessibility, PWA, Static Assets, etc. Then low-level build tools related, like Vite build analyzer, Vite Inspector, or Webpack visualizer, etc. And finally, we could have framework and meta-framework specific tools like Vue Components view, or Nuxt Server API Playground, etc.
 
 ![Nuxt DevTools](/assets/blog/devtools/slide-nuxt-devtools.png){.border.border-gray-200.dark:border-gray-700.rounded-lg}
 
 ![Nuxt DevTools](/assets/blog/devtools/slide-vue-devtools.png){.border.border-gray-200.dark:border-gray-700.rounded-lg}
 
-At that time, Vue DevTools would be composition of common web features and Vue-specific features. And Nuxt DevTools would essentially be a composition of the features above, inherited all features from Vue DevTools, and added Nuxt specific features on top of it.
+At that time, Vue DevTools would be a composition of common web features and Vue-specific features. And Nuxt DevTools would essentially be a composition of the features above, inherit all features from Vue DevTools, and add Nuxt specific features on top of it.
 
 ![Your DevTools](/assets/blog/devtools/slide-your-devtools.png){.border.border-gray-200.dark:border-gray-700.rounded-lg}
 
 It would even be possible to compose your own DevTools as you like.
 
-That said, we are still thinking and discussing about the details of the DevTools Kit. Stay tuned for more updates!
+That said, we are still thinking about and discussing the details of the DevTools Kit. Stay tuned for more updates!
 
 ## Conclusion
 
-We hope you enjoy the new Nuxt DevTools experience! We are looking forward to see how it can help you build better apps and improve your developer experience. If you have any ideas or suggestions, feel free let us know in the [Ideas & Suggestions](https://github.com/nuxt/devtools/discussions/29) discussion.
+We hope you enjoy the new Nuxt DevTools experience! We are looking forward to seeing how it can help you build better apps and improve your developer experience. If you have any ideas or suggestions, feel free to let us know in the [Ideas & Suggestions](https://github.com/nuxt/devtools/discussions/29) discussion.
 
 Thank you for your support and happy hacking! 🚀