配置 VS Code 調試 JavaScript
1、 安裝 Debugger for Chrome 擴展、Open in Browser 擴展、View In Browser 擴展
2、新建文件夾 html
3、用VS Code 打開文件夾 html
4、新建 “Index.html”，內容如下：
<html>
<head>
<script language="javascript" type="text/javascript">
function test(obj){
with(obj){
var idReg = /^\d{15}$|^\d{18}$|^\d{17}[xX]$/;
var postReg = /^\d{6}$/;
if(!idcard.value.match(idReg)){
alert("身份證號不合法");
return false;
}
if(!postal.value.match(postReg)){
alert("郵編不合法");
return false;
}
return true;
}
}
</script>
</head>
<body>
用戶詳細信息:<br/>
<form onsubmit="return test(this)">
郵政編碼:<input type="text" name="postal"/><br/>
身份證號:<input type="text" name="idcard"/><br/>
<input type="submit" value="ok"/>
</form>
<body>
</html>
5、按 F5 出現下拉列表，選擇Chrome，如下圖
6、再按 F5 生成 launch.json 文件：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
}
]
}
7、修改 launch.json 文件為：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/Index.html"
}
]
}
8、選擇Launch index.html (disable sourcemaps) 調試項（ 高亮藍色），如下圖：
9、在第 6 行 按 F9 設斷點，如下圖：
10、在 瀏覽器中的郵政編碼中輸入：abcdefgh，按 OK 按鈕，程序停在了斷點（6行），如圖：
