我們很興奮地宣布 Nuxt DevTools v1.0 的發布！🎉
您可以升級到最新的 Nuxt 版本，並在瀏覽器中按下 Shift + Option + D (macOS) 或 Shift + Alt + D (Windows) 來開啟 DevTools。預設情況下，浮動面板會隱藏以減少干擾。您可以在 Nuxt DevTools 設定頁面中啟用它，或在您的設定中明確啟用它。
export default defineNuxtConfig({
devtools: {
enabled: true
}
})
我們建立 Nuxt DevTools 的原因
近年來，人們越來越關注開發者體驗 (DX)。工具和框架一直努力改進 DX。在此過程中，Nuxt 引入了許多創新的功能和慣例，使您的日常開發更加輕鬆高效。
例如，基於檔案的路徑、版面配置系統、外掛、路由中間件、composables 自動導入、基於檔案的伺服器 API、強大的模組系統等等。
Nuxt 能夠創建各種範圍的應用程式，從簡單的興趣專案到大型應用程式，從簡單的客戶端渲染單頁應用程式到在邊緣具有無伺服器功能的混合渲染網站等等。我們提供這些功能和慣例，使其更容易支援所有這些使用案例和情境。
問題
在擁有強大的框架的所有這些優勢中，我們必須做出一些權衡。有時，我們必須犧牲一些底層實作的透明度，以使事情更容易使用。
傳統的抽象化是轉移實作複雜性並使在建構時更容易專注的好方法。另一方面，它們也會增加使用者學習和理解底層運作的額外負擔。也會導致隱含性，例如自動導入的元件來自哪裡，或者有多少模組正在使用某個元件等等。這也會使除錯變得困難。
權衡是不可避免的。通常我們認為這些權衡是值得的，因為它們有助於組織用戶的程式碼庫，並使其在長期運行中更容易維護。同時，我們也希望透過提供一個工具來幫助您了解底層的運作方式並使學習曲線更平滑，從而彌補我們失去的透明度。
這就是 Nuxt DevTools 的用武之地！我們在 2023 年 2 月 首次推出它來試驗這個想法。經過幾個月的探索和開發，從社群令人驚訝的積極回饋來看，這個想法已被證明是有用的，我們決定將其作為您 Nuxt 開發體驗的核心部分。
功能
Nuxt DevTools 是一組視覺工具，可幫助您了解您的 Nuxt 應用程式並進一步改善開發者體驗。它的創建旨在提供 Nuxt 和您的應用程式之間更好的透明度，找到效能瓶頸並幫助您管理您的應用程式和設定。
應用程式內開發工具
從總體來看，Nuxt DevTools 是一個與您的應用程式並存的應用程式內開發工具。它會顯示為一個浮動面板，您可以點擊以開啟它。
我們認為這比傳統的瀏覽器擴充功能開發工具更好，因為它是
- 適用於所有瀏覽器，甚至是行動裝置！ - 瀏覽器擴充功能開發工具的功能受限於每個瀏覽器提供的 API，並且維護多個擴充功能也需要大量的精力。此方法可讓我們更專注於功能和特性，同時讓所有瀏覽器和裝置上的使用者都可以使用。
- 建構工具整合 - 傳統上，瀏覽器擴充功能開發工具只能存取應用程式的執行時上下文，而無法存取建構工具。讓 DevTools 隨 Nuxt 一起提供，使我們能夠與建構工具通信並提供更多的洞察力和功能。
- 避免版面配置偏移 - 將 DevTools 作為浮動面板可以避免在切換 DevTools 時的版面配置偏移。
頁面視圖
為了幫助改進基於檔案的路徑的隱含性，我們在 DevTools 中引入了「頁面視圖」。它列出了您的應用程式中已註冊的所有頁面，您可以在它們之間輕鬆測試和導航。
元件視圖
「元件」標籤顯示您在應用程式中使用的所有元件及其來源。您也可以搜尋它們並前往原始碼。
它還提供了顯示元件之間關係的圖形視圖。您可以篩選元件以查看特定元件的依賴關係。這有助於識別不必要的依賴關係，並提高頁面的效能和捆綁包大小。
Composables 視圖
「Composables」視圖顯示所有已註冊到 Nuxt 的自動導入 composables。您可以看到哪些檔案正在導入它們，以及它們的來源。某些條目還提供簡短的說明和文件連結。
模組管理
「模組」標籤顯示您的應用程式中已註冊的所有模組，並提供它們的文件和儲存庫連結。
我們還提供讓您搜尋和探索社群模組的功能。並一鍵安裝它們！
靜態資產管理
「資產」標籤顯示您的 public 目錄下的所有靜態資產。它支援預覽圖片、影片、字體、PDF 和其他檔案，您可以輕鬆複製 URL 或程式碼片段以在您的應用程式中使用。您也可以拖放檔案以直接從 Nuxt DevTools 上傳它們。
執行時配置編輯器
「執行時配置」標籤顯示您的應用程式的執行時配置，並提供一個互動式編輯器，供您使用不同的值。
酬載編輯器
與「執行時配置編輯器」類似，「酬載編輯器」可讓您編輯 composables (例如 useState 和 useFetch) 的酬載，以查看伺服器端渲染時從伺服器傳遞到用戶端的內容。
Open Graph 預覽
Open Graph 在社群媒體分享和 SEO 中扮演著重要角色。在傳統的工作流程中，我們通常需要先部署我們的應用程式，以檢查 Open Graph 在各種社群媒體平台上是否如預期運作。使用 Open Graph 預覽，您現在可以在 DevTools 中預覽 Open Graph，並透過即時回饋迴圈即時更新它。
我們還會協助您檢查應用程式中的 Open Graph 標籤，並提供改進建議。您可以複製產生的程式碼片段並將其貼到您的路由中，以便一次性修復它們。
外掛概覽
「外掛概覽」列出您的應用程式中註冊的所有 外掛。由於外掛是在您的應用程式渲染之前在執行時執行的，因此保持外掛的效能並避免阻止渲染非常重要。我們提供每個外掛的執行時間和所有外掛的總時間，以便您可以更好地識別潛在的效能瓶頸。
時間軸
「時間軸」是一個工具，可讓您檢查每個 composable 何時以及如何被呼叫。與瀏覽器 DevTools 的效能工具不同，此標籤僅檢查高階 composables 與其他事件（例如路由導航）的組合，這更接近日常使用。它還會記錄每次呼叫的參數和傳回值，以便您可以更好地了解底層的運作方式。
生產建構分析器
雖然 Nuxt DevTools 主要專注於提供開發工具，但有時我們可能想知道區塊在生產環境中是如何組成的。「建構分析器」可讓您啟動生產建構並隨時分析區塊和模組，並查看它們是如何捆綁的。您也可以在不同的分支上進行多次建構，以比較您的重構/變更如何影響捆綁包的大小等等。
伺服器 API 遊樂場
Nuxt 提供了一種非常方便的方式來使用 伺服器路由建立伺服器 API 函數。由於在 Nuxt 中我們擁有該資訊，因此我們能夠為您提供一個遊樂場來測試和偵錯您的伺服器 API 函數，類似於 Postman 之類的工具。我們會自動列出您的應用程式中可用的所有伺服器 API。而且我們會在 與您的應用程式相同的上下文 中執行這些函數，因此您不需要在外部工具中手動設定它們。一如既往，我們還為您提供了程式碼片段，供您複製並貼到您的應用程式中。
嵌入式全功能 VS Code
由於我們的 DevTools 方法的靈活性，我們可以利用現代網路的力量將全功能的 VS Code 嵌入到 DevTools 中。在該 VS Code 中，您可以登入您的帳戶並同步您的設定，並且所有擴充功能都像您正常的 VS Code 用戶端一樣運作。這可讓您快速編輯程式碼，而無需離開瀏覽器。
元件檢視器
「檢視器」可讓您檢查 DOM 樹並查看哪個元件正在渲染它。點擊以轉到您的編輯器以找到特定行。這使得進行變更變得更加容易，而無需徹底了解專案結構。
分割畫面
在最近的版本中，我們引入了分割畫面功能，可讓您並排開啟兩個標籤。
UI 自訂
在 DevTools 設定中，我們提供了一些選項，讓您可以自訂您想要看到的標籤以及 DevTools 的版面配置。
生態系統
在 Nuxt 中，我們非常重視生態系統。與 Nuxt 模組如何增強 Nuxt 核心類似，我們也將 Nuxt DevTools 設計為高度可擴展，允許模組提供額外的功能和整合。
社群模組
我們很自豪地看到社群已經開始為 Nuxt DevTools 建構模組。以下是其中一些
Vitest 模組提供 Vitest UI，用於使用與您的 Nuxt 應用程式相同的管道執行測試。使其更容易在您的應用程式旁邊除錯您的測試。
VueUse 模組提供可用的 composables 的搜尋頁面，並查看它們的文件。
SiteMap 模組提供一個互動式編輯器，讓您管理您的站點地圖。
TailwindCSS 模組提供 Tailwind 配置檢視器，供您根據您的配置檢查可用的內容。
UnoCSS 模組提供一個互動式檢視器，以查看每個模組如何影響最終的 CSS。
Storybook 模組為您的元件提供 Storybook UI。
它們只是其中的一小部分！我們期待看到更多模組加入 Nuxt DevTools！
受 Nuxt DevTools 啟發的專案
同時，我們也很榮幸看到其他框架開始建構受 Nuxt DevTools 啟發的自己的 DevTools
webfansplz/vite-plugin-vue-devtools- 一個 Nuxt DevTools 移植版，支援 Vite + Vue 3 應用程式的 DevTools。pheno-agency/vite-plugin-devtools- 針對 Vite 構建與框架無關的開發工具的實驗性專案。- Modern.js DevTools - Modern.js 的應用程式內開發工具。
- Qwik DevTools - Qwik 的開發工具。
我們正與這些專案的維護者密切合作，探討如何將開發工具的體驗提升到新的層次。
接下來的規劃
Nuxt DevTools 剛剛達到 v1.0 版本，但這並不意味著我們已經完成。我們仍然有很多東西想要探索和改進。以下是一些我們正在考慮的想法：
- Nuxt 無障礙整合 - 我們正在為 Nuxt 構建 a11y 整合 (#23255)。我們將在 Nuxt DevTools 中建立一個專用視圖，讓您可以互動式地檢查無障礙提示。
- Vue DevTools 整合 - 我們正與 Vue 團隊合作，將 Vue DevTools 的體驗帶到一個共享工具中，該工具適用於瀏覽器擴充功能和應用程式內的開發工具，例如
vite-plugin-vue-devtools和 Nuxt DevTools。 - 請告訴我們您的想法/建議！
未來展望
我們很高興看到 Nuxt DevTools 如何幫助您建構更好的應用程式並改善您的開發者體驗。展望未來，我們想像的不僅僅是 Nuxt DevTools 本身。我們相信，擁有此類特定於框架的開發工具是提供更好開發者體驗的未來趨勢。我們也看到這些工具的許多部分實際上可以跨工具共享和重複使用。因此，我們提出了 DevTools Kit 的概念。
DevTools Kit
DevTools Kit 是一個通用協議的想法，目前仍處於早期腦力激盪階段。我們認為，在理想情況下，DevTools 的每個功能都應該是可組合、可擴展和協作式的。Meta-frameworks 可以根據其特定需求建構自己的功能，而常見的與 Web 相關的工具可以在不同的框架之間共享和協作。
想像一下，我們可以將所有這些功能都作為獨立的套件。我們可以擁有與 Web 相關的通用工具，例如 SEO、無障礙、PWA、靜態資產等。然後是與低階建構工具相關的工具，例如 Vite 建構分析器、Vite Inspector 或 Webpack visualizer 等。最後，我們可以擁有框架和 Meta-framework 特定工具，例如 Vue 組件視圖或 Nuxt Server API Playground 等。
屆時，Vue DevTools 將是常見的 Web 功能和 Vue 特定功能的組合。而 Nuxt DevTools 本質上是上述功能的組合，繼承 Vue DevTools 的所有功能，並在其之上添加 Nuxt 特定功能。
甚至可以根據自己的喜好組合自己的 DevTools。
也就是說，我們仍在思考和討論 DevTools Kit 的細節。請隨時關注更多更新！
總結
我們希望您喜歡新的 Nuxt DevTools 體驗！我們期待看到它如何幫助您建構更好的應用程式並改善您的開發者體驗。如果您有任何想法或建議，請隨時在想法與建議討論區告訴我們。
感謝您的支持，祝您編碼愉快！🚀