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の情報が閲覧できるようになる。