ストックマーク株式会社でエンジニアをしている安藤です。

本記事は以前に開催していた社内勉強会にて使用していた教材 chibivue の著者であり、Vue.jsのコミッターでもある @ubugeeeiさんから教わったライブラリのデバッグをちょっとスマートに行うことができるようになるかもしれないTIPSをご紹介させていただきます。

Vue.jsのリアクティブオブジェクトをコンソールデバッグしてみる

解説のためにVue SFC Playgroundを用います。

画面を開くとVue.jsのSFCのソースコードがあります。内容は非常に簡素なリアクティブオブジェクトがひとつと、その値をv-modelとして紐づけしているinput要素があり、その実行結果が表示されています。

5行目にconsole.logを追加し、リアクティブオブジェクトを出力してみます

const msg = ref('Hello World!')
console.log(msg) // 追加

このようにした際、コンソールには以下の情報が出力されます。

RefImpl {dep: Dep, __v_isRef: true, __v_isShallow: false, _rawValue: 'Hello World!', _value: 'Hello World!'}
    dep: Dep
        activeLink: undefined
        computed: undefined
        key: undefined
        map: undefined
        sc: 1
        subs: Link {sub: ReactiveEffect, dep: Dep, version: 0, prevActiveLink: undefined, prevSub: undefined, …}
        subsHead: Link {sub: ReactiveEffect, dep: Dep, version: 0, prevActiveLink: undefined, prevSub: undefined, …}
        version: 0
        __v_skip: true
        [[Prototype]]: Object
    __v_isRef: true
    __v_isShallow: false
    _rawValue: "Hello World!"
    _value: "Hello World!"
    [[Prototype]]: Object

情報量が多いですね。リアクティブオブジェクトを構成しているための要素が出力されているためこのような情報が出てくるのですが、単にライブラリを利用しているだけの開発者としてはちょっと理解しづらい内容になっていると思います。

Chrome DevToolsのCustom Formatters機能を有効化する

前項のようにライブラリに関係するオブジェクトのデバッグ情報が見づらいよ〜というときに、役に立つ可能性がある機能としてChrome DevToolsにはCustom Formatters機能があります。なお、同様の機能はモダンブラウザではedge、Firefoxも対応しています。

DevToolsの右上の歯車マークをクリックします。

続いて、Consoleの項目にある Custom Formattersにチェックを入れます。

この状態になったら、先程のデバッグをもう一度行ってみます。すると以下のような内容がコンソールに表示されます。

Ref<"Hello World!">

開発者が本当に欲しかったもの！開発者が本当に欲しかったものじゃないか！！

実際のコンソールの表示では要素がこのように色分けされて表示されます。開発者に優しい！

そもそもCustom Formattersとは何か

Custom Formattersという機能自体はブラウザの開発者ツールのコンソールでJavaScriptオブジェクトの表示形式をカスタマイズできる機能です。どのようなことができるのかはこちらの記事を参考としてご覧いただければと思います。

www.mattzeunert.com

平たく表現すると、オブジェクトに対して任意の整形を施してデバッグを行えるようになります。具体的な実装や挙動はこちらの記事を参考としてご覧いただければと思います。

qiita.com

つまり、前段でなぜDevToolsのCustom Formattersを有効化するだけでデバッグ情報が見やすいものになったかというと、ライブラリが開発者体験を向上させるためにCustom Formetter実装してくれているから、ということになります。そのため、当然ですがライブラリ側がCustom Formatterに対応していないと特に何も起こりません。

もし好きなライブラリがCustom Formattersに対応されておらず、デバッグ情報がちょっと見づらいのであればDevToolsを開発したりライブラリ内にCustom Formatterを実装するなどコントリビューションを試みるには丁度いいトピックかもしれません。

事例としては imutable-devtools や ClosureScript用のcljs-devtools などが存在します。

Vue.jsでは packages/runtime-core/src/customFormatter.ts にてCustom Formatterが実装されています。内容に軽く目を通してみると、内容自体は割とシンプルで、Vueのどのようなオブジェクトに対してどのように整形が行われているかを確認することができ参考になる、と同時に「それがデバッグのとき見たかった部分です、ありがとうございます」という気持ちになることができますので、一度サラッとでも読んでみると良いかもしれません。

https://github.com/vuejs/core/blob/main/packages/runtime-core/src/customFormatter.ts

というわけで、Vue.jsで開発を行うときはChrome DevToolsのCustom Formatters機能をを有効にしておくと便利です。