プログラミング“ど”素人の私にJavaScriptデバッグ方法をご伝授ください…!!

JavaScriptが動かないときのデバッグ方法を調べています。
およそ共通する方法としては下記の3つかと思います。
1.ブラウザのデベロッパーツール→コンソールを見る
2.console.logでログを出力
3.ブレイクポイントを設定

基本の基本がわかっていないため、1〜3の点と点が正しく関連付けて理解できてない、「これを調べるため」「これを解決するため」と理解して実行するのではなく、「こうするもんだ」と書いてあったからとりあえずやっている、という状態です。

1.コンソール
→問題が起きている箇所（行番号）と、エラーコードはわかる。
　しかし、実際にどこをどう直したら解決するかまでに至らないときがある。
→またはコンソール上には何のエラーコードもでないが、とにかくうんともすんとも動かない時がある。

2.console.log
→そもそも何を呼び出すために行うのかがわからない。
　コンソールのエラーにでた行にある関数、変数などを記入して、その中身を読みだすのでしょうか？

3.ブレイクポイント
→ブレイクポイントを設定し、実行してみたものの、いろんな参照先を行ったり来たりしているのを見ていても、どこに問題があるのかよくわからない。
　問題がある場所で止まって、エラー表示などが出るのでしょうか？

また、上記の3つの方法は順番に実行すべきなのでしょうか。1で解決でなければ2、2で解決できなければ3、など。
あるいはそれぞれの目的が異なり、別個に行うのでしょうか。それすらもわからない状態です…