GPTより引用
開発者ツールは「HTML/CSS確認ツール」や「console.logを見る場所」だと思われがちですが、実際はIDEに近いデバッグ環境です。
あなたの今の使い方は初級〜中級レベルで、そこからさらに効率化するなら特に Sourcesタブ（デバッガ） を覚えるのがおすすめです。
- JavaScriptデバッグの本命「ブレークポイント」
例えば
function calcPrice(price, tax) {
const result = price * tax;
return result;
}
const total = calcPrice(100, 1.1);
この
const result = price * tax;
の行にブレークポイントを置くと、
実行がその行で停止します。
停止した状態で、
price = 100
tax = 1.1
result = 未計算
が見られます。
つまり
console.log(price);
console.log(tax);
console.log(result);
を大量に書く必要がなくなります。
2. ブレークポイントの置き方
Chromeなら
F12
↓
Sources
↓
対象jsファイル
↓
行番号クリック
赤い丸が付きます。
その状態で処理を実行すると停止します。
3. 停止中に変数を見る
停止すると右側に
Scope
があります。
ここに
let userName = "Taro";
let age = 20;
があれば
userName: "Taro"
age: 20
と表示されます。
Laravelで言う
dd($userName);
dd($age);
を毎回書く必要がありません。
4. Hoverで中身を見る
停止中に
price * tax
にマウスを乗せると
110
が出ます。
変数だけでなく式の結果も見られます。
5. Watch機能
よく見る変数を登録できます。
例えば
cartItems
をWatchに登録。
すると処理を1行ずつ進めるたびに
cartItems.length
などがリアルタイム更新されます。
大きな配列の追跡で便利です。
6. 1行ずつ実行する
停止後に
Step Over
(F10)
を押すと
let a = 1;
let b = 2;
let c = a + b;
↓
let b = 2;
↓
let c = a + b;
という感じで進みます。
これが非常に強力です。
7. 関数の中に入る
const result = calcPrice(100, 1.1);
で停止したとき
Step Into
(F11)
を押すと
function calcPrice(price, tax)
の中へ入れます。
Laravelでいうと
$this->service->save();
の中へ飛び込む感覚です。
8. console.logより便利なconsole.table
配列なら
console.table(users);
で
id name
1 Taro
2 Hanako
みたいに表形式になります。
かなり見やすいです。
9. DOM要素確認
今も使っていると思いますが
console.log(element);
したDOMは
Elementsタブで選択できます。
逆にElementsで選択した要素は
$0
で取得できます。
例えば
$0.className
$0.id
$0.parentElement
などが実行できます。
10. Event Listener確認
地味に便利。
Elements
↓
対象要素選択
↓
Event Listeners
↓
click
blur
change
などが見られます。
特に
addEventListener()
を大量に使う場合、
「このボタンに本当にイベント付いてる？」
を確認できます。
11. Networkタブ
Laravel開発ならかなり重要です。
Ajax通信をしたとき
fetch(...)
↓
Network
↓
対象通信
↓
Request URL
Request Body
Response
Status Code
が全部見られます。
例えば
422
ならバリデーションエラー。
500
ならサーバーエラー。
さらに
{
"errors": {
"name": ["必須です"]
}
}
みたいなLaravelのレスポンスも見られます。
Ajax開発では必須級です。
Laravel・JavaScript学習中のあなた向けに優先順位を付けるなら
ブレークポイント
Scope（変数確認）
Step Over / Step Into
Networkタブ
Watch
Event Listeners
この順番がおすすめです。
特に一度ブレークポイントを覚えると、
console.log("ここ");
console.log("ここ2");
console.log(data);
console.log(data2);
を大量に書いて消して……という作業が激減します。
Laravelの dd() を多用している人ほど、「JavaScriptのデバッガ便利すぎる」と感じるはずです。