vscode断点调试本地客户端文件

时间：2024-06-16 20:34:32

一、安装chrome，安装vscode，打开vscode编辑器，安装插件Debugger for Chrome

vscode断点调试本地客户端文件

二、新建文件

vscode断点调试本地客户端文件
1、目录结构

.
├── index.html
├── index.js

2、在vscodeDebug工程中，新建index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>vscode调试本地文件</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="index.js"></script>
</head>
<body>
  <div>vscode调试本地js文件</div>
</body>
</html>

3、在vscodeDebug工程中，新建index.js

var data = [];
setTimeout(function (){
    data.push(1);
},2000);
console.log(data[0]);
// 结果
// undefined

/*
var data = [];
var cb = function(){
    console.log(data[0]);
};
var pushData =  function(callback){
    data.push(1);
    callback();
};
setTimeout(function () {
    pushData(cb);
},2000);
*/

三、点击左侧栏调试按钮，切换到debug模式
vscode断点调试本地客户端文件
1、生成并配置launch.json文件
点击添加配置按钮，此时vscode会自动在.vscode文件夹下新建launch.json文件，根据调试需要自己修改launch.json文件，然后选择需要调试的项目，并选择chrome环境。

{
    // 使用 IntelliSense 了解相关属性。
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "启动 Chrome 并打开 localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "使用本机 Chrome 调试",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        }
    ]
}

file值表示【需要调试的文件路径】，调试方式为【使用本机chrome调试】。

2、在index.js文件中打断点

vscode断点调试本地客户端文件
3、开始调试

相关文章