【javascript】デバック方法を✅
ゆるPF雑談会の心理的安全性の高さが心地よいのでまた開催して欲しいと考えている23期酒ケジュール作成中です。
ジョジョ立ち、ナポリピッザ、デスボイス、ウィスキー、母音。とりあえずteachable machineの有用性の高さに驚いています。
今回は、javascriptのデバック方法をチェックしていきたいと思います。
デバックとは
バグの箇所を突き止めるために行う行為。rubyでいうところのbinding.pry
Vueはライフサイクルフックを採用している関係上、どのタイミングでデータが読み込まれているのかによって期待する挙動を返さない事がある。
例えば以下のようなインスタンスを作成している場合、createdではundefinedになる一方で、mountedは<div id=”app”></div>を返す。
new Vue({
el: '#app',
data: {
},
created : function(){
console.log('created')
console.log(this.$el)
},
mounted : function(){
console.log('mounted')
console.log(this.$el)
}
})
createdの段階ではまだDOMが構築されていないため、this.$elにアクセスする事ができないから。
このように、エラーの場所を突き止める際に使う。
デバック方法
ブラウザ上のコンソールでデバックを行う方法と、ローカルで開発中のコードにdebuggerと追記してデバックをする方法の二通り存在する。
debuggerを使用する場合
調べたい関数の中にdebuggerを書き込む。
javascriptで繰り返し処理を行っている時。
実際に値を取り出すことができているのかな？と気になった時に使う。
真ん中にある再生ボタン的なものを押すと、for文が実行され、iが一つ増える。
変数に配列が入っていることが確認できる。
console.log
引数に入れた文字や変数を入れるとコンソールに表示される。
DBからデータをちゃんと取ってこれてるのか確認したい時に、下記のようにしてconsole.logの引数に入れる。
検証ツールのコンソール画面を見ると、this.authUser.dataに値が入っている事がわかる。
その他にもconsole系は用意されている
console.info
軽く指摘してくれる
メッセージタイプのログを出力でき、FirefoxとSafariの場合にはアイコンが付く。
ログレベルはChromeが「info」に、Firefoxが「情報」に、Safariが「ログ」にそれぞれ出力される。
console.warn
警告してくれる。
実際に使ってみる
コードに差し込む
実際に出力された結果
一言
エラーを突き止めるときに、「ここかな？」とピンポイントでdebuggerやconsole.logを差し込んで原因を究明できたら格好いいっすね〜〜
