|
| 1 | +--- |
| 2 | +title: Vue Devtools 4.0 の新機能 |
| 3 | +date: 2018-01-16 |
| 4 | +--- |
| 5 | + |
| 6 | +このブログは[こちら](https://medium.com/the-vue-point/whats-new-in-vue-devtools-4-0-9361e75e05d0)の翻訳ブログです。 |
| 7 | + |
| 8 | +先日 Vue devtools の大きなアップデートがリリースされました。 |
| 9 | +新機能と改善点を掘り下げてみましょう！🎄 |
| 10 | + |
| 11 | +## コンポーネントデータが編集可能に |
| 12 | +コンポーネントのデータを直接コンポーネントインスペクター枠内で変更できるようになりました。 |
| 13 | + |
| 14 | +1. コンポーネントを選択します |
| 15 | +2. インスペクターの `data` セクションでフィールドにマウスを置きます |
| 16 | +3. 鉛筆アイコンをクリックします |
| 17 | +4. 完了アイコンのクリックまたは Enter キーの押下で変更を確定します。 Escape キーの押下で編集をキャンセルできます |
| 18 | + |
| 19 | +<iframe width="480" height="360" src="https://www.youtube.com/embed/xeBRtXLrQYA?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 20 | + |
| 21 | +フィールドの内容はシリアライズされた JSON 値です。例えば、文字列を入力したいならダブルクオート付きで `"hello"` と入力します。配列は `[1, 2, "bar"]` のように、オブジェクトは `{ "a": 1, "b": "foo" }` のように入力します。 |
| 22 | + |
| 23 | +現在、以下の型について値の編集が可能です： |
| 24 | + |
| 25 | +- `null` と `undefined` |
| 26 | +- `string` |
| 27 | +- リテラル定数： `Boolean`, `Number`, `Infinity`, `-Infinity`（訳注：負の無限大）及び `NaN` |
| 28 | +- 配列 |
| 29 | +- プレーンオブジェクト |
| 30 | + |
| 31 | +配列とプレーンオブジェクトは、専用のアイコンを使用して項目の追加と削除が可能です。またオブジェクトキーの名前を変更することもできます。 |
| 32 | + |
| 33 | +<iframe width="480" height="360" src="https://www.youtube.com/embed/fx1zjvHryJ0?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 34 | + |
| 35 | +入力が正しい JSON でない場合は警告が表示されます。ただし、`undefined` や `NaN` のような一部の値はよりよい利便性のため直接入力することができます。 |
| 36 | + |
| 37 | +今後のリリースではより多くの型がサポートされる予定です！ |
| 38 | + |
| 39 | +## クイック編集 |
| 40 | +いくつかの型の値は 'クイック編集' 機能を使用してワンクリックで編集することができます。 |
| 41 | + |
| 42 | +ブール値はチェックボックスアイコンで直接反転させることができます： |
| 43 | + |
| 44 | +<iframe width="480" height="360" src="https://www.youtube.com/embed/llNJapRZaHo?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 45 | + |
| 46 | +数値はプラスまたはマイナスアイコンで増減できます： |
| 47 | + |
| 48 | +<iframe width="480" height="360" src="https://www.youtube.com/embed/ZCToaOpId0w?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 49 | + |
| 50 | +いくつかの修飾キー（訳注： Shift/Ctrl/Alt のこと）を用い値を高速に増減させることができます。 |
| 51 | + |
| 52 | +## エディタでコンポーネントを開く |
| 53 | +プロジェクトで vue-loader または Nuxt を使用している場合、選択したコンポーネントを好みのコードエディタで開くことができます（単一ファイルコンポーネントの場合）。 |
| 54 | + |
| 55 | +1. この[設定ガイド](https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md)に従ってください（Nuxt を使用している場合は、何もする必要はありません） |
| 56 | +2. コンポーネントインスペクターで、コンポーネント名の上にマウスを置くと — ファイルパスが表示されたツールチップが表示されます |
| 57 | +3. コンポーネント名をクリックすることでエディタが開きます |
| 58 | + |
| 59 | +<iframe width="480" height="360" src="https://www.youtube.com/embed/XBKStgyhY18?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 60 | + |
| 61 | +## 元のコンポーネント名を表示 |
| 62 | +[manico](https://github.com/manico) による PR |
| 63 | + |
| 64 | +既定では、すべてのコンポーネント名は CamelCase にフォーマットされています。これはコンポーネントタブの 'Format component names' ボタンをトグルすることで無効にできます。この設定は記憶されイベントタブにも適用されます。 |
| 65 | + |
| 66 | +<iframe width="480" height="270" src="https://www.youtube.com/embed/PoZmEcCdSbU?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 67 | + |
| 68 | +## コンポーネントのインスペクトがより簡単に |
| 69 | +Vue devtools を開いている間は、コンポーネントを右クリックすることでインスペクト可能です： |
| 70 | + |
| 71 | + |
| 72 | +<figcaption style="font-size:smaller; text-align:center;">ページ内のコンポーネントを右クリック</figcaption> |
| 73 | + |
| 74 | +特殊メソッド `$inspect`を使用してコンポーネントをプログラムからインスペクトすることもできます： |
| 75 | + |
| 76 | +<script src="https://gist.github.com/Akryum/0187dbfd782d584eef46e85622685bac.js" charset="utf-8"></script> |
| 77 | +<figcaption style="font-size:smaller; text-align:center;">コンポーネントで `$inspect` メソッドを使う</figcaption> |
| 78 | + |
| 79 | +いずれの方法でも、コンポーネントツリーが新しく選択されたコンポーネントに自動展開されます。 |
| 80 | + |
| 81 | +## コンポーネント毎にイベントをフィルター |
| 82 | +[eigan](https://github.com/eigan) による PR |
| 83 | + |
| 84 | +イベントを発行したコンポーネントによってイベント履歴をフィルターできるようになりました。 `<` の後に続けてコンポーネント名またはその一部を入力してください。 |
| 85 | + |
| 86 | +<iframe width="480" height="270" src="https://www.youtube.com/embed/wytquoUPSFo?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 87 | + |
| 88 | +## Vuex インスペクターフィルター |
| 89 | +[bartlomieju](https://github.com/bartlomieju) による PR |
| 90 | + |
| 91 | +Vuex インスペクターにフィルター入力が付きました： |
| 92 | + |
| 93 | +<iframe width="480" height="270" src="https://www.youtube.com/embed/T095k5hI_pA?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 94 | + |
| 95 | +## 垂直レイアウト |
| 96 | +[crswll](https://github.com/crswll) による PR |
| 97 | + |
| 98 | +devtools の幅が十分でないときは、便利な垂直レイアウトに切り替わります。既定の水平モードの場合と同様、上下の枠の仕切りは移動することができます。 |
| 99 | + |
| 100 | +<iframe width="480" height="360" src="https://www.youtube.com/embed/33tJ_md8bX8?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 101 | + |
| 102 | +## コンポーネントへのスクロールの改善 |
| 103 | +既定では、コンポーネントを選択してもビューはスクロールされなくなりました。代わりに、新設の 'Scroll into view' アイコンをクリックする必要があります： |
| 104 | + |
| 105 | + |
| 106 | +<figcaption style="font-size:smaller; text-align:center;">目のアイコンをクリックしてコンポーネントにスクロール</figcaption> |
| 107 | + |
| 108 | +これでコンポーネントが画面中央に表示されます。 |
| 109 | + |
| 110 | +## インスペクターが折り畳み可能に |
| 111 | +異なるインスペクターのセクションを折り畳むことができます。修飾キーを使用することで全てを折り畳んだりワンクリックで全てを展開できます。これは例えば、 Vuex タブのミューテックスの詳細のみに興味がある場合には非常に便利です。 |
| 112 | + |
| 113 | +<iframe width="480" height="270" src="https://www.youtube.com/embed/bblGueKPsjE?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> |
| 114 | + |
| 115 | +## さらに！ |
| 116 | +- 環境にその機能がない場合 'Inspect DOM' ボタンが非表示になります - [michalsnik](https://github.com/michalsnik) により |
| 117 | +- `-Infinity` がサポートされました - [David-Desmaisons](https://github.com/David-Desmaisons) により |
| 118 | +- イベントフックにあった問題が修正されました - [maxushuang](https://github.com/maxushuang) により |
| 119 | +- コードのいくつかが綺麗になりました - [anteriovieira](https://github.com/anteriovieira) により |
| 120 | +- Date, RegExp, Component サポートが改善されました（これらの型では Time Travel が動作するはずです） |
| 121 | +- devtools は現在リッチなツールチップやポップオーバー用に [v-tooltip](https://github.com/Akryum/v-tooltip) を使用しています（いくつかの問題も修正されています） |
| 122 | + |
| 123 | +拡張機能が既に存在する場合は、自動的に 4.0.1 に更新されます。また [Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) や [Firefox](https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/) に新規インストールすることもできます。 |
| 124 | + |
| 125 | +**この大きなアップデートを可能にした全ての貢献者に感謝します！** |
| 126 | + |
| 127 | +もし問題を見つけたり新機能を提案する場合は、[それを共有](https://new-issue.vuejs.org/?repo=vuejs/vue-devtools)してください！ |
| 128 | + |
| 129 | +## 今後の予定は？ |
| 130 | +新しいリリースではページ内のコンポーネントの選択（カラーピッカー風）やいくつかの UI の改善などのさらに多くの機能が追加される予定です。 |
| 131 | + |
| 132 | +また（Chrome や Firefox だけでなく）あらゆる環境でのデバッグを可能にするスタンドアロンの Vue devtools アプリや、まったく新しいルーティングタブ、そして `Set` と `Map` 型の改善されたサポートなどのいくつかの機能があります。 |
| 133 | + |
| 134 | +乞うご期待！ |
0 commit comments