Vue 新一代開發者工具正式開源！

近日，Vue 新一代開發者工具（DevTools）正式開源！Vue DevTools 是一個旨在增強 Vue 開發人員體驗的工具，它提供了一些功能來幫助開發者更好地瞭解 Vue 應用。下面就來看看新一代 Vue DevTools 的功能和使用方法！

功能

首先來看看 Vue DevTools 中都有哪些功能！

Overview：顯示應用的概述，包括 Vue 版本、頁面數量和組件數量。

Pages：Pages 選項卡顯示當前的路由以及相關信息，並提供在頁面之間快速導航的方法，還可以使用文本框查看每個路由的匹配情況。

Components：Components 選項卡顯示組件信息，包括節點樹、狀態等，並提供一些交互功能，例如編輯狀態、滾動到組件等。

Assets：Assets 選項卡顯示項目目錄中的文件，可以查看所選文件的信息。

Timeline：Timeline 選項卡可以瀏覽狀態或事件的先前版本。

Router：Router 選項卡與 vue-router 集成，可以查看路由列表及其詳細信息。

Pinia：Pinia 選項卡與 Pinia 集成，可以查看存儲列表及其詳細信息，並編輯狀態。

Graph：Graph 選項卡顯示模塊之間的關係。

Settings：Settings 選項卡提供了一些用於自定義 DevTools 的選項。

Inspect：Inspect 與 vite-plugin-inspect 集成，可以檢查 Vite 的轉換步驟。

Inspector：Inspector 與 vite-plugin-vue-inspector 集成，可以檢查應用的 DOM 樹，並查看渲染它的組件，這樣可以更輕鬆地找到需要進行更改的位置。

獨立窗口：Vue DevTools 可以作爲一個獨立的窗口運行，當你想在小屏幕上調試應用時，它非常有幫助。

使用

在 Vue 項目中使用 Vue DevTools 的方法有多種：

Vite 插件
獨立應用
Chrome 擴展（目前還在開發中）

下面來看看如何通過 Vite 插件和獨立應用來使用 Vue DevTools。

注意：

DevTools 僅兼容 Vue 3。如果使用 Vue2，請改用 vue-devtools。

如果使用 Nuxt，請使用 nuxt-devtools 以獲得更強大的開發者體驗。

Vite 插件

第一種運行 Vue DevTools 的方法就是 Vite 插件。如果項目使用 Vite，強烈建議將其作爲運行 DevTools 的首選項，因爲它提供了更強大的功能。

注意：Vue DevTools 需要 Vite v3.1 或更高版本。

首先，通過以下命令來安裝 Vue DevTools：

npm add -D vite-plugin-vue-devtools

用法：

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevTools(),
  ],
})

配置項：

interface VitePluginVueDevToolsOptions {
  /**
   * append an import to the module id ending with `appendTo` instead of adding a script into body
   * useful for projects that do not use html file as an entry
   *
   * WARNING: only set this if you know exactly what it does.
   * @default ''
   */
  appendTo?: string | RegExp

  /**
   * Customize openInEditor host (e.g. http://localhost:3000)
   * @default false
   */
  openInEditorHost?: string | false

  /**
   * DevTools client host (e.g. http://localhost:3000)
   * useful for projects that use a reverse proxy
   * @default false
   */
  clientHost?: string | false
}

配置項如下：

appendTo：將一個導入附加到模塊 id 以 appendTo 結尾，而不是將腳本添加到 <body> 中。對於不使用 HTML 文件作爲入口的項目非常有用。注意，只有在確切瞭解其功能的情況下才設置此選項。默認值爲 ''。
openInEditorHost：自定義打開編輯器的主機（例如：http://localhost:3000）。默認值爲 false。
clientHost：DevTools 客戶端主機（例如：http://localhost:3000），對於使用反向代理的項目非常有用。默認值爲 false。

獨立應用

如果使用不受支持的瀏覽器，或者有其他特定需求（例如應用位於 Electron 中），可以使用獨立應用。

首先，通過以下命令來全局安裝 DevTools（可以全局安裝，也可以作爲項目依賴項安裝，這裏以全局安裝爲例）：

npm add -g @vue/devtools

安裝完成之後，在終端中運行以下命令：

vue-devtools

然後將以下代碼添加到應用 HTML 文件的<head>部分：

<script src="http://localhost:8098"></script>

或者，如果想遠程調試設備：

<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

可以在官方文檔查看詳情：https://devtools-next.vuejs.org/guide/standalone

查看

官網：https://devtools-next.vuejs.org/
Github：https://github.com/vuejs/devtools-next

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/KpzGUQwIeFm8iNhLU9uWig

功能

使用

Vite 插件

獨立應用

查看

猜你喜歡