vscode 调试 js

文章目录

    • 1.使用 chrome 调试页面
      • 1.安装插件:open in browser
      • 2.在要调试的页面上右键选择 open in browser
      • 3.在 chrome 中打开开发者工具
    • 2.使用 vscode 调试页面
      • 2.1.使用 launch 方式调试页面
        • 2.1.1. 使用 Go Live 打开页面(参考前置条件)
        • 2.1.2.打开调试面板
        • 2.1.3.点击 run 按钮
        • 2.1.4.创建 launch 调试方式
        • 2.1.5.为 js 文件打上断点
        • 2.1.6.点击 Run 按钮
      • 2.2.使用 attach 方式调试页面
        • 2.2.1.使用 Live Server 打开要调试的页面(参考前置条件)
        • 2.2.2.添加调试配置
        • 2.2.3.启动一个chrome调试窗口
        • 2.2.4.在调试窗口中访问要调试的页面
        • 2.2.5.在 vscode 中进行调试
        • 2.2.6.在 chrome 页面中点击按钮触发断点
    • 3.使用 vscode 调试 nodejs
      • 3.1.编写 js 文件,打断点
      • 3.2.编写调试配置项
      • 3.3.调试

1.使用 chrome 调试页面

这种方式其实不需要使用 vscode 来调试页面,vscode 只是我们的编辑器,我们使用 vscode 来编辑我们的页面,然后通过 vscode 在 chrome 中打开我的页面。
步骤如下:

1.安装插件:open in browser

2.在要调试的页面上右键选择 open in browser

其中第一个选项是在默认浏览器中打开,第二个选项是在其他浏览器中打开
vscode 调试 js_第1张图片

3.在 chrome 中打开开发者工具

vscode 调试 js_第2张图片

2.使用 vscode 调试页面

使用 vscode 调试页面有 2 种方式
1.launch 方式:这种方式是打开一个新的页面的方式,也就是在一个新打开的页面中进行调试
2.attach 方式:这种方式是把当前页面附加到一个已经打开的页面上去。这个已经打开的页面其实是我们事先打开的页面,这个页面指定了 chrome 调试的端口。

前置条件
无论使用 launch 还是 attach 方式,我们的页面都需要通过 live server 打开,打开的操作步骤如下:
1.安装 Live Server 插件
2.打开要调试的页面
3.点击 【Go Live】按钮在浏览器中打开页面,操作步骤如下
vscode 调试 js_第3张图片
4.复制下浏览器中的页面地址后面备用

2.1.使用 launch 方式调试页面

2.1.1. 使用 Go Live 打开页面(参考前置条件)

2.1.2.打开调试面板

vscode 调试 js_第4张图片

2.1.3.点击 run 按钮

如果之前没有调试过,那么 vscode 会提示我们创建一个 launch.json 的配置文件
注意此时的 html 文件使用 外部js 的方式引入 js文件
vscode 调试 js_第5张图片

2.1.4.创建 launch 调试方式

创建完配置文件之后配置文件内容如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

把我们之前使用 Live Server 打开的页面地址替换到上面的 url 参数值:举例如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome localhost",
            // 注意替换的就是 url 的内容,把原理默认的 http://localhost:8080 替换为 Live Serve 中的值
            "url": "http://127.0.0.1:5500/test.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

2.1.5.为 js 文件打上断点

这个地方不知道为什么 vscode 不支持 html 页面内部

你可能感兴趣的:(vscode 调试 js)