【TypeScript/JavaScript】関数が呼び出された位置（ファイル名、行）を取得する

TypeScriptやJavaScriptで関数が呼び出された位置（ファイル名、行）を取得したい！

概要

今回の記事では、TypeScriptやJavaScriptで関数が呼び出された位置（ファイル名、行）を取得する手順を掲載する。

仕様書

環境

typescript 5.2.2

手順書

デバッグ時にのみconsole.logを実行したい場合があって

export const debugPrint = (...args: any[]) => {
    if (process.env.NODE_ENV === 'development') {
        console.log(...args);
    }
};

export const test = () => {
    debugPrint("nya-n!");
};

こんな感じの関数を作ると開発者ツールのConsoleのconsole.logが呼ばれた位置の情報がdebugPrintのconsole.logの位置になる。当たり前なんですが。

debugPrintが呼ばれた位置を表示したい！そうしないとデバッグが大変になっちゃう！

スタックトレースを取得して、参照すると関数が呼ばれたファイル名、行を取得できる、

export const debugPrint = (...args: any[]) => {
    if (process.env.NODE_ENV === 'development') {
        const stack = new Error().stack;

        if (!stack) {
            return undefined;
        }

        const lines = stack.split('\n');
        const callerLine = lines[2];

        const match = callerLine.match(/\((.*):(\d+):(\d+)\)/);

        if (match) {
            const [fullMatch, filePath, line, column] = match;
            console.log(`${filePath}:${line}:${column} `, ...args);
        } else {
            console.log(...args);
        }
    }
};

export const test = () => {
    debugPrint("nya-n!");
};

実行するとConsoleに下記のような感じで出力される。

https://example.com/main.js:22:4 nya-n!

${filePath}:${line}:${column}のフォーマットで出力されるようにするとChromeではファイル名の部分が補完されて該当の場所へのリンクを貼ってくれて便利だ！

まとめ（感想文）

デバッグのやりやすさって大事。