【Vue.js】Chromeのデベロッパーツールでデバッグする方法

15499 ワード
デバッグ Vue.js デバッグ テキストリンク

Vue.js入門 基礎から実践アプリケーション開発まで で、VueRouterの勉強をしていたところ、なぜか値が画面に表示されないエラーが発生。
Vue.js devtoolsではいまいち原因が特定できなかったので、標準でついてるChromeのデベロッパーツールでデバッグしてみた。

問題のコードはこちら(トップページ、ユーザー一覧ページの実装は省略)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SPA</title>
    </head>
    <body>
        <script src="https://unpkg.com/[email protected]"></script>
        <script src="https://unpkg.com/[email protected]"></script>

　　　　　<div id="app">
        <router-view></router-view>
　　　　　</div>

        <script type="text/x-template" id="user-detail">
            <div>
                <div class="loading" v-if="loading">読み込み中...</div>
                <div v-if="error" class="error">
                    {{ error }}
                </div>
                <div v-if="user">
                    <h2>{{ user.name }}</h2>
                    <p>{{ user.description }}</p>
                </div>
            </div>
        </script>

        <script>

            var userData = [
                {
                    id: 1,
                    name: 'hoge',
                    description: 'hogehogehogehoe'
                },
                {
                    id: 2,
                    name: 'wafu',
                    description: 'wafuwafuwafuawefu'
                }
            ]

            var getUser = function (userId, callback) { //userIdを使う
                setTimeout(function(){
                    //与えられた callback 関数を配列の各要素に対して一度ずつ呼び出し、callback が true と評価される値を返したすべての要素からなる新しい配列を生成
                    var filteredUsers = userData.filter(function(user){ 
                        return user.id === userId; //検証
                    })
                    callback(null, filteredUsers && filteredUsers[0]) //callbackの発動を定義
                }, 1000)
            }

            var UserDetail = {
                template: '#user-detail',
                data: function(){
                    return{
                        loading: false,
                        user: null,
                        error: null
                    }
                },
                created: function(){
                    this.fetchData()
                },
                watch: {
                    '$route': 'fetchData'
                },
                methods: {
                    fetchData: function(){
                        this.loading = true
                        getUser(this.$route.params.userId, (function(err, user){ //callbackで渡す
                            this.loading = false
                            if(err){
                                this.err = err.toString
                            }else{
                                this.user = user
                            }
                        }).bind(this))
                    }
                }
            }


            var router = new VueRouter({
                routes: [
                    {
                        path: '/users/:userId',
                        component: UserDetail
                    }
                ]
            })

            var app = new Vue({
                router: router
            }).$mount('#app')
        </script>
    </body>
</html>

http://127.0.0.1:5500/index.html#/users/1を打ち込んでも、ずっと 「読み込み中...」　と表示されてしまう。

では、早速デバッグしていこう。

cdnを使って、htmlファイル1枚でかいている。
それをそのままchromeに置いてもうまくデバッグできなかったので、Vscodeの右下にあるGo Liveで開く。

開けたら、検証=>Sourcesでファイルを選び、行数を選択してブレークポイントを定める。
今回は、getUser関数に問題がありそうなのでその呼び出しのところにブレークポイントを置いた。

ブレークポイントを置いた後、http://127.0.0.1:5500/index.html#/users/1にアクセスすると、処理が止まる。

そして、変数の部分、今回はthis.$routeの部分にマウスを当てると、変数が保持している値が一目瞭然となる。

this.$route.params.userId が文字列の "1" であることが分かり、return user.id === userId;の処理がうまくいっていないことが判明。

return user.id === Number(userId); とし、無事にエラー解消。

Chromeのデベロッパーツール意外と便利!!!

フォームに値を埋める時とかはVue.js devtoolsの方が分かりやすいかも。

[参考]
ChromeのデベロッパーツールでJavaScriptをデバッグする方法（2019年版）
JavascriptのChromeでのデバッグ方法個人的まとめ2016