はじめに

いままでほぼ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にはたくさん便利なものがあるので機会があれば試したい。