DAY 20 - Nuxt Devtools 超好用的開發者工具

現在無倫是哪個框架都有專屬於自己的 Devtools ，像是 Recat 有 React Developer Tools、Vue 有 Vue.js devtools、Angular 有 Angular DevTools，可以看到開發者工具基本上是必備的工具，在框架中因為我們會拆分元件、頁面等等...，有時候難以辨別元件跟引入的 Data ，這時候有個好用的開發者工具，來幫助你更直覺的辨識。

Nuxt Devtools 你可以說是 Vue.js devtools 的高級版

可以看到他功能上更齊全，包含 page 、components、imports、modules、plugins、composables，連套件都有支援，而且是內建的!! 無須再額外安裝，不想使用也可以關閉，增加你的開發者體驗，讓開發效率飛起來。

開箱即用

安裝 NO !! ，免安裝開箱即用

Nuxt Devtools 在我們使用 Nuxt3 建立環境時預設就會幫你安裝，預設也會幫你開啟，如果你的專案沒有看到他，可以去 Nuxt.config輸入設定開啟他

export default defineNuxtConfig({
  devtools: { enabled: false }, //改為 true 
})

• NuxtDevTools 官方文件
  可以看到官方這邊也有一些文件教學，如果想知道詳細每個功能詳細用法可以參考官方，接下來會帶大家看看比較常用的幾個功能。

如何使用

開啟 Devtools 後， 啟動 dev 運行 localhost

//在 package.json 可以看到指令
npm run dev

運行後可以看到 localhost 上，最下方多了一個 Nuxt icon 點擊就可以打開使用 Devtools

Devtools 介面
一進來會看到專案資訊，左側會看到工具列，Devtools主頁則會看到專案資訊，在這邊我們可以看到所有的元件、插件、路由等統整的資訊。

常用的功能選項 info、page/route、components、modules、plugins 等等，例如查看路由，因為 Nuxt 採用自動引入(Auto Imports)，雖然很方便但是有時候會不曉得路徑，我們就會需要開發者工具協助，就可以點選左側 page/route 來查看使用。

選取工具

點選選取工具

選取區域，會提示是哪種類型，像是下方是 layout 區塊

自訂顯示選項

開啟自訂

也可以到 Nuxt 設定，自訂想使用的功能，

這邊我先只留下我目前有需要的幾個，其他的我都關閉，然後調整成喜歡的UI樣式

是不是很棒呢 ! 快來試看看吧 !