我們在 Vue Amsterdam 2023 上宣布了 Nuxt DevTools 的預覽版，這是一個新工具，旨在幫助您了解 Nuxt 應用程式並進一步改善開發者體驗。今天，我們發布了一個新的次要版本 v0.3.0，其中包含大量更新和改進。
在這篇文章中，我們將探討創建 Nuxt DevTools 背後的原因、它如何增強您的開發體驗，以及您對未來的期望。
開發者體驗
近年來，人們越來越關注開發者體驗 (DX)。工具和框架一直在努力改善 DX。在此過程中，Nuxt 引入了許多創新功能和慣例，使您的日常開發更輕鬆、更有效率。
在 Nuxt 3 中，我們切換到 Vite 作為預設的打包工具，以便在開發過程中實現即時熱模組替換 (HMR)，從而為您的工作流程創建更快的反饋迴圈。此外，我們還引入了 Nitro，這是一個新的伺服器引擎，可讓您將 Nuxt 應用程式部署到任何託管服務，例如 Vercel、Netlify、Cloudflare 和 更多 且無需配置。
Nuxt 提供了許多內建的通用實踐
- 在整個程式碼庫中，開箱即用地編寫 TypeScript 和 ESM。
- 建構單頁應用程式 (SPA)、伺服器端渲染 (SSR)、靜態網站生成 (SSG)，或 針對每個路由混合它們 - 使用相同的程式碼庫同構地進行，無需任何顯式設定。
- 使用多個 composable，例如
useState和useAsyncData，用於在伺服器端和用戶端之間共享可訪問的狀態。 - 利用 SEO 實用程式，例如
useHead和useSeoMeta，使 meta 標籤管理變得輕而易舉。
此外，諸如 版面配置系統、插件、路由 中介層 和其他工具等功能使應用程式創建更輕鬆，程式碼庫更有條理。
諸如 基於檔案的路由 和 基於檔案的伺服器 API 等慣例使路由直觀且毫不費力。
元件自動導入 使創建可在任何 Vue 檔案中直接使用的共享元件變得容易。與全域元件不同，它們是程式碼分割的。我們還引入了 composable 自動導入，其中 Vue 中的所有 API 都可以直接使用。Nuxt 模組也可以提供它們的自訂 composable 以進行自動導入，以及您的 本地 composable。
最近，我們推出了僅用戶端和僅伺服器端元件，可以透過將 .client 和 .server 新增到檔案名稱來使用。所有這些慣例都是完全類型化的，開發人員甚至可以在進行路由導航或從 API 獲取資料時獲得類型自動完成。這些慣例顯著減少了樣板程式碼，避免了重複，並提高了生產力。
在生態系統方面，Nuxt 擁有龐大的開發者社群圍繞其構建模組，有數百個高品質模組 可用。模組允許開發人員獲得他們想要的功能的整合，而無需擔心配置或最佳實踐。
問題
Nuxt 能夠輕鬆創建大規模的應用程式，但存在一個問題：缺乏透明度。
對於我們引入的每一個新功能和慣例，我們都在為框架增加更多的抽象層。
抽象層對於轉移實作複雜性並使事情更容易在建構時更專注是很好的。另一方面，它們也可能給用戶帶來額外的負擔，讓他們學習和理解底層發生了什麼。也會導致隱含性，例如自動導入的元件來自哪裡，或者有多少模組正在使用某個元件等等。它也可能使除錯變得困難。
這可能被認為是任何工具的權衡，您必須學習和理解該工具才能有效率地使用它。儘管我們改進了文件並提供了更多範例，我們仍然相信有機會改善缺乏透明度的問題。
Nuxt DevTools 簡介
Nuxt DevTools 是一個視覺化工具，旨在幫助您了解您的 Nuxt 應用程式並進一步改善開發者體驗。它的創建目的是為了提供更好的 Nuxt 和您的應用程式的透明度，找到效能瓶頸，並幫助您管理您的應用程式和配置。
它作為一個實驗性模組發布，並在您的應用程式內部提供視圖。安裝後，它將在您的應用程式底部新增一個小圖示。點擊它將打開 DevTools 面板。
要嘗試它，請參閱 安裝指南。
概覽
顯示您的應用程式的快速概覽，包括您正在使用的 Nuxt 版本、頁面、元件、模組和插件。它還會檢查您的 Nuxt 版本，並允許您一鍵升級。
頁面
頁面標籤顯示您目前的路由，並提供一種快速導航到它們的方式。對於動態路由，它還提供了一個表單，可以互動式地填寫每個參數。您也可以使用文字框來播放和測試每個路由是如何匹配的。
元件
元件標籤顯示您在應用程式中使用的所有元件以及它們的來源。您還可以搜尋它們並轉到原始碼。
它還提供了一個圖表視圖，顯示元件之間的關係。您可以篩選元件以查看特定元件的依賴關係。這有助於識別意外的依賴關係，並提高頁面的效能和捆綁包大小。
您也可以使用「檢查器」功能來檢查 DOM 樹，並查看哪個元件正在渲染它。點擊即可轉到特定行的編輯器。使其更容易進行更改，而無需徹底了解專案結構。
導入
導入標籤顯示所有註冊到 Nuxt 的自動導入。您可以看到哪些檔案正在導入它們，以及它們的來源。某些條目還可以提供簡短的描述和文件連結。
模組
模組標籤顯示您已安裝的所有模組，並提供指向其文件和原始碼的連結。您可以在 Nuxt 模組 中找到更多可用的模組。
最近，我們引入了實驗性升級功能，可讓您輕鬆升級 Nuxt 或模組。透過 終端標籤，它透明地顯示升級過程的輸出。
資源
資源標籤顯示您的所有靜態資源及其資訊。您可以複製資源的路徑，或使用它們的程式碼片段。在未來，隨著 Nuxt Image 的整合，您甚至可以一鍵優化圖像。
插件
插件標籤顯示您在應用程式中使用的所有插件。由於插件在應用程式掛載之前運行，因此每個插件花費的時間應盡可能少，以避免阻止應用程式渲染。每個插件的時間成本可以幫助找到效能瓶頸。
Hook
Hook 標籤可以幫助您監控用戶端和伺服器端每個 hook 中花費的時間。您還可以查看每個 hook 註冊了多少監聽器，以及它們被調用了多少次。這有助於找到效能瓶頸。
應用程式配置
您可以在 DevTools 中檢查和修改應用程式配置，嘗試不同的配置並立即查看效果。
Payload & 資料
此標籤顯示由 useState、useAsyncData 和 useFetch 建立的狀態。它可以幫助您了解資料是如何獲取的以及狀態是如何管理的，或者反應式地更改它們以查看它們是否影響您的應用程式。對於 useAsyncData 和 useFetch，您也可以手動觸發重新獲取。
終端
在某些整合中，它們可能需要運行子進程來執行某些工作。在 DevTools 之前，您可以完全隱藏子進程的輸出並吞下潛在的警告/錯誤，或者管道輸出到 stdout 並用多個輸出污染您的終端。現在，您可以在 DevTools 中為每個進程提供輸出，並清楚地隔離它們。
虛擬檔案
虛擬檔案標籤顯示 Nuxt 和 Nitro 為了支援慣例而生成的虛擬檔案。這對於進階除錯很有幫助。
檢查
檢查公開了 vite-plugin-inspect 整合，允許您檢查 Vite 的轉換步驟。它可以幫助您了解每個插件是如何轉換您的程式碼的，並發現潛在的問題。
VS Code
感謝 VS Code Server，我們能夠將一個功能齊全的 VS Code 實例整合到 DevTools 中。您可以安裝擴充功能並同步您的設定。這使您可以獲得更緊密的反饋迴圈，您可以在其中更改程式碼並立即看到結果，而無需離開瀏覽器。
模組貢獻的視圖
考慮到生態系統，Nuxt DevTools 被設計為靈活且可擴展的。模組可以將它們自己的視圖貢獻給 DevTools，以為它們的整合提供互動式資料和遊樂場。以下是一些範例
VueUse 模組 提供了一個搜尋頁面，用於搜尋可用的 composable 並查看它們的文件。
UnoCSS 模組 提供了一個互動式檢查器，用於查看每個模組如何貢獻最終的 CSS。
Nuxt Icon 模組 為所有可用的圖示提供了一個搜尋引擎。
Nuxt Vitest 模組 提供了 Vitest UI，用於以與您的 Nuxt 應用程式相同的管道運行的測試。
對於模組作者
隨著 v0.3.0 的發布，我們改進了模組作者為 DevTools 做出貢獻的能力。
它包括
- 模組貢獻的視圖
- 訪問用戶端應用程式的上下文和 devtools 的實用程式
- 用於在伺服器和用戶端之間通信的自訂 RPC 函數
- 子進程衍生和輸出串流
@nuxt/devtools-kit- 一組實用程式，可幫助您將模組與 DevTools 整合@nuxt/devtools-ui-kit- DevTools 中使用的 UI 元件，使您的模組視圖與 DevTools 的其餘部分保持一致- 用於創建具有 DevTools 整合的模組的入門範本
請查看 Devtools 模組作者指南 以了解更多資訊。
接下來的期望？
這僅僅是旅程的開始。我們計劃為 DevTools 新增更多功能，同時探索以更直觀和有趣的方式呈現資料的方法。
Nuxt DevTools 的目標是
- 提高慣例的透明度
- 檢查效能和分析
- 互動式和有趣
- 個人化的文件
- 輕鬆管理和搭建應用程式
- 提供見解和改進
- 使開發體驗更加愉快
您可以查看我們的 專案路線圖 並分享您的 想法和建議，幫助我們使 DevTools 變得更好。
您可以透過關注 GitHub 儲存庫 和關注 Nuxt 的官方 Twitter 來關注最新的更新。
感謝您的閱讀，我們期待您的反饋和貢獻！