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

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

## ゴール

- F5でホーム画面を起動 (CakePHP以外でも**ステップ実行までの手順は基本同じ？はずです**)
![debugjs.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134761/b4a4e759-9053-06d9-ada4-15db047bb3db.gif)

## 書かないこと
- CakePHP のインストール手順

## 前提

| プロジェクトルート | 公開ルート     | ポート |
| ------------------ | -------------------------- | ------ |
| 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  |

## 準備

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 JavaScript",
                "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 JavaScript",
                "url": "http://localhost:8765",
                "webRoot": "${workspaceFolder}/webroot",
            }
        ]
    }
    ```

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

    ```src/webroot/js/debug.js
    document.addEventListener("DOMContentLoaded", function() {
        console.log("on loaded");
    });
    ```

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