Nuxt DevTools v1.0 · Nuxt 部落格

我們很高興宣布 Nuxt DevTools v1.0 正式發布！🎉

自此版本起，Nuxt DevTools 在 Nuxt v3.8 及更新版本中預設啟用。所有 Nuxt 專案皆可使用！

您可以升級到最新的 Nuxt 版本開始使用，並在瀏覽器中按下 Shift + Option + D (macOS) 或 Shift + Alt + D (Windows) 開啟 DevTools。預設情況下，浮動面板是隱藏的，以減少干擾。您可以在 Nuxt DevTools 設定頁面中啟用它，或在您的設定中明確啟用它

nuxt.config.ts

export default defineNuxtConfig({
  devtools: {
    enabled: true
  }
})

我們建構 Nuxt DevTools 的原因

近年來，人們越來越關注開發者體驗 (DX)。工具和框架一直在努力改進 DX。在此過程中，Nuxt 引入了許多創新功能和慣例，讓您的日常開發更輕鬆、更有效率。

例如，基於檔案的路徑設定、版面配置系統、外掛程式、路由中介層、組合式函式自動匯入、基於檔案的伺服器 API、強大的模組系統以及更多。

List of Nuxt features that enhance developer experience

Nuxt 能夠創建各種範圍的應用程式，從簡單的業餘專案到大型應用程式，從簡單的用戶端渲染單頁應用程式到具有邊緣無伺服器功能的混合渲染網站等等。我們提供這些功能和慣例，以便更輕鬆地支援所有這些用例和情境。

問題

在擁有強大框架的所有這些優點中，我們必須做出一些權衡。有時，我們必須犧牲一些底層實作的透明度，以使事情更容易使用。

"Transparency" as the trade offs of having "Conventions", "Abstractions", "Sensible Defaults" and "Normalizations"

傳統的抽象化是轉移實作複雜性並使人們在建構時更容易集中注意力的好方法。另一方面，它們也可能增加使用者學習和理解底層運作原理的額外負擔。也會導致隱含性，例如自動匯入的組件來自哪裡，或者有多少模組正在使用某個組件等等。這也可能使除錯變得困難。

權衡是不可避免的。一般來說，我們相信這些權衡是值得的，因為它們將有助於組織使用者的程式碼庫，並使其在長期內更易於維護。同時，我們也希望透過提供工具來幫助您了解底層的運作原理並使學習曲線更平滑，以此補償我們失去的透明度。

這就是 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 上傳它們。

執行階段設定編輯器

執行階段設定標籤頁顯示您應用程式的執行階段設定，並提供互動式編輯器供您試用不同的值。

酬載編輯器

與執行階段設定編輯器類似，酬載編輯器允許您編輯來自組合式函式的酬載，例如 useState 和 useFetch，以查看從伺服器端渲染傳遞到用戶端的內容。

Open Graph 預覽

Open Graph 在社群媒體分享以及 SEO 中扮演著重要的角色。在傳統的工作流程中，我們通常需要先部署我們的應用程式，以檢查 Open Graph 在各種社群媒體平台上是否按預期運作。透過 Open Graph 預覽，您現在可以在 DevTools 中預覽 Open Graph，並透過即時回饋迴圈即時更新它。

我們還幫助您檢查應用程式中的 Open Graph 標籤，並提供改進建議。您可以複製產生的程式碼片段並將其貼到您的路由中以一次性修復它們。

外掛程式總覽

外掛程式總覽列出了在您的應用程式中註冊的所有外掛程式。由於外掛程式在您的應用程式渲染之前在執行階段執行，因此保持外掛程式效能良好並避免阻礙渲染非常重要。我們提供每個外掛程式的執行時間和所有外掛程式的總時間，以便您可以更好地識別潛在的效能瓶頸。

時間軸

時間軸是一個工具，供您檢查每個組合式函式何時以及如何被呼叫。與瀏覽器 DevTools 的效能工具不同，此標籤頁僅檢查高階組合式函式與其他事件（如路由導航）的結合，這更接近日常使用。它還記錄每次呼叫的參數和傳回值，以便您可以更好地了解底層的運作原理。

截至 2023 年 11 月，時間軸仍然是一個實驗性功能，需要手動選擇加入。

生產版本建置分析器

雖然 Nuxt DevTools 主要專注於提供開發工具，但有時我們可能想知道區塊如何在生產環境中組合。建置分析器允許您啟動生產版本建置並隨時分析區塊和模組，並查看它們是如何捆綁的。您還可以在不同的分支上執行多次建置，以比較您的重構/變更如何影響捆綁包大小等等。

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 模組為使用與您的 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 建構 a11y 整合 (#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 的每個功能都應該是可組合、可擴展和協作的。Meta-framework 可以根據其特定需求建構自己的功能，而常見的網路相關工具可以在不同框架之間共享和協作。

DevTools Kit

想像一下，我們可以擁有所有這些功能，每個功能都是一個獨立的套件。我們可以擁有通用的網路相關工具，例如 SEO、無障礙功能、PWA、靜態資源等。然後是低階建構工具相關的，例如 Vite 建置分析器、Vite 檢查器或 Webpack 可視化工具等。最後，我們可以擁有框架和 meta-framework 特定的工具，例如 Vue 組件檢視或 Nuxt 伺服器 API 遊樂場等。

Nuxt DevTools