Nuxt 開發者工具介紹

我們在 Vue Amsterdam 2023 上宣布了 Nuxt 開發者工具的預覽版，這是一個新的工具，可幫助您了解您的 Nuxt 應用程式並進一步改善開發者體驗。今天，我們發布了一個新的次要版本 v0.3.0，其中包含許多更新和改進。

在這篇文章中，我們將探討創建 Nuxt 開發者工具背後的原因、它如何增強您的開發體驗，以及您對未來的期望。

開發者體驗

近年來，人們越來越關注開發者體驗 (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 開發者工具介紹

Nuxt 開發者工具是一種視覺工具，可幫助您了解您的 Nuxt 應用程式並進一步改善開發者體驗。它的創建目的是為了提供更好的 Nuxt 和您的應用程式的透明度、找出效能瓶頸並幫助您管理應用程式和配置。

它以實驗性模組的形式提供，並在您的應用程式內提供視圖。安裝後，它會在您的應用程式底部新增一個小圖示。單擊它將會打開開發者工具面板。

要嘗試它，請參閱安裝指南。

概觀

顯示您的應用程式的快速概觀，包括您正在使用的 Nuxt 版本、頁面、元件、模組和外掛程式。它還會檢查您的 Nuxt 版本，並允許您一鍵升級。

頁面

「頁面」標籤顯示您目前的路由，並提供快速導航到它們的方法。對於動態路由，它還提供一個表單，可以互動式地填寫每個參數。您也可以使用文字框來播放和測試每個路由的匹配方式。

元件

「元件」標籤顯示您在應用程式中使用的所有元件及其來源。您也可以搜尋它們並前往原始程式碼。

它還提供了一個圖表視圖，顯示元件之間的關係。您可以篩選元件以查看特定元件的依賴關係。這可以幫助識別意外的依賴關係，並提高頁面的效能和捆綁大小。

您也可以使用「檢查器」功能來檢查 DOM 樹，並查看是哪個元件正在渲染它。單擊即可前往您編輯器中的特定行。這樣可以更輕鬆地進行變更，而無需徹底了解專案結構。

匯入

「匯入」標籤顯示所有已註冊到 Nuxt 的自動匯入。您可以查看哪些檔案正在匯入它們，以及它們的來源。某些條目還可以提供簡短的描述和文件連結。

模組

「模組」標籤顯示您已安裝的所有模組，並提供其文件和原始程式碼的連結。您可以在Nuxt 模組中找到更多可用的模組。

最近，我們引入了實驗性升級功能，讓您可以輕鬆升級您的 Nuxt 或模組。使用終端機標籤，它會透明地顯示升級過程的輸出。

資源

「資源」標籤顯示您所有的靜態資源及其資訊。您可以複製資源的路徑或使用它們的程式碼片段。未來，透過整合 Nuxt Image，您甚至可以一鍵最佳化影像。

外掛程式

「外掛程式」標籤顯示您在應用程式中使用的所有外掛程式。由於外掛程式在應用程式掛載之前執行，因此每個外掛程式所花費的時間應盡可能短，以避免阻止應用程式渲染。每個外掛程式提供的時間成本有助於找出效能瓶頸。

Hook

「Hook」標籤可協助您監控客戶端和伺服器端每個 Hook 中所花費的時間。您還可以查看每個 Hook 註冊了多少監聽器，以及它們被調用的次數。這有助於找出效能瓶頸。

應用程式配置

您可以在開發者工具中檢查和修改應用程式配置，嘗試不同的配置並立即查看效果。

載荷 & 資料

此標籤顯示由 useState、useAsyncData 和 useFetch 建立的狀態。它有助於了解資料的提取方式以及狀態的管理方式，或反應性地變更它們以查看它們是否會影響您的應用程式。對於 useAsyncData 和 useFetch，您也可以手動觸發重新提取。

終端機

在某些整合中，它們可能需要執行子程序來執行某些工作。在開發者工具之前，您可以完全隱藏子程序的輸出並吞下潛在的警告/錯誤，或者將輸出管道傳送到 stdout 並使用多個輸出污染您的終端機。現在，您可以在開發者工具中取得每個程序的輸出，並清楚地隔離。

虛擬檔案

「虛擬檔案」標籤顯示 Nuxt 和 Nitro 生成的虛擬檔案，以支援約定。這對於進階除錯很有幫助。

檢查

「檢查」公開了 vite-plugin-inspect 整合，讓您可以檢查 Vite 的轉換步驟。這有助於了解每個外掛程式如何轉換您的程式碼並找出潛在的問題。

VS Code

感謝 VS Code Server，我們得以將一個功能完整的 VS Code 實例整合到 DevTools 中。您可以安裝擴充功能並同步您的設定。這讓您可以獲得更緊密的反饋迴圈，讓您在不離開瀏覽器的情況下，就能夠更改程式碼並立即看到結果。

模組貢獻視圖

考量到生態系統，Nuxt DevTools 的設計具有彈性和可擴展性。模組可以將自己的視圖貢獻給 DevTools，為其整合提供互動式資料和操作空間。以下是一些範例：

VueUse 模組提供了一個可搜尋可用 composables 的頁面，並可查看其文件。

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，以獲取最新更新。

感謝您的閱讀，我們期待您的回饋和貢獻！