我們很高興地宣佈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 引入了許多創新功能和約定，使您的日常開發更輕鬆、更高效。
例如，基於檔案的路由、佈局系統、外掛、路由中介軟體、可組合項自動匯入、基於檔案的伺服器 API、強大的模組系統等等。
Nuxt 能夠建立各種應用，從簡單的業餘專案到大型應用，從簡單的客戶端渲染單頁應用到具有邊緣無伺服器功能的混合渲染站點等。我們提供這些功能和約定，使其更容易支援所有這些用例和場景。
問題
擁有一個強大的框架帶來了所有這些好處，但我們也不得不做出一些權衡。有時，為了使其更易於使用，我們不得不犧牲底層實現的一些透明度。
傳統的抽象是很好的東西，可以轉移實現的複雜性，讓構建時更容易集中注意力。另一方面，它們也可能給使用者帶來額外的負擔，讓他們學習和理解底層發生的事情。這還會導致隱晦性，例如自動匯入的元件來自哪裡，或者有多少模組正在使用某個元件等。它還會使除錯變得困難。
權衡是不可避免的。通常我們認為這些權衡是值得的，因為它們有助於組織使用者的程式碼庫，並使其在長期內更容易維護。同時，我們也希望透過提供一個工具來幫助您瞭解底層發生的事情，並使學習曲線更平滑，從而彌補我們失去的透明度。
這就是 Nuxt DevTools 的用武之地！我們於 2023 年 2 月首次推出它，以嘗試這個想法。經過幾個月的探索和開發，社群給予了令人驚喜的積極反饋，這個想法已被證明是有用的，我們決定將其作為您 Nuxt 開發體驗的核心部分。
功能
Nuxt DevTools是一套視覺化工具，旨在幫助您理解 Nuxt 應用並進一步改善開發者體驗。它的建立是為了在 Nuxt 和您的應用之間提供更好的透明度，查詢效能瓶頸，並幫助您管理應用和配置。
應用內 DevTools
從概述來看，Nuxt DevTools 是一個與您的應用並存的應用內 DevTools。它將顯示為一個浮動面板，您可以單擊開啟。
我們認為這比傳統的瀏覽器擴充套件 DevTools 更好，因為它：
- 適用於所有瀏覽器，甚至在移動裝置上！ - 瀏覽器擴充套件 DevTools 的功能受限於每個瀏覽器提供的 API，而且維護多個擴充套件需要大量精力。這種方法將使我們能夠更專注於功能，同時讓所有瀏覽器和裝置上的使用者都能使用它。
- 構建工具整合 - 傳統上，瀏覽器擴充套件 DevTools 只能訪問您應用的執行時上下文，而無法訪問構建工具。將 DevTools 與 Nuxt 一起提供，使我們能夠與構建工具通訊，並提供更多的洞察和功能。
- 避免佈局偏移 - 將 DevTools 作為浮動面板將避免在切換 DevTools 時發生佈局偏移。
頁面檢視
為了幫助改善基於檔案路由的隱晦性，我們在 DevTools 中引入了頁面檢視。它列出了您應用中所有已註冊的頁面，您可以輕鬆地測試並在它們之間導航。
元件檢視
“元件”選項卡顯示您應用中使用的所有元件及其來源。您還可以搜尋它們並跳轉到原始碼。
它還提供了一個圖表檢視，顯示元件之間的關係。您可以過濾元件以檢視特定元件的依賴項。這有助於識別意外的依賴項，並提高頁面的效能和捆綁包大小。
可組合項檢視
可組合項檢視顯示所有已註冊到 Nuxt 的自動匯入可組合項。您可以檢視哪些檔案正在匯入它們，以及它們來自哪裡。某些條目還可以提供簡短描述和文件連結。
模組管理
“模組”選項卡顯示您應用中所有已註冊的模組，並提供其文件和儲存庫的連結。
我們還提供了一鍵搜尋和探索社群模組的功能！
靜態資源管理
“資產”選項卡顯示您 public 目錄下的所有靜態資源。它支援預覽圖片、影片、字型、PDF 和其他檔案，您可以輕鬆複製 URL 或程式碼片段以在您的應用中使用。您也可以拖放檔案，直接從 Nuxt DevTools 上傳它們。
執行時配置編輯器
“執行時配置”選項卡顯示您應用的執行時配置，並提供一個互動式編輯器，供您嘗試不同的值。
Payload 編輯器
與執行時配置編輯器類似，Payload 編輯器允許您編輯來自諸如 useState 和 useFetch 等可組合項的 payload，以檢視在伺服器端渲染時從伺服器傳遞到客戶端的內容。
開放圖譜預覽
開放圖譜在社交媒體分享中扮演著重要角色，也是搜尋引擎最佳化。在傳統工作流程中，我們通常需要先部署應用，然後才能檢查開放圖譜是否在各種社交媒體平臺上按預期工作。透過開放圖譜預覽，您現在可以在 DevTools 中預覽開放圖譜，並透過即時反饋迴圈即時更新它。
我們還會幫助您檢查應用中的開放圖譜標籤，並提供改進建議。您可以複製生成的程式碼片段並貼上到您的路由中，一次性修復它們。
外掛概覽
外掛概覽列出了您應用中註冊的所有外掛。由於外掛在您的應用渲染之前在執行時執行，因此保持外掛的效能並避免阻塞渲染非常重要。我們提供每個外掛的執行時間以及所有外掛的總時間，以便您更好地識別潛在的效能瓶頸。
時間軸
時間軸是用於檢查每個可組合項何時以及如何被呼叫的工具。與瀏覽器 DevTools 的效能工具不同，此選項卡僅檢查高階可組合項與路由導航等其他事件的結合，這更接近日常使用。它還記錄每次呼叫的引數和返回值，以便您更好地理解底層發生的情況。
生產構建分析器
雖然 Nuxt DevTools 主要專注於提供開發工具，但有時我們可能想知道生產環境中 chunk 是如何組成的。構建分析器允許您隨時啟動生產構建並分析 chunk 和模組，檢視它們是如何打包的。您還可以在不同的分支上進行多次構建，以比較您的重構/更改如何影響包大小等。
伺服器 API 偵錯程式
Nuxt 透過伺服器路由提供了一種非常方便的方式來建立伺服器 API 函式。由於 Nuxt 中有這些資訊，我們能夠為您提供一個除錯伺服器 API 函式的偵錯程式，類似於 Postman 等工具。我們自動列出您應用中所有可用的伺服器 API。我們會在您應用的相同上下文中執行這些函式，因此您無需在外部工具中手動設定它們。一如既往，我們還提供了可供您複製並貼上到應用中的程式碼片段。
嵌入式全功能 VS Code
得益於我們 DevTools 方法的靈活性，我們可以利用現代 Web 的強大功能，將一個全功能的 VS Code 直接嵌入到 DevTools 中。在該 VS Code 中，您可以登入您的賬戶並同步您的設定，所有擴充套件都像您的普通 VS Code 客戶端一樣工作。這使您無需離開瀏覽器即可快速編輯程式碼。
元件檢查器
檢查器允許您檢查 DOM 樹並檢視是哪個元件正在渲染它。點選即可跳轉到您的編輯器中相應的行。這使得在不徹底瞭解專案結構的情況下進行更改變得更加容易。
分屏
在最近的版本中，我們引入了分屏功能，允許您並排開啟兩個選項卡。
UI 自定義
在 DevTools 設定中，我們提供了幾個選項，供您自定義要檢視的選項卡和 DevTools 的佈局。
生態系統
在 Nuxt 中，我們非常重視生態系統。與 Nuxt 模組增強 Nuxt 核心的方式類似，我們也設計了 Nuxt DevTools，使其具有高度可擴充套件性，允許模組提供額外的功能和整合。
社群模組
我們很自豪地看到社群已經開始為 Nuxt DevTools 構建模組。以下是其中一些：
Vitest 模組為您的 Nuxt 應用提供與您的 Nuxt 應用相同管道執行的測試的 Vitest UI。使您更容易在應用旁邊除錯測試。
VueUse 模組提供了一個搜尋頁面，用於查詢可用的可組合項並檢視其文件。
SiteMap 模組提供了一個互動式編輯器，用於管理您的站點地圖。
TailwindCSS 模組提供 Tailwind Config Viewer，供您根據配置檢查可用內容。
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 框架無關的 DevTools。- Modern.js DevTools- Modern.js 的應用內 DevTools
- Qwik DevTools- Qwik 的 DevTools
我們正在與這些專案的維護者密切合作，探討如何將 DevTools 體驗提升到新的水平。
接下來
Nuxt DevTools 剛剛達到 v1.0 版本，但這並不意味著我們已經完成。我們還有很多東西需要探索和改進。以下是我們正在考慮的一些想法：
- Nuxt 輔助功能整合 - 我們正在為 Nuxt 構建輔助功能整合 (#23255)。我們將在 Nuxt DevTools 中構建一個專用檢視，供您互動式地檢查輔助功能提示。
- Vue DevTools 整合 - 我們正在與 Vue 團隊合作，將 Vue DevTools 體驗帶入一個共享工具，該工具適用於瀏覽器擴充套件和應用內 DevTools，例如
vite-plugin-vue-devtools和 Nuxt DevTools。 - 請告訴我們您的想法/建議！
未來
我們很高興看到 Nuxt DevTools 如何幫助您構建更好的應用程式並改善您的開發人員體驗。展望未來，我們正在構想比 Nuxt DevTools 本身更大的東西。我們相信，擁有這種特定於框架的 DevTools 是提供更好開發人員體驗的未來之路。我們還看到，此類工具的許多部分實際上可以跨工具共享和重用。我們提出了 DevTools Kit 的想法。
DevTools Kit
DevTools Kit 是一個仍處於早期頭腦風暴階段的通用協議構想。我們設想在最好的世界中，DevTools 的每個功能都應該可組合、可擴充套件和可協作。元框架可以為自己的特定需求構建自己的功能，而常見的 Web 相關工具可以在不同框架之間共享和協作。
想象一下，我們可以將所有這些功能，每個都作為一個獨立的包。我們可以擁有通用的 Web 相關工具，如 SEO、輔助功能、PWA、靜態資源等。然後是低階構建工具相關的，如 Vite 構建分析器、Vite 檢查器或 Webpack 視覺化工具等。最後，我們可以擁有特定於框架和元框架的工具，如 Vue 元件檢視或 Nuxt 伺服器 API 偵錯程式等。
屆時，Vue DevTools 將是通用 Web 功能和 Vue 特定功能的組合。而 Nuxt DevTools 本質上將是上述功能的組合，繼承 Vue DevTools 的所有功能，並在其之上新增 Nuxt 特定功能。
甚至可以根據您的喜好組合您自己的 DevTools。
儘管如此，我們仍在思考和討論 DevTools Kit 的細節。敬請關注更多更新！
結論
我們希望您喜歡全新的 Nuxt DevTools 體驗！我們期待看到它如何幫助您構建更好的應用並改善您的開發者體驗。如果您有任何想法或建議，請隨時在想法與建議討論中告訴我們。
感謝您的支援，祝您編碼愉快！🚀