【Vue】ログの仕込み方・考え方

対象読者は?

  • Vueを使ったことがある人
  • 開発経験があって、バグ調査などをしたい人

何が書かれている?

  • Vueにログを仕込む方法
  • ログを仕込んでバグを調査する方法

経緯:vue内にログを仕込むとTypeErrorが発生

仕事で、Vueの動作を確認するためにvue内にログを仕込んだのですが上手くいかない。。。

わかりやすく現状を説明するために、コードを簡略化。
(h2だけを表示 + ログだけを出す)

test.vue

<template>
  <div>
    <h2>ログイン</h2>
    {{console.log(‘aaaa’)}} ←ここにログを仕込んだ
  </div>
</template>
<script>
  export default {
    methods: {
    }
  }
</script>

結果をコンソールログで確認すると、、

TypeError: Cannot read property ‘log’ of undefined

logなんてメソッド知らねーよって怒られました。。。orz

問題点:vue内にログが仕込めない?設定ファイル問題?

vue内にログが仕込めない様子。

Qiitaで検索すると、設定の問題との記載も。

[参考にしたQiitaの記事]

Vue.js で console.log はできないのか?

うーーん、、もっと手軽にログを仕込みたい。。

解決方法:js内でログを仕込む!

いい方法を見つけました!

vue内では、ログを仕込めないけど
js内では、ログは普通に仕込める!!

というわけで、vueのmethod内にログ専用のメソッドを新設してそこでログを仕込むようにしました

MyBroadcastReceiver

<template>
  <div>
    <h2>ログイン</h2>
    {{log(‘aaaa’)}} // ← 直接console.logを呼ばずにメソッドを経由させる
  </div>
</template>
<script>
  export default {
    methods: {
      log(info) { // ログ用に追加したメソッド
        console.log(info)
      }
    }
  }
</script>

間違ってGitにアップしないように注意が必要ですが
ちょっとした調査なんかにローカルでゴニョゴニョする分には手軽でやりやすい!
(毎回コードを追加する手間もありますが、、、)

ログもちゃんと取れること確認できましたb

これ使えば、Qiitaに書いてあるdefaultのところにもログ仕込めるんじゃないかな、試してないけど。

まとめ:vueのメソッドにログ仕込で、それをvue内で使う

  • vue内にログは仕込めないが、メソッドを経由させれば仕込める!

vueの調査をしている時に、うまく行かずに手間取ってしまいました。。
サーバーサイドと違ってフロントサイドは、ログが取りずらい。。。
(主に、サーバーサイド・アプリの開発が多かったので、単純に自分のフロントサイド経験が足りないだけって話もありますが。。。)

正直、正攻法のログの取り方ではないですが設定ファイルを弄ってプロジェクト全体に影響を与えたりするより手軽で確実な方法かと思います。

自分と同じ悩みを抱えている人の助けになれば幸いですm(_ _)m

いやーーー、ログ仕込めるようになる調査が捗りますねw

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です