ChromeにVue.js devtoolsを導入する


Chromeエクステンションのインストール

デバッグ方法

Vue.jsを導入しているページにアクセス

ChromeのURLバーの右に出るVue.jsのアイコンをクリックして「Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.」と出る場合はproduction版(minified版)のvue.jsを利用している場合が多い。minified版を使わないか、以下のようにする。(ここではLaravelのBladeを使っている事を想定)

vue_js_devtools_test.blade.php
        @if( App::environment(['local', 'staging']) )
        Vue.config.devtools = true;
        @endif

        var vm = new Vue({
            省略
        });

このようにすると、開発環境とステージングの場合のみVue.js devtoolsが利用出来るようになる(minified版でも)。
再度ChromeのURLバーの右のVue.jsのアイコンをクリックして「Vue.js is detected on this page. Open DevTools and look for the Vue panel.」と出れば成功。

Chrome Developer Toolsを開く

Chrome Developer Toolsを開くと、"Vue"タブが出ている。そこを開くとリアルタイムでVue.jsの情報が閲覧できるようになる。