JavaScript | 「ソースマップ」付きで TypeScript や Babel コードをデバッグする方法

ここでは、「ソースマップ付きで TypeScript や Babel 変換後のコードをブラウザでデバッグする方法」を、
🔰 初心者向けにステップごとで分かりやすく解説します。

そもそも「ソースマップ」って何？

TypeScript や Babel を使うと、実際にブラウザで動くのは 変換後（トランスパイル後）の JavaScript です。

たとえば：

TypeScript ソース

// app.ts
function greet(name: string) {
  console.log(`Hello, ${name}!`);
}
greet("Halu");

// app.ts
function greet(name: string) {
  console.log(`Hello, ${name}!`);
}
greet("Halu");

コンパイル後の JS

"use strict";
function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("Halu");
// ↓ このように変換される
//# sourceMappingURL=app.js.map

"use strict";
function greet(name) {
  console.log("Hello, " + name + "!");
}
greet("Halu");
// ↓ このように変換される
//# sourceMappingURL=app.js.map

この //# sourceMappingURL=app.js.map が「ソースマップ」へのリンクです。

ソースマップの役割

• 「変換前の TypeScript（または ESNext）」と「変換後の JavaScript」 の対応関係を記録した地図ファイル。
• ファイル名は app.js.map のようになります。
• .map ファイルを読み込めば、ブラウザ開発ツールで TypeScript そのままを表示・デバッグできるようになります。

つまり：

コンパイル後の難読化された JS を読む必要がなくなり、
VSCode や Chrome の DevTools 上で TypeScript の行番号で止められる！

ステップごとの設定方法（TypeScript 編）

① tsconfig.json の設定

まず、TypeScript コンパイル設定でソースマップを出力するようにします。

{
  "compilerOptions": {
    "target": "ES5",
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

{
  "compilerOptions": {
    "target": "ES5",
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": ["src/**/*"]
}

→ これで dist/app.js と dist/app.js.map が生成されます。

② ブラウザで確認する

1. Chrome などで対象ページを開く
2. F12 または Ctrl+Shift+I（Mac: Cmd+Opt+I） で開発ツールを起動
3. Sources タブ → webpack:// または file:// 配下に src/app.ts が見える
4. TypeScript ファイル（.ts）の行番号をクリック → ブレークポイント設定
5. ページを再読み込み
   → 変換後ではなく「TypeScript ソースの該当行」で停止します！

Babel + Webpack の場合

Babel でトランスパイルしている場合も同じ考え方です。

webpack.config.js 例

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  devtool: "source-map", // ★これが重要！
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
};

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },
  devtool: "source-map", // ★これが重要！
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      }
    ]
  }
};

→ devtool: "source-map" により .map ファイルが生成されます。

デバッグの流れ（ブラウザ実践）

1️⃣ ソースを確認

DevTools の「Sources」パネルで、src/ ディレクトリが見えていれば成功。
（Babel で圧縮された bundle.js ではなく、元のコードが見える）

2️⃣ ブレークポイントを設定

TypeScript / ES6 ソースの中で止めたい行にクリックしてブレークポイント。

3️⃣ 実行して停止

ページをリロード or イベントを発火すると、
「変換前のコード行」で止まる！

→ ステップ実行、ウォッチ式（変数の値監視）もそのまま動きます。

よくあるトラブルと対策

まとめ