@nuxt/devtools

Nuxtアプリケーションをよりよく理解するのに役立つビジュアルツール。

330万ダウンロード•3.2Kスター•v2.6.5

antfu

Nuxt DevTools

Nuxtの開発者体験を最大限に引き出します。
Nuxt DevToolsは、あなたのアプリをより深く理解するのに役立つ一連のビジュアルツールです。

👋 はじめに | 💡 アイデア＆提案 | 🗺️ プロジェクトロードマップ | 📚 ドキュメント

インストール

Nuxt DevTools v2は、Nuxt v3.15.0以上を必要とします。

Nuxt v3.8.0では、Nuxt DevToolsはデフォルトで有効になっています。アプリ内でShift + Alt / ⇧ Shift + ⌥ Option + Dを押すと開くことができます。

Nuxt DevToolsを明示的に有効または無効にするには、nuxt.configを更新します。

export default defineNuxtConfig({
  devtools: {
    enabled: true // or false to disable
  }
})

Nightly リリースチャンネル

NuxtのNightly Channelと同様に、DevToolsもナイトリーリリースチャンネルを提供しており、mainブランチへのコミットごとに自動的にリリースされます。

ナイトリーリリースチャンネルにオプトインするには、以下を実行します。

{
  "devDependencies": {
--    "@nuxt/devtools": "^0.1.0"
++    "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
  }
}

ロックファイル（package-lock.json、yarn.lock、またはpnpm-lock.yaml）を削除し、依存関係を再インストールします。

モジュールオプション

Nuxt DevToolsを設定するには、devtoolsオプションを渡すことができます。

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: {
    // Enable devtools (default: true)
    enabled: true,
    // VS Code Server options
    vscode: {},
    // ...other options
  }
})

利用可能なすべてのオプションについては、IDEのTSDocまたは型定義ファイルを参照してください。

機能

Nuxt DevToolsを構築した理由とできることについては、発表ブログ投稿🎊をお読みください！

Nuxt DevToolsは、一般的な使用状況に関する匿名のテレメトリーデータを収集します。これは、すべてのユーザーにおける機能の使用状況とカスタマイズを正確に測定するのに役立ちます。このデータにより、Nuxt DevToolsの各機能がどのように使用されているかをよりよく理解し、行われた改善（DXとパフォーマンス）とその関連性を測定することができます。また、私たちの努力を優先し、ユーザーにとって最も重要な機能に焦点を当てるのにも役立ちます。

Nuxt DevToolsのテレメトリーデータはNuxt Telemetryを通じてパイプされ、Nuxt DevToolsはローカルおよびグローバルのNuxt Telemetry設定を尊重します。Nuxt DevToolsの設定でNuxt DevToolsのテレメトリーをオプトアウトすることもできます。

収集するデータは完全に匿名であり、ソースを追跡することはできません（ハッシュ+シードを使用）。また、集計形式でのみ意味を持ちます。収集するデータには、個人を特定できる情報や追跡可能な情報は一切含まれていません。

イベント

デフォルトのNuxt Telemetryイベントに加えて、Nuxt DevToolsは以下のイベントも収集します。

Nuxt DevToolsのバージョン
タブ/機能間のナビゲーション
- これにより、どの機能が最も使用されているかを理解し、私たちの努力を優先することができます。
ブラウザとOSの名前とバージョン
- これにより、異なるブラウザとオペレーティングシステム間の互換性を向上させることができます。
いくつかの操作ボタンでのクリックイベント

ライセンス

MIT