やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > vue.js > Vue.js devtools をインストールするも使えなかった

Vue.js devtools をインストールするも使えなかった

vue.js JavaScript Tool

　Vue.jsのデバックをするChrome拡張機能である。CDNのVue.jsだと使えない。

情報源

インストールする

  1. Vue.js devtoolsにアクセスする
  2. Chromeに追加ボタンを押下する
  3. 拡張機能を追加ボタンを押下する

設定する

  1. Chromeのメニューを開く
  2. その他ツール→拡張機能を選ぶ
  3. Vue.js devtoolsの詳細ボタンを押下する
  4. シークレット モードでの実行を許可するにチェックする
  5. ファイルの URL へのアクセスを許可するにチェックする

使ってみる

  1. コードをつくる
  2. ブラウザで開く
  3. ブラウザのデベロッパツールを開く（Ctrl+Shift+I）
  4. Vueタブをクリックする
  5. Vueオブジェクトの中身が閲覧できる
  6. Vueオブジェクトの中身を編集するとブラウザに反映される

　という手はずだったが、Vueタブが表示されなかった……。

Vueタブが出ない

　以下の通りチェックしてみた。

  1. インストールされていること
  2. デベロッパツールを開いてからリロードする
  3. 開発モードにする（？）
  4. キャッシュを削除する
  5. Vue.jsライブラリ本体と実行コードを同一ファイルに入れていること

　はい5番目でアウト。別ファイルにしてます。どうやらNode.jsのwebpack等で1ファイルにして使うことを想定しているようだ。私はその環境構築がしたくないからCDNを使っている。別ファイルになっている。それで使えないって……クソすぎ。

コード

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="./vue.2.6.12.min.js"></script>
    <script src="./main.js"></script>
</head>
<body>
<div id="app">
    <p>{{text}}</p>
</div>
</body>
</html>

window.addEventListener('load', (event) => {
    Vue.config.devtools = true;
    new Vue({
        el:'#app',
        data(){
            return{
                text:"Hello Vue.js !!"
            };
        }
    })
});

所感

　役に立たない。ムダな時間を使わされた。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux