Nuxt.js 3.x Nuxt DevTools 提升開發者體驗

Nuxt3 ｜ 2023-10-27

為什麼需要 Nuxt DevTools？

Nuxt DevTools 是 Nuxt 團隊推出的視覺化開發工具，用來協助我們快速了解 Nuxt 專案的內容，近一步提升開發者體驗（DX，Developer Experience）。

關於開發者體驗（DX）介紹，這裡推薦一篇文章

Nuxt3 提供許多內建功能，例如：

預設使用 Vite 打包工具，支援 hot module replacement（HMR）
引入伺服器引擎 Nitro，讓我們可以將應用程式部署到 Vercel、Netlify、Cloudflare 等託管服務
許多內建功能，像是支援 TypeScript、各種組合式函式、SEO 搜尋引擎優化輔助函式等
auto-imports 自動引入功能
依據檔案結構自動生成路由與 API 路徑
提供許多模組，讓開發者可以快速整合所需的功能，不需另外進行配置

這些功能是 DX 最直接具體的實踐，雖然能讓我們能輕鬆建立 Nuxt3 專案，但也會面臨「資訊透明度不足」的問題。抽象化設計是一把雙面刃，在化繁為簡、避免重工的同時，也會增加額外的學習負擔與除錯困難。

Nuxt DevTools 便是為了解決此問題而設計的視覺化工具，能夠提升 Nuxt 框架和應用程式的透明度、找到效能瓶頸，以及協助我們管理應用和配置。

安裝 Nuxt DevTools

注意：Nuxt 版本需為 v3.1.0 以上

自動安裝

如果是透過 Nuxt CLI 安裝，預設會一起安裝與啟用 Nuxt DevTools

// nuxt.config.js
export default defineNuxtConfig({
  devtools: { enabled: true }
})

手動安裝

安裝 nuxt 整合模組 @nuxt/devtools

npm i -D @nuxt/devtools

接著在 nuxt.config 配置

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools'
  ]
})

要關閉 devtools，設定 enabled: false 即可，devtools 模組相關配置參考文件

Nuxt Devtools 導覽

安裝並啟用 devtools 後，可以在畫面底部看到一顆 icon，點擊後繼續點擊左側 icon 開啟工具面板

Overview

可以看到專案 Nuxt 與 Vue 版號，以及頁面、元件、數量、引入的函式、模組、插件數量，也可以直接透過畫面操作升級 Nuxt 版本

Pages

顯示頁面路徑與相關資訊。以下為例，當前頁面為 /about，layout 為 default，點擊其他路徑可以切換頁面

Components

顯示專案內使用的元件以及來源路徑，後面會標示該元件在本頁的使用次數（ex：x1），點擊路徑會自動在編輯器內開啟檔案

如果使用 VSCode 開發，點擊路徑不會自動開啟檔案，且終端機拋以下錯誤
Could not open TheHeader.vue in the editor.                                                                         6:04:57 PM
The editor process exited with an error: spawn code ENOENT.
在 VSCode 執行 install code command in Path 即可解決

點擊右側或是底部的錨點 icon，接著可以直接透過畫面檢查元件，點擊元件會自動在編輯器開啟檔案

元件分為四類：

User components：專案內自訂的元件
Runtime components：運行的時候使用的元件
Build-in components：內建元件，像是 <ClientOnly />
Components from libraries：第三方套件或是模組提供的元件，像是 <NuxtWelcome />

也可以透過右上角 Toggle View 按鈕來切換為圖形視圖，圖形視圖可以更清晰的顯示元件間的關聯與依賴

Imports

顯示專案內自動引入（auto-imports）的函式名稱與來源路徑。同 Components，後面會標示該函式在本頁的使用次數（ex：x1），點擊路徑會自動在編輯器內開啟檔案

自動引入函式分為三類：

User composables：專案內自訂的函式，像是 Composables 組合式函式或是 Utils 輔助函式
Build-in composables：Nuxt 內建函式，像是 useNuxtApp()、navigateTo()
Composables from libraries：第三方套件或是模組提供的函式，像是 @pinia/nuxt 模組的 defineStore()