Vue.js で data や computed の値の一覧を埋め込んでデバッグを楽にする方法

実機テスト中で Vue-Devtools が使えない環境だったり、他の人が作ったVueコンポーネントの構造がどうなっているのか、わけがわからないという状況だったり、たんに開発環境ではHTML自体に埋めておいてすぐに確認したいという場合は、次のタグをさくっとコピペするとデバッグがとても楽になります。

slim または pug 形式になっています。

template(v-if="true")
  table(border=1)
    caption
      | Props
    tr(v-for="(value, key) in $props")
      th(v-text="key")
      td(v-text="value")

  table(border=1)
    caption
      | Variables
    tr(v-for="(value, key) in $data")
      th(v-text="key")
      td(v-text="value")

  table(border=1)
    caption
      | Computed
    tr(v-for="(e, key) in _computedWatchers")
      th(v-text="key")
      td(v-text="e.value")

表示はこんな感じですがもっともっとカオスな状況で効果があります。

See the Pen Vue.js variables simple display by Akira Ikeda (@akicho8) on CodePen.