VSCode でF5でホーム画面を起動して TypeScript をステップ実行する

JavaScript 編は、
 [VSCode でF5でホーム画面を起動して JavaScript をステップ実行する](https://qiita.com/hykisk/items/e58ec19149a23135d1a3) を見てください。

## ゴール

- F5でホーム画面を起動 (CakePHP以外でも**ステップ実行までの手順は基本同じ？はずです**)
![debugts.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134761/cfe0a971-b943-d212-9f69-3298986de4c5.gif)

## 書かないこと
- CakePHP のインストール手順
- TypeScriptの導入方法

## 前提

| プロジェクトルート | 公開ルート     | ポート |
| ------------------ | -------------------------- | ------ |
| c:\\src\\cake-app  | c:\\src\\cake-app\\webroot | 8765   |

- CakePHP ビルトイン の簡易ウェブサーバ (port:8765) を起動していること

```
C:\src\cake-app\bin>cake server

Welcome to CakePHP v3.8.11 Console
```
## Version

| - |       version                                |
| --------------------------- | ---------------- |
| VScode          | 1.43.2 |
| Debugger for Chrome                     | 4.12.6      |
| Debugger for Firefox      | 2.7.1  |
| npm      | 6.13.4  |
| TypeScript      | 3.8.3  |

## tree

```
.
├── node_modules
│   └── typescript
├── package.json
├── src
│   ├── Template
│   │   └── Pages
│   │       └── home.ctp   # ホーム画面
│   └── TS
│        ├── debug.ts      # ステップ実行対象
│        └── tsconfig.json
│
├── tsconfig.json
└── webroot
    └── js
        ├── debug.js       # src/TS/debug.ts のトランスパイル結果
        └── debug.js.map
```

## 準備

1. デバッグ構成ファイルを作る
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134761/f5f31275-2e87-885e-0d33-cbc4c075744f.png" width="450">


1. **(お好きな方の)** 拡張をインストールしてデバッグ構成ファイルを編集

    ⅰ. [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134761/e1261652-e944-4bcb-69ec-f884e5fe396b.png" width="450">


    ```/.vscode/launch.json
    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome TypeScript",
                "url": "http://localhost:8765/",
                "webRoot": "${workspaceFolder}/webroot"
            }
        ]
    }
    ```

    ⅱ. [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134761/24a8758e-a374-30c0-3914-bce2fb928cb0.png" width="450">


    ```/.vscode/launch.json
    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "firefox",
                "request": "launch",
                "name": "Launch Firefox TypeScript",
                "url": "http://localhost:8765",
                "webRoot": "${workspaceFolder}/webroot",
                "pathMappings": [
                    {
                        // サーバ上のTSファイルの場所
                        "url": "http://localhost:8765/src/TS/",
                        // ローカルPCのTSファイルの場所
                        "path": "${workspaceFolder}/src/TS"
                    }
                ]
            }
        ]
    }

    ```

1. ステップ実行対象を作成

    ```src/TS/debug.ts
    namespace StepMode.Test {

        export class Debug {

            public onReady(): void {
                console.log("4.call onReady");
            }

            public constructor() {
                console.log("2.call constructor");
            }
        }

        console.log("1.create instance");
        const instance = new Debug();

        console.log("3.event handle");
        document.addEventListener("DOMContentLoaded", () => instance.onReady());
    }
    ```

1. ホーム画面 `home.ctp` でステップ実行対象を読み込む (`<head></head>` 内に追記)

    ```diff
    --- a/src/Template/Pages/home.ctp
    +++ b/src/Template/Pages/home.ctp
    @@ -43,6 +43,8 @@ $cakeDescription = 'CakePHP: the rapid development PHP framework';
         <?= $this->Html->css('style.css') ?>
         <?= $this->Html->css('home.css') ?>
         <link href="https://fonts.googleapis.com/css?family=Raleway:500i|Roboto:300,400,700|Roboto+Mono" rel="stylesheet">
    +    <?= $this->Html->script('debug.js') ?>
    +    <!-- ↑同じ <script src="/js/debug.js"></script> -->
     </head>
    ```

1. TypeScript 設定ファイル `tsconfig.json` を編集 (ルートディレクトリで `tsc --init` して `tsconfig.json` を生成してから修正する箇所)

    ```diff
    --- a/tsconfig.json
    +++ b/tsconfig.json
    @@ -3,14 +3,14 @@
         /* Basic Options */
    -    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    +    "module": "none",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
         // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    -    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    +    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    ```

1. TSディレクトリ配下に `tsconfig.json` を作成 (手で作成)

    ```src/TS/tsconfig.json
    {
        "extends": "../../tsconfig",
        "files": [
            "debug.ts"
        ],
        "compilerOptions": {
          "outFile": "../../webroot/js/debug.js",
        },
    }
```

1. トランスパイル `debug.ts -> debug.js`

```package.json
  "scripts": {
    "tsc_build": "tsc --build ./src/TS",
```

```cmd
c:\src\cake-app>npm run tsc_build
```

## ステップ実行

1. F5でホーム画面を起動して「ブレークモード」になることを確認  
   [※ firefoxの場合、ページのリロードが必要な場合あり Troubleshooting](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)