Vue の新世代の開発者ツールは正式にオープンソースです。

最近、Vue の新世代の開発者ツール (DevTools) が正式にオープンソースになりました。Vue DevTools は、Vue 開発者のエクスペリエンスを向上させるために設計されたツールで、開発者が Vue アプリケーションをよりよく理解するのに役立ついくつかの機能を提供します。新世代の Vue DevTools の機能と使い方を見てみましょう。

関数

まずは、Vue DevTools で利用できる機能を見てみましょう。

概要: Vue のバージョン、ページ数、コンポーネントの数など、アプリケーションの概要を表示します。

ページ: [ページ] タブには、現在のルートと関連情報が表示され、ページ間をすばやく移動する方法が提供されます。テキストボックスを使用して各ルートの一致を表示することもできます。

コンポーネント: [コンポーネント] タブには、ノードツリー、ステータスなどを含むコンポーネント情報が表示され、ステータスの編集、コンポーネントへのスクロールなどのいくつかの対話型機能が提供されます。

アセット: [アセット] タブにはプロジェクトディレクトリ内のファイルが表示され、選択したファイルに関する情報を表示できます。

タイムライン: [タイムライン] タブでは、ステータスまたはイベントの以前のバージョンを参照できます。

Router : [Router] タブは vue-router と統合されており、ルートリストとその詳細を表示できます。

Pinia : Pinia タブは Pinia と統合されており、ストレージリストとその詳細を表示し、ステータスを編集します。

グラフ: 「グラフ」タブには、モジュール間の関係が表示されます。

設定: [設定] タブには、DevTools をカスタマイズするためのオプションがいくつかあります。

Inspect : Inspect は vite-plugin-inspect と統合されており、Vite の変換ステップを検査できます。

Inspector : vite-plugin-vue-inspector と統合された 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 にインポートを追加します。HTML ファイルをエントリポイントとして使用しないプロジェクトに非常に便利です。このオプションは、その機能が正確にわかっている場合にのみ設定してください。デフォルト値はです。appendTo<body>''
openInEditorHost: エディターが開かれるホストをカスタマイズします (例: http://localhost:3000)。デフォルト値はです false。
clientHost:DevTools クライアントホスト (例: http://localhost:3000)。リバースプロキシを使用するプロジェクトに役立ちます。デフォルト値はです false。

スタンドアロンアプリケーション

サポートされていないブラウザを使用している場合、または他の特定のニーズがある場合 (アプリが Electron にある場合など)、スタンドアロンアプリを使用できます。

まず、次のコマンドを使用して DevTools をグローバルにインストールします (グローバルにインストールすることも、プロジェクトの依存関係としてインストールすることもできます。ここでは例としてグローバルインストールを取り上げます)。

npm add -g @vue/devtools

インストールが完了したら、ターミナルで次のコマンドを実行します。

vue-devtools

<head>次に、 HTML ファイルが適用されるセクションに次のコードを追加します。

<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