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

[Vue.js入門 基礎から実践アプリケーション開発まで](https://gihyo.jp/book/2018/978-4-297-10091-9) で、VueRouterの勉強をしていたところ、なぜか値が画面に表示されないエラーが発生。
[Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)ではいまいち原因が特定できなかったので、標準でついてるChromeのデベロッパーツールでデバッグしてみた。

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

```js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SPA</title>
    </head>
    <body>
        <script src="https://unpkg.com/vue@2.5.17"></script>
        <script src="https://unpkg.com/vue-router@3.0.1"></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``を打ち込んでも、ずっと 「読み込み中...」　と表示されてしまう。

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

<img width="354" alt="スクリーンショット 2020-02-20 14.18.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/6b9baa08-4e5f-fb9d-d2d4-4ad54dd911a1.png">

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

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

<img width="1430" alt="スクリーンショット 2020-02-20 14.34.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/98cfb90a-d9c8-2f43-7453-add0dd8b29c7.png">

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

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

<img width="1436" alt="スクリーンショット 2020-02-20 14.41.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/9fa3f808-50e6-9a6e-3f9e-6cd8db1394a6.png">

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

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

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

フォームに値を埋める時とかはVue.js devtoolsの方が分かりやすいかも。
<img width="1423" alt="スクリーンショット 2020-02-20 15.55.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402245/b3fd8bd9-2b68-3d52-9497-fde06102e250.png">


[参考]
[ChromeのデベロッパーツールでJavaScriptをデバッグする方法（2019年版）](https://ics.media/entry/190517/)
[JavascriptのChromeでのデバッグ方法個人的まとめ2016](https://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3)