HTML DOMのconsole.trace()メソッドとは？使い方とスタックトレースの表示方法を解説

console.trace()メソッドとは

HTML DOMのconsole.trace()メソッドは、そのメソッドが呼び出された時点までのスタックトレース（stack trace）をコンソールに表示するためのメソッドです。主に、コードがどのような経路をたどって現在の地点に到達したのか、つまり「コードパス」を確認するために使用されます。

デバッグ作業において、関数の呼び出し階層を把握したい場合に非常に便利なツールです。

構文

console.trace()メソッドの構文は以下のとおりです。

console.trace(label);

ここでlabelは省略可能な文字列型のパラメータで、トレースにラベルを指定します。複数のコード断片に対して複数のトレースを出力する場合に、どのトレースがどのコードに対応しているかを識別しやすくなります。

サンプルコード

それでは、console.trace()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1> console.trace() メソッド</h1>
<p>下のボタンをクリックしてください…</p>
<button onclick="Function1()">Start Trace</button>
<script>
    function Function1(){
        Function2();
    }
    function Function2(){
        console.trace();
    }
</script>
<p>上のボタンをクリックした後、コンソールタブでスタックトレースを確認できます</p>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

「Start Trace」ボタンをクリックし、開発者ツールのコンソールタブで出力を確認します。

コードの解説

上記の例では、以下のような処理が行われています。

まず、「Start Trace」というボタンを作成しました。このボタンは、ユーザーがクリックするとFunction1()を実行します。

<button onclick="Function1()">Start Trace</button>

Function1()はFunction2()を呼び出し、Function2()は内部にあるconsole.trace()メソッドを実行します。

スタックトレースはLIFO（Last-In First-Out：後入れ先出し）の順序に従います。console.trace()メソッドはFunction2()から呼び出されたため、最初にポップ（取り出され）されるのはFunction2()です。

次に、Function1()がFunction2()を実行したので、2番目にポップされるのはFunction1()です。最後に、Function1()は「Start Trace」ボタンのクリックによって実行されたため、最後にポップされます。

つまり、スタックトレースには呼び出された順序と逆の順序で関数が表示されることになります。

<button onclick="Function1()">Start Trace</button>
function Function1(){
    Function2();
}
function Function2(){
    console.trace();
}

まとめ

console.trace()メソッドを使うことで、関数の呼び出し経路を簡単に可視化できます。特に規模の大きなアプリケーションをデバッグする際に、どの関数からどの関数が呼び出されたのかを素早く把握できるため、開発効率の向上に大きく役立ちます。オプションのlabelパラメータを活用すれば、複数のトレース出力も整理して管理できます。