vue-devtoolsでVue.jsの開発環境構築

 vue-devtoolsのインストール

vuejs/vue-devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.

これでFirefoxでVueの解析ができます。

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

ここからFirefoxのアドオン版をインストールしました。

Vue Devtools で快適なデバッグ - ROXX(旧SCOUTER)開発者ブログ

いろいろな使い方が解説されています。

 ブラウザのVueのアイコンがでてきて、それをクリックすると表示しているページでVue.jsが使われているかどうかを教えてくれます。


Vue.jsが使われていたとしてもページの作成者で解析がブロックされているときもあります。

 解析できるページで右クリック ー＞ 要素を調査。


Vueボタンをクリックすると使用されているコンポーネント構造とそのプロパティなどが表示されます。

Open in editorボタンのエディタを指定する方法

選択したコンポーネントがApp.vueファイル以外のvueファイルにソースがあるときは右上にOpen in editorボタンが表示されます。

私の環境では予めVisual Studio Codeを起動しているときのみvueファイルがエディタで表示されました。

VUE CLI UI support VS Code as default editor · Issue #2982 · vuejs/vue-cli

これにエディタの指定方法が書いてありました。

EDITOR=code vue ui

環境変数EDITORにcodeを指定してvue uiを起動したときは予めVisual Studio Codeを起動sしておく必要はありませんでした。

EDITOR=kwrite vue ui

こうするとエディタをkwriteに変更することができました。

 毎回EDITORを設定せずにいいように~/.bashrcでエディタをkwriteに設定しました。

 export EDITOR=kwrite

vueファイル上のスクリプトにブレークポイントを張る

vue uiで起動したプロジェクトの場合デバッカーのソースファイルのWebpackのところでvueファイルが表示できて、そのscriptタグ内でブレークポイントが設定できます。

vue uiで作成されるHelloWorldプロジェクトではとくに何も設定しなくてもvueファイルが表示されました。

ライブ編集する

veu-cli-service serveで起動したときはとくに何も設定しなくてもエディタでvueファイルを変更して保存するとブラウザにその変更がすぐ反映されます。

エディタでvueファイルのシンタックスハイライトを有効にする方法

Visual Studio Code

拡張機能のVeturをインストールするとvueファイルのシンタックスハイライトが有効になりました。

Eclipse

Eclipse2020-06 for JavaScritp and Web Developersのインストール-p--qの通りです。

Wild Web developerプラグインが必要です。

kwrite

KDE/syntax-highlighting: Syntax highlighting Engine for Structured Text and Code.

このKate用のが流用できました。

mkdir -p  $HOME/.local/share/org.kde.syntax-highlighting/syntax

または

mkdir -p  $HOME/.local/share/katepart5/syntax

これで定義ファイルを入れるフォルダが作成されます。

mtorromeo/kate-syntax-files: Syntax files (modified or original) for katepart (kate, kwrite, kdevelop)

ここからvue.xmlをクリック。

Rawボタンを右クリック ー＞ 名前をつけてリンク先を保存。

これでvue.xmlファイルを先程作成したsyntaxフォルダに保存します。

これでkwriteでvueファイルのシンタックスハイライトができるようになりました。

GitKraken

内部エディタでvueファイルのシンタックスハイライトをしたいのですが、いまのところはできないようです。