mottox2 blog

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

tipschromevue

今年の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!
event

技術書典7で『Slack App開発レシピ』を頒布します

技術書典7で『Slack App開発レシピ』という技術同人誌を頒布します。(サークルページ) この本は、技術書同人誌博覧会で頒布した『Slack App開発ガイド』の続編になります。 開発ガイド

tip

Node.jsでファイルを直接実行した際にしか動かない処理を書く

Node.jsで他のファイルから呼び出すためのファイルを書いた時に、その関数をいい感じに実行したいと思ったことはないだろうか?具体的にはテストから呼び出すほどでもない用途でnode index.jsを

event

フロントエンドNightで『JSXでつくるDSL』というLTをしてきた

gifteeさんのオフィスで開催された『フロントエンド Night #1』というイベントでLT枠を頂き『JSXでつくるDSL』というLTをしてきました。 > 話したこと話したこと JSXから

lt