Vue Devtools 4.0 の新機能

Jan 16, 2018

このブログはこちらの翻訳ブログです。

先日 Vue devtools の大きなアップデートがリリースされました。
新機能と改善点を掘り下げてみましょう!🎄

コンポーネントデータが編集可能に

コンポーネントのデータを直接コンポーネントインスペクター枠内で変更できるようになりました。

  1. コンポーネントを選択します
  2. インスペクターの data セクションでフィールドにマウスを置きます
  3. 鉛筆アイコンをクリックします
  4. 完了アイコンのクリックまたは Enter キーの押下で変更を確定します。 Escape キーの押下で編集をキャンセルできます

フィールドの内容はシリアライズされた JSON 値です。例えば、文字列を入力したいならダブルクオート付きで "hello" と入力します。配列は [1, 2, "bar"] のように、オブジェクトは { "a": 1, "b": "foo" } のように入力します。

現在、以下の型について値の編集が可能です:

配列とプレーンオブジェクトは、専用のアイコンを使用して項目の追加と削除が可能です。またオブジェクトキーの名前を変更することもできます。

入力が正しい JSON でない場合は警告が表示されます。ただし、undefinedNaN のような一部の値はよりよい利便性のため直接入力することができます。

今後のリリースではより多くの型がサポートされる予定です!

クイック編集

いくつかの型の値は ‘クイック編集’ 機能を使用してワンクリックで編集することができます。

ブール値はチェックボックスアイコンで直接反転させることができます:

数値はプラスまたはマイナスアイコンで増減できます:

いくつかの修飾キー(訳注: Shift/Ctrl/Alt のこと)を用い値を高速に増減させることができます。

エディタでコンポーネントを開く

プロジェクトで vue-loader または Nuxt を使用している場合、選択したコンポーネントを好みのコードエディタで開くことができます(単一ファイルコンポーネントの場合)。

  1. この設定ガイドに従ってください(Nuxt を使用している場合は、何もする必要はありません)
  2. コンポーネントインスペクターで、コンポーネント名の上にマウスを置くと — ファイルパスが表示されたツールチップが表示されます
  3. コンポーネント名をクリックすることでエディタが開きます

元のコンポーネント名を表示

manico による PR

既定では、すべてのコンポーネント名は CamelCase にフォーマットされています。これはコンポーネントタブの ‘Format component names’ ボタンをトグルすることで無効にできます。この設定は記憶されイベントタブにも適用されます。

コンポーネントのインスペクトがより簡単に

Vue devtools を開いている間は、コンポーネントを右クリックすることでインスペクト可能です:

ページ内のコンポーネントを右クリック

特殊メソッド $inspectを使用してコンポーネントをプログラムからインスペクトすることもできます:

コンポーネントで $inspect メソッドを使う

いずれの方法でも、コンポーネントツリーが新しく選択されたコンポーネントに自動展開されます。

コンポーネント毎にイベントをフィルター

eigan による PR

イベントを発行したコンポーネントによってイベント履歴をフィルターできるようになりました。 < の後に続けてコンポーネント名またはその一部を入力してください。

Vuex インスペクターフィルター

bartlomieju による PR

Vuex インスペクターにフィルター入力が付きました:

垂直レイアウト

crswll による PR

devtools の幅が十分でないときは、便利な垂直レイアウトに切り替わります。既定の水平モードの場合と同様、上下の枠の仕切りは移動することができます。

コンポーネントへのスクロールの改善

既定では、コンポーネントを選択してもビューはスクロールされなくなりました。代わりに、新設の ‘Scroll into view’ アイコンをクリックする必要があります:

目のアイコンをクリックしてコンポーネントにスクロール

これでコンポーネントが画面中央に表示されます。

インスペクターが折り畳み可能に

異なるインスペクターのセクションを折り畳むことができます。修飾キーを使用することで全てを折り畳んだりワンクリックで全てを展開できます。これは例えば、 Vuex タブのミューテックスの詳細のみに興味がある場合には非常に便利です。

さらに!

拡張機能が既に存在する場合は、自動的に 4.0.1 に更新されます。また ChromeFirefox に新規インストールすることもできます。

この大きなアップデートを可能にした全ての貢献者に感謝します!

もし問題を見つけたり新機能を提案する場合は、それを共有してください!

今後の予定は?

新しいリリースではページ内のコンポーネントの選択(カラーピッカー風)やいくつかの UI の改善などのさらに多くの機能が追加される予定です。

また(Chrome や Firefox だけでなく)あらゆる環境でのデバッグを可能にするスタンドアロンの Vue devtools アプリや、まったく新しいルーティングタブ、そして SetMap 型の改善されたサポートなどのいくつかの機能があります。

乞うご期待!