はじめに

コード書き終わった！　リロード！

。。。。。

なんじゃこりゃ。

Vue.jsでフロントを開発している際にCromeブラウザ、Developper Toolの両方がエラーを起こして使えなくなってしまい、デバッグをしようにもできない状態になったのでその解決方法を手順に沿って共有しようと思います。

1.コミット履歴を遡りロールバックしてみる。　

まず、Gitを使用していることが前提になりますが、問題が起こったところの手前のコミット履歴からコードの差分を見てみましょう。

正常に動作していた時がコミット履歴から分かれば、原因の範囲を特定することができます。

細かい粒度でのコミットができていれば、ここでその原因が判明することもあります。

コミット履歴を参考に、ここ原因だと思われるメソッドなどをコメントアウトしてみましょう。　

原因であるところを引き当てた場合、DevelopperToolが動作します。

その原因に関連するコードをひたすらにconsole.logして原因箇所を絞り込んでいきましょう。

しっかりと値が渡されているか、意図していない動きがでていないか確認していきましょう。

この段階で原因箇所が特定できると思います。

私の場合はfor文による”無限ループ”が原因でした。

コミットの粒度や意義を考えずに適当にコミットしていたので、原因を特定するのにかなり時間がかかってしまいました。

適切な粒度でのコミットについて考えるいいきっかけになりました。