はじめに
いままでほぼconsole.logしか使わなかったので、JSの中にブレイクポイントを仕込んで変数の中やDOMの状況を確認していたけど、console.traceが便利だった。
console.traceの公式mdnドキュメントはこちら
https://developer.mozilla.org/ja/docs/Web/API/console/trace_static
console.traceって？
mdnによると、console.traceはスタックトレースができるconsole機能のひとつ。
console.trace() メソッドは、ウェブコンソールにスタックトレースを出力します。
ということらしい。
スタックトレースは「実行中のコンピュータプログラムにエラーが発生した際に、直前に実行していた関数やメソッドなどの履歴を表示すること」で、コードの中にconsole.traceを仕込んでおくと、そこまでに実行した関数を履歴として表示してくれる。
使い方
wordという文字列の変数の中身を書き換える関数をそれぞれ用意してconsole.traceを試す。
const word = "hoge";
const func1 = (word) => {
word = word;
console.trace(word);
}
const func2 = () => {
func1("fuga");
console.trace(word);
}
func2();
これをブラウザのコンソールで見ると。
console.traceを入れた2箇所でそれまで実行された関数が表示される！
console.logをたくさん入れなくても履歴が辿れるので便利！
他にもconsoleにはたくさん便利なものがあるので機会があれば試したい。