JavaScriptの値をリアルタイムに監視する
目のマークをクリック、監視したい対象を記述する。
Next.jsのpropsなどもこのように指定することで見れる。
minifyされたJSファイルを見やすくする
巷でいうpritty printは「{}」と表示された箇所をクリック
ブレークポイント
| ブレークポイントの設定できるもの | 説明 |
|---|---|
| Line-of-code | On an exact region of code. |
| DOM | On the code that changes or removes a specific DOM node, or its children. |
| XHR | When an XHR URL contains a string pattern. |
| Event listener | On the code that runs after an event, such as click, is fired. |
| Exception | On the line of code that is throwing a caught or uncaught exception. |
| Function | Whenever a specific function is called. |
詳しくはここを見てくれ
DOMを右クリックして「BreakOn」から設定したり、Sourceタブの右側からXHR(Fetch)をリクエスト先を指定して設定したりできる。
console
Node.jsで使うことの方が多いが、一応紹介
console.dir
HTML Elementを見るときなどにconsole.logだと出力してくれない情報などがあって便利
const obj = getElementById('hoge')
console.dir(obj)
console.time
実行時間を調べたいとき
console.time();
for (var i = 0; i < 100000; i++) {
let square = i ** 2;
}
console.timeEnd();
その他一言
performanceタブ
ボトルネックになっている箇所を調べるときに。パフォーマンス改善したいならとりあえず見るとこ。
networkタブ
APIとのやりとりを見ようね。
飽きた。