YMLib - HTML - コールバック関数のデバック

コールバック関数のデバック

2026/01/22

コールバック関数をデバックしてみます。

◆環境

OS	Windows 11 Home 25H2
Browser	Google Chrome 143.0.7499.193

index.htmlではscriptタグでmain.jsを指定します。

index.html

1:
2:
3:
4:
5:
6:
7:
8:
9:

<!doctype html>
<head>
<meta charset="utf-8">
<title>コールバック関数のデバッグ</title>
</head>
<body>
<script type="module" src="main.js"></script>
</body>
</html>

main.jsではコールバック関数を定義して使ってみます。コールバック関数自体をconsole.logで出力してみます。

debuggerをデバッグ開始したい位置に記載します。

main.js

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

function fnCallBack(cb) {
    console.log(cb);
    let number = prompt('Please input number');
    const result = cb(number);
    console.log(result);
}

function fn(n) {
  return n * 2;
}

debugger;
fnCallBack(fn);

index.htmlを右クリックしOpen with Live Serverをクリックすると特にデバッグで止まりませんでした。

開いているブラウザでF12でDeveloper toolsを開きF5でリロードするとdebuggerの位置で止まりました！