JavaScript
debug
VSCode
VisualStudioCode

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


「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