「Debugger for Chrome」で launch.json の file の書き方

誰のため？

Visual Studio Code で HTML 内に Javascript のコードを書いて、その場でデバッグ実行してみようと Debugger for Chrome プラグインを入れて F5 キーを押してみたけど、うまくいかず「いや、だから、index.html じゃなくて、いま開いている編集中のこのHTMLのコードをデバッグ実行したいんだってば！！」って思ったひと向け。

ちなみに、Debugger for Chrome は超絶便利なので、Visual Studio Codeを入れたら絶対入れるべきおすすめプラグイン

答えは ${file}

キモはこれ -> "file": "${file}"

launch.json にこれを書くだけで VSCode が開いているHTMLファイルをChromeが開くようになる。もちろんデバッグもできるようになる。

最初から、そう書いておいてくれれば百倍助かるのにね。

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "file": "${file}"
        }
    ]
}

たったそれだけのことなのに、ググってもなかなか出てこないんだよね。

これで、Javascript を高速デバッグできますね。どぉ？できた？？

参考：

${file} 以外に定義されている変数はこちら
https://code.visualstudio.com/docs/editor/variables-reference

The following predefined variables are supported:

${workspaceFolder} - the path of the folder opened in VS Code
${workspaceFolderBasename} - the name of the folder opened in VS Code without any slashes (/)
${file} - the current opened file
${relativeFile} - the current opened file relative to workspaceFolder
${fileBasename} - the current opened file's basename
${fileBasenameNoExtension} - the current opened file's basename with no file extension
${fileDirname} - the current opened file's dirname
${fileExtname} - the current opened file's extension
${cwd} - the task runner's current working directory on startup
${lineNumber} - the current selected line number in the active file
${selectedText} - the current selected text in the active file
${execPath} - the path to the running VS Code executable