vue-devtools の使い方 [Vue.js]

vue-devtools

参考：

vuejs/vue-devtools: Browser devtools extension for debugging Vue.js applications – GitHub

vue-devtools – npm

導入

参考：

Devtools の導入方法と機能まとめ。Vue.js を用いた開発を効率化させよう！- Qiita

Vue.js で開発するときは vue-devtools もね | 株式会社ビヨンド

Speed up development with Vue DevTools | Vue Mastery

使い方

参考：

Using Vue DevTools | NativeScript-Vue (nativescript-vue.org)

DevTools Tutorial | Flavio Copes

Using the Vue.js Devtools | Alligator.io

Vue.js Remote Devtools Review | End Point (endpoint.com)

機能

参考：

Vue Devtools 4.0 の新機能 | Vue.js [公式]

CSP の設定

スタンドアローンの vue-devtools を使う場合、connect-src として http://localhost:8098 及び ws://localhost:8098 を許可する必要がある。

参考：

CSP unsafe-inline required to use? · Issue #616 · vuejs/vue-devtools – GitHub

vue-remote-devtools

参考：

vue-devtools/README.md at master · vuejs/vue-devtools – GitHub

How to enable Vue devtools in production mode for chrome extensions? – Stack Overflow

launch-editor / launch-editor-middleware

参考：

vue-devtools/open-in-editor.md at dev · vuejs/vue-devtools – GitHub

Supported editors – yyx990803/launch-editor: Open file in editor from Node.js – GitHub

Tips

参考：

devtools が表示されない時のチェックポイント | nocorica