vscodeでjavascriptデバッグ方法(chrome)の備忘録。
まず、2つのvscodeの拡張機能をインストールする。
・debugger for chrome
・Live Server
以下サンプルファイル
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEBUG</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="javascriptdebug.js"></script>
</body>
</html>
javascriptdebug.js
$(function(){
console.log('debugging!');
});
index.htmlの画面を右クリックして「open with Live Server」をクリックする。
(簡易webサーバー起動)
lanch.jsonファイルの設定を行う。
lanch.json
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "localhost に対して Chrome を起動",
"url": "http://localhost:5500/",
"webRoot": "${workspaceFolder}"
}
]
注意点としては、"url"と"webRoot"はこのままの設定で。
javascriptファイルにブレークポイントを設定し、「デバッグ開始」を押すと
ブレークポイントで停止した。
あと、docker環境でもこの設定でできた。