我們宣佈了Nuxt DevTools的預覽版Vue Amsterdam 2023，這是一個新工具，旨在幫助您瞭解您的 Nuxt 應用程式並進一步改善開發者體驗。今天我們釋出了一個新的小版本v0.3.0，其中包含一系列更新和改進。
在這篇文章中，我們將探討建立 Nuxt DevTools 背後的原因，它如何增強您的開發體驗，以及您可以期待的未來。
開發者體驗
近年來，對開發者體驗 (DX) 的關注日益增加。工具和框架一直在努力改善 DX。在此過程中，Nuxt 引入了許多創新的特性和約定，使您的日常開發更輕鬆、更高效。
在 Nuxt 3 中，我們切換到Vite作為開發過程中即時熱模組替換 (HMR) 的預設打包器，為您的工作流建立更快的反饋迴圈。此外，我們還引入了Nitro，一個新的伺服器引擎，允許您將 Nuxt 應用程式部署到任何託管服務，例如Vercel, Netlify, Cloudflare等等更多 零配置.
Nuxt 內建了許多常見實踐
- 在整個程式碼庫中開箱即用地編寫 TypeScript 和 ESM。
- 構建單頁應用程式 (SPA)、伺服器端渲染 (SSR)、靜態站點生成 (SSG)，或按路由混合它們 - 使用相同的同構程式碼庫，無需任何明確設定。
- 使用多個可組合函式，例如
useState和useAsyncData，用於共享伺服器和客戶端可訪問的狀態。 - 利用 SEO 工具，例如
useHead和useSeoMeta，使元標籤管理變得輕而易舉。
此外，佈局系統、外掛、路由中介軟體等功能使應用程式建立更容易，程式碼庫更有條理。
像基於檔案的路由和基於檔案的伺服器 API等約定使得路由直觀且輕鬆。
元件自動匯入使得建立可直接在任何 Vue 檔案中使用的共享元件變得容易。與全域性元件不同，它們是程式碼分割的。我們還引入了可組合函式自動匯入，Vue 的所有 API 都可直接使用。Nuxt 模組也可以提供它們的自定義可組合函式進行自動匯入，以及您的本地可組合函式。
最近，我們引入了客戶端和僅伺服器元件，透過在檔名中新增.client和.server即可使用。所有這些約定都是完全型別化的，開發人員甚至可以在進行路由導航或從 API 獲取資料時獲得型別自動補全。這些約定顯著減少了樣板程式碼，避免了重複，並提高了生產力。
在生態系統方面，Nuxt 擁有一個龐大的開發者社群，圍繞它構建模組，擁有數百個高質量模組可用。模組允許開發人員獲得他們所需功能的整合，而無需擔心配置或最佳實踐。
問題
Nuxt 能夠輕鬆建立大型應用程式，但存在一個問題：缺乏透明度。
對於我們引入的每個新特性和約定，我們都會給框架增加一點抽象。
抽象是將實現複雜性轉移並使事情更容易，從而在構建時更專注的好方法。另一方面，它們也可能給使用者帶來額外的負擔，去學習和理解底層發生了什麼。這也會導致隱式性，例如自動匯入的元件來自哪裡，或者有多少模組正在使用某個元件等。它還會使除錯變得困難。
這可能被認為是任何工具的權衡，您必須學習和理解該工具才能高效地使用它。儘管改進了文件並提供了更多示例，但我們認為有機會改進透明度不足的問題。
Nuxt DevTools 簡介
Nuxt DevTools是一個視覺化工具，可幫助您瞭解您的 Nuxt 應用程式並進一步改善開發者體驗。它旨在提供 Nuxt 和您的應用程式更好的透明度，查詢效能瓶頸並幫助您管理您的應用程式和配置。
它作為實驗性模組釋出，並在您的應用程式內部提供檢視。安裝後，它會在您的應用程式底部新增一個小圖示。點選它將開啟 DevTools 面板。
要試用它，請參考安裝指南.
概覽
顯示您的應用程式的快速概覽，包括您正在使用的 Nuxt 版本、頁面、元件、模組和外掛。它還會檢查您的 Nuxt 版本，並允許您一鍵升級。
頁面
頁面標籤顯示您當前的路由，並提供一種快速導航到它們的方式。對於動態路由，它還提供一個表單，可互動地填寫每個引數。您還可以使用文字框來嘗試和測試每個路由是如何匹配的。
元件
元件標籤顯示您應用程式中使用的所有元件以及它們的來源。您還可以搜尋它們並跳轉到原始碼。
它還提供了一個圖表檢視，顯示元件之間的關係。您可以過濾元件以檢視特定元件的依賴項。這有助於識別意外依賴項並提高頁面的效能和包大小。
您還可以使用“檢查器”功能檢查 DOM 樹並檢視是哪個元件正在渲染它。點選即可跳轉到編輯器中的特定行。這使得更改變得容易得多，無需徹底理解專案結構。
匯入
“匯入”選項卡顯示註冊到 Nuxt 的所有自動匯入。您可以檢視哪些檔案正在匯入它們，以及它們的來源。某些條目還可以提供簡短描述和文件連結。
模組
模組標籤顯示您已安裝的所有模組，並提供其文件和原始碼連結。您可以在Nuxt 模組中找到更多可用模組。
最近我們引入了實驗性的升級功能，它允許您輕鬆升級 Nuxt 或模組。透過終端標籤，它透明地顯示升級過程的輸出。
資產
資產標籤顯示您的所有靜態資產及其資訊。您可以複製資產的路徑，或使用它們的程式碼片段。未來，透過整合Vercel 上使用 Nuxt Image，您甚至可以一鍵最佳化影像。
外掛
外掛標籤顯示您的應用程式中正在使用的所有外掛。由於外掛在應用程式掛載之前執行，因此每個外掛花費的時間應儘可能少，以避免阻止應用程式渲染。提供的每個外掛的時間成本有助於發現效能瓶頸。
鉤子
“鉤子”選項卡可以幫助您監控客戶端和伺服器端每個鉤子所花費的時間。您還可以檢視每個鉤子註冊了多少個監聽器，以及它們被呼叫了多少次。這有助於發現效能瓶頸。
應用程式配置
您可以在 DevTools 中檢查和修改應用程式配置，嘗試不同的配置並立即檢視效果。
Payload & Data
此標籤顯示由useState、useAsyncData和useFetch建立的狀態。這有助於理解資料是如何獲取的以及狀態是如何管理的，或者透過反應式地更改它們來檢視它們是否影響您的應用程式。對於useAsyncData和useFetch，您還可以手動觸發重新獲取。
終端
在某些整合中，可能需要執行子程序來完成特定任務。在 DevTools 之前，您要麼完全隱藏子程序的輸出併吞噬潛在的警告/錯誤，要麼將其管道輸出到標準輸出並用多個輸出來汙染您的終端。現在，您可以將每個程序的輸出隔離在 DevTools 中並清晰顯示。
虛擬檔案
“虛擬檔案”選項卡顯示 Nuxt 和 Nitro 為支援約定而生成的虛擬檔案。這對於高階除錯很有幫助。
檢查
檢查暴露了vite-plugin-inspect整合，允許您檢查 Vite 的轉換步驟。這有助於理解每個外掛如何轉換您的程式碼並發現潛在問題。
VS Code
多虧了VS Code Server，我們能夠將一個功能齊全的 VS Code 例項整合到 DevTools 中。您可以安裝擴充套件並同步您的設定。這使您可以在不離開瀏覽器的情況下更改程式碼並立即檢視結果，從而獲得更快的反饋迴圈。
模組貢獻檢視
考慮到生態系統，Nuxt DevTools 被設計成靈活和可擴充套件的。模組可以向 DevTools 貢獻自己的檢視，為其整合提供互動式資料和演練場。以下是一些示例：
VueUse 模組提供了一個搜尋頁面，用於查詢可用的可組合函式並檢視其文件。
UnoCSS 模組提供了一個互動式檢查器，用於檢視每個模組如何貢獻到最終的 CSS。
Nuxt Icon 模組提供了一個可搜尋所有可用圖示的搜尋引擎。
Nuxt Vitest 模組為與您的 Nuxt 應用程式使用相同管道執行的測試提供 Vitest UI。
對於模組作者
隨著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.
感謝您的閱讀，我們期待您的反饋和貢獻！