他にも競合記事が多そうですが！
社内で JavaScript を書いている時に、どのようにデバッグしたら良いかという質問があり記事にしました！

以下、サンプルは Vue にて表示しているが、基本的に JS 系列ならすべて同じ。

【Console 画面】
「F12」や右上の「... > その他のツール > デベロッパーツール」画面にて
「Console」タブを選択した際に閲覧できる場所。
ブラウザのターミナル。

Show console drawer を ON にすると、いつでも友達になれて便利。

⭕ Console.log

一番有名なやつ
引数内の要素を Console 画面へ表示してくれます。

console.log('hello')

引数は、配列でもオブジェクトでも何でも入る。
また複数突っ込むこともできる。

const numArray = [1, 2, 3, 4, 5]
const map = new Map()
map.set('key', 'vaue')

console.log(numArray, map)

Console 画面では、▶ が表示され、折り畳みができる。死ぬほど便利。

たまに表示されないオブジェクトは、JSON化して表示すると良い。
この形式なら他へのコピーも簡単。

const numArray = [1, 2, 3, 4, 5]
console.log(JSON.stringify(numArray, null, 2))

※ちなみに、要素を右クリックすると表示されるメニューから、JSON取得ができたりもする。
適材適所。

親戚に console.dir というものがあり、オプションや隠された関数も含めて全部表示する機能があります。
でも chrome だとそこまで差が無いかも...
log で困った時に使ってみると良い。

const numArray = [1, 2, 3, 4, 5]

console.log(numArray)
console.dir(numArray)

他にも warn や info など、ログに使えそうな親戚が多いですが、こいつは必要！
実行された場所のスタックトレースが表示されます！
デバッグ時に、どこから呼ばれたかを確認するのに便利...

console.trace('test')

「console.log　CSS　装飾」

console.table

引数の要素をテーブルにして表示してくれるすごいやつ。
忘れられがちだが、俯瞰したいときにとても便利。

const users = [
  { id: 10, name: 'Aさん', age: 20 },
  { id: 20, name: 'Bさん', age: 33 },
  { id: 30, name: 'Cさん', age: 26 },
]

console.table(users)

テーブルのおまけに、下に console.log 時の表示もしてくれる。

なんと時間も測れます。
new Date().getTime() - date.getTime() とかやってませんか？？

引数の文字がタイマーを区別する文字になります。

console.time('a_timer')
setTimeout(() => {
  console.timeLog('a_timer')

  setTimeout(() => {
    console.timeEnd('a_timer')
  }, 1000)
}, 1000)

（setTimeoutはそんなに正確ではないのです！）

最後に！回数もカウントできるんですよ～。
ループ処理などで、何回通ったかを確認する際に良いと思います。

for (let i = 0; i < 10; i++) {
  console.count('a_count')
}
console.countReset('a_count')
console.count('a_count')

これはJSにおいて、ブレークポイントを追加するすごいやつです。
dev 画面を使い慣れている人だと、Source 画面で付与する人もいると思いますが、消し忘れたり以外と不便なんですよね...

この機能は、止めたい箇所に debugger と書くだけで機能します。

let test = ''

for (let i = 0; i < 5; i++) {
  debugger
  test += 'あ'
}

console.log(test)

▶ が次の debugger、ブレークポイントまで実行する。
→ が、次の一行を実行する、です。（ステップ実行）

基本的には怪しい箇所に debugger を書いて、ステップ実行して、変数の状態や処理の順番を確認します。

例えば上の例で、▶ を2回押すとこうなります。

ちゃんと変数の状態が分かるんですね...つよつよ機能なのでぜひお忘れなく！

他にも良い点があって、この debugger、「dev tools」を表示していない場合は無視されます。
消し忘れても安心！（ダメ）

とりあえず console.log と debugger が使えたら困りません！！！

Vue でデバッグするなら Vue.js devtools 一択。