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

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

---

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

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

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

元ツイート

.@Apple is using @vuejs pic.twitter.com/RGZ6TIWjMj

— Rahul Kadyan (@znck0) June 3, 2019

答え

Add debugger before new Vue() then set Vue.config.devtools = true and continue!

You have to find new Vue() in minimised code. Here search for `new n["a"]`.

— Rahul Kadyan (@znck0) June 3, 2019

つまり、`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(で検索します。

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

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

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

これを気に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