JavaScript
Chrome
firefox
デバッグ
Vue.js

本番公開されているサイトで Vue devtools を使う裏技


概要(Vue.js devtools とは)

Vue.js devtools は Vue.js のデバッグに用いられるブラウザ拡張です。

非常に便利ですが、デバッグツールなのでプロダクション環境では無効化されるようになっています。

gdgd.png

本記事では、WEB上で本番公開されているサイトで Vue.js devtools を有効化する方法を解説します。


検証環境

ブラウザ:Google Chrome74


有効化の手順

以下ではVue Cliのドキュメントページを対象として手順を説明します。


1. devtoolsの設定をしているコードを見つける

devtoolsの有効化・無効化の設定をしているJSファイルを探していきます。

まず Chrome のディベロッパーツール の Sources タブを開きます。

無題.png

目的のJSファイルの場所はサイトによって異なりますが、今回はassetsというそれっぽいディレクトリがあるので、開いてみます。

fdafadf.png

assets > jsとディレクトリを辿ると、「appなんちゃら.js」みたいなメイン処理っぽいファイルがあるので開いてみます。

そのままだと読みづらいので、画像の右下らへんにある{}マークをクリックしてコードを整形しましょう。

そしてファイル内で「devtools」という文字列を検索します。

文字列は複数見つかるかもしれませんが、以下のようにdevtoolsというプロパティを持つオブジェクトの宣言をしている部分が目的のコードです。

dev.png

サイトごとにコードの位置やオブジェクト名などは変わりますが、見つけるのはそう難しくないと思います。

このコードを書き換えることでdevtoolsを有効化します。


2. devtools の値を書き換える

上のコードをみると、Nというオブジェクトのdevtoolsプロパティの値が!1、すなわちfalseになっています。

これをtrueにすれば devtools が有効化されそうです。

そのためNが宣言されたすぐ後の箇所にブレークポイントを設けて、ページをリロードしましょう。

するとNが宣言されたタイミングで処理がストップするので、コンソールから値を書き換えられます。

N.devtools = trueとコンソールに打ちましょう。

N.png

処理を再開してVue.js devtools のアイコンをクリックすると、

aaaaaaaaaaa.png

メッセージが変化し、devtools が有効化されました!

ただしこのままだと開発者ツールにまだ Vue タブが出てきていないので、ツールを一旦閉じてまた開きなおしましょう。

開きなおすことで Vue タブが出てくるので、無事 Vue.js devtools を開くことができます。

fws.png

これにより本番サイトの data や store を確認したり編集したりすることが可能になりました。

以上です。