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を使っている事を想定)
@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の情報が閲覧できるようになる。
Author And Source
この問題について(ChromeにVue.js devtoolsを導入する), 我々は、より多くの情報をここで見つけました https://qiita.com/uehatsu/items/cb41841d75f8c1a36a80著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .