mottox2 blog

Production modeでもVue.js Devtoolsを有効にする方法

tipsvuechrome

この記事を見た@mascii_kさんがもっといい方法を教えてくれました!
ブレークポイントなしで実行できるようになるので便利です。

【Vue.js】Vueコンストラクタ関数をWebコンソール上で見つける方法 - Qiita


今年のWWDCは熱かったですね!その中でもSwiftでReactのように宣言的にUIを記述できるSwiftUIの発表はこれからのiOSアプリに変革をもたらす存在だと思います。

そのSwiftUIのチュートリアルサイトがVue.jsで構築されているというツイートがタイムラインに現れました。それが、Vue.js Devtoolsが有効になっている写真と共にです!

自分がそのサイトを訪れてもVue.js Devtoolsが無効になっていたのですが、理由はこのツイートのリプライ欄にありました。

元ツイート

答え

つまり、`new Vue()`でVueのインスタンスを作成する前に`Vue.config.devtools = true`を実行すればVue.js Devtoolsで覗けるという話です。(devtoolsオプションはVue.js Devtoolsを有効にするオプションです。)

しかし、何らかのバンドラーによってnew Vue()という記述は別の変数名に置き換えられてしまいます。その変換結果が今回はn["a"]であることをツイートで説明しています。

本記事では、そういった要素の見つけ方からVue.js Devtoolsを有効にする方法を説明します。

今回はSwiftUIのTutorialを題材にします。
https://developer.apple.com/tutorials/swiftui/

手順

上記のようにバンドルツールでは、最終的なファイルサイズを小さくする為にminifyという処理をしています。
その最適化の中に多くの変数やモジュールの名前が書き換えられてしまいます。しかし、オブジェクトのメソッドやオプションは書き換えられません。(場合によりけりですが)

Vueの場合はconst vm = new Vue()の後にvm.$mount('#app')のようなメソッドが実行されることが多いので、このメソッド名で検索します。
検索にはChrome DevToolsのSearch Drawerを利用して、今回は$mount(で検索します。

スクリーンショット 2019-06-05 2.25.23.png (105.6 kB)

お目当てのファイルが見つかったらファイルをクリックします。すると、Sourceタブでクリックしたファイルが開かれます。
この際に、{}マーク(Pretty Print)を押すとコードが整形されて読みやすくなります。
この状態でCmd + Fで検索フィールドを開き、$mount(で検索しましょう。

スクリーンショット 2019-06-05 2.26.34.png (75.8 kB)

検索したところ、$mountをメソッドを持っている new n["a"]が非常にVueっぽさを感じさせてくれます。
行数部分(画像では781行目)をクリックしブレークポイントを挿入。ページをリロードしましょう。

スクリーンショット 2019-06-05 2.28.56.png (214.4 kB)

ページをリロードすると、表示前にブレークポイントで動作が停止するので、Consoleでn.a.config.devtools = trueを入力しましょう。入力したらF8キーを押し動作を再開します。
この状態でChrome DevToolsを開き直しましょう。Vue.js DevtoolsはChrome DevToolsを開いたタイミングで有効であれば表示されるようです。
Vueタブを押すとコンポーネントの構造が見れました。

スクリーンショット 2019-06-05 2.33.01.png (148.2 kB)

これを気にChrome拡張の動作にも興味を持ったので、いろいろ調べてみたいと思います。


[追記] アプリケーションによっては上記の方法では見れない場合があります。__VUE_DEVTOOLS_GLOBAL_HOOK__.Vueがnullになっている場合は、__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue == n.a のようにVueを代入すると動く場合もあります。Vueのコンストラクタを代入するみたいですね。

https://github.com/vuejs/vue-devtools/blob/c8b2e863cf1445ea065bc969f5561588ebded618/README.md#quick-start-in-chrome

B!
poem

欲しいものリスト(2020年版)

欲しいものはAmazonに売ってないので、独自にリストを作ることにしました。 - いい感じの動画を作るセンス 今年に入ってAfter Effectsを使ったアニメーションを作ったりしています。Tw

dev

jsx-presentationを使ってJSXでpptxファイルを生成する

週末にpptxファイルが生成できるスライド作成ツールのプロトタイプを作りました。 スライドエディタで作成したスライドをPowerPoint形式で出力できるようにした。 まだまだサイズやアスペクト

dev

Reactで寿司を回すタイピングゲームを作った

@dala00さんが企画している、1週間でテーマに沿ったWebサービスを作る #web1weekという企画に参加しました。今回は第二回の開催で「Like」というお題でした。 esaをより便利に使う

Copyright © 2019 @mottox2 All Rights Reserved.