次の記事は、フロントエンドパワーバンクの著者 CUGGZ によるものです。
最近、Vue の新世代の開発者ツール (DevTools) が正式にオープンソースになりました。Vue DevTools は、Vue 開発者のエクスペリエンスを向上させるために設計されたツールで、開発者が Vue アプリケーションをよりよく理解するのに役立ついくつかの機能を提供します。新世代の Vue DevTools の機能と使い方を見てみましょう。
公式ウェブサイト:https://devtools-next.vuejs.org/
関数
まず、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