vscode 调试 js

╰+攻爆jí腚メ 2023-02-12 10:28 64阅读 0赞

### 文章目录 ###

*   *  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 ###

其中第一个选项是在默认浏览器中打开，第二个选项是在其他浏览器中打开  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70][]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 1]

## 2.使用 vscode 调试页面 ##

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

**前置条件**：  
无论使用 launch 还是 attach 方式，我们的页面都需要通过 live server 打开，打开的操作步骤如下：  
1.安装 Live Server 插件  
2.打开要调试的页面  
3.点击 【Go Live】按钮在浏览器中打开页面，操作步骤如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 2]  
4.复制下浏览器中的页面地址后面备用

### 2.1.使用 launch 方式调试页面 ###

#### 2.1.1. 使用 Go Live 打开页面（参考前置条件） ####

#### 2.1.2.打开调试面板 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 3]

#### 2.1.3.点击 run 按钮 ####

如果之前没有调试过，那么 vscode 会提示我们创建一个 launch.json 的配置文件  
**注意此时的 html 文件使用 外部js 的方式引入 js文件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 4]

#### 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 页面内部`<script>`标签里面的js调试，因此特地创建一个 js 文件然后引入：  
html 文件内容如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="test.js"></script>
    </head>
    <body>
        <button onclick="hello()">hello</button>
    </body>
    </html>

test.js 文件内容如下：

function hello() { 
        var name = 'dada';
        var age = 18;
        console.log(name, age)
    }

在 test.js 文件的 var age = 18 处打上断点。

#### 2.1.6.点击 Run 按钮 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 5]  
然后我们就可以通过点击按钮触发 vscode 调试了，接下来浏览器会有如下文件提示：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 6]  
之后系统自动帮我们跳转到 vscode 窗口

### 2.2.使用 attach 方式调试页面 ###

这种方式跟 launch 的整体流程都是一致的，只是有细微的区别，主要流程如下：

#### 2.2.1.使用 Live Server 打开要调试的页面（参考前置条件） ####

#### 2.2.2.添加调试配置 ####

注意：vscode 默认添加的 attach 配置没有 url 这一项，需要我们手动添加上去，地址还是 Live Server 打开时的地址。

配置完内容举例如下：

{ 
        "version": "0.2.0",
        "configurations": [
            { 
                "type": "chrome",
                "request": "attach",
                "name": "Attach to Chrome",
                "port": 9222,
                // vscode 默认生成的配置没有 url 这一项
                "url": "http://127.0.0.1:5500/test.html",
                "webRoot": "${workspaceFolder}"
            }
        ]
    }

#### 2.2.3.启动一个chrome调试窗口 ####

通过 debug 方式启动一个 chrome 窗口命令如下：

# 我们在启动 chrome 窗口的时候指定了它的监听端口为 9222，这个端口需要跟 vscode 中配置的值保持一致
    # mac 启动方式
    /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
    # windows 启动方式，进入到 chrome 安装目录
    chrome.exe --remote-debugging-port=9222

启动后的端口不要关闭，等到后面调试使用。所谓的添加到已经打开的 chrome 页面就是指的通过指定调试端口方式打开的这个 chrome 窗口。  
**关闭**除了刚才打开的调试 chrome 窗口之外的**所有窗口**，不然调试按钮无法进入。

#### 2.2.4.在调试窗口中访问要调试的页面 ####

把刚才通过 Live Server获取的 url 地址粘贴到 2.2.3 中窗口然后访问

#### 2.2.5.在 vscode 中进行调试 ####

在 debug 布局中，通过下来列表选择 **Attach to Chrome**这一项，然后点击 run 的绿色按钮：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 7]

#### 2.2.6.在 chrome 页面中点击按钮触发断点 ####

之后我们在刚才的 chrome 页面中点击 hello 按钮就可以触发调试了。

**注意：**  
1.如果你点击按钮之后 vscode 并没有检测到断点的话，那么你需要看看你是不是还启动了其他的 chrome 页面，有的话把他们全部关掉再试试。实在不行先全部关掉页面，然后重新启动一个 chrome 调试页面。  
2.你启动 chrome 调试页面的时候指定端口跟你在 vscode 中指定的端口是不是一致：

{ 
        "version": "0.2.0",
        "configurations": [
            { 
                "type": "chrome",
                "request": "attach",
                "name": "Attach to Chrome",
                // 这里指定了 chrome 调试窗口的监听端口
                "port": 9222,
                "url": "http://127.0.0.1:5500/test.html",
                "webRoot": "${workspaceFolder}"
            }
        ]
    }

## 3.使用 vscode 调试 nodejs ##

使用 vscode 调试 nodejs 比较容易，举例如下：

### 3.1.编写 js 文件，打断点 ###

var http = require('http');
    
    http.createServer(function (request, response) { 
    
        // 发送 HTTP 头部 
        // HTTP 状态值: 200 : OK
        // 内容类型: text/plain
        response.writeHead(200, { 'Content-Type': 'text/plain'});
        console.log('hello nodejs.')
    
        // 发送响应数据 "Hello World"
        response.end('Hello World\n');
    }).listen(8888);
    
    // 终端打印如下信息
    console.log('Server running at http://127.0.0.1:8888/');
    console.log('hello node.')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 8]

### 3.2.编写调试配置项 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 9]  
调试配置项如下：

{ 
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      // 这里的 app.js 文件可以根据我们的需要更改
      "program": "${workspaceFolder}/app.js",
      "skipFiles": [
          "<node_internals>/**"
      ]
    }

### 3.3.调试 ###

跟之前的调试步骤一样，还是选择要调试的配置项【Launch Program】，然后点击 Run 按钮既可以开始调试。

**注意：**  
这里并不涉及到 Live Server，Live Server 是我们在调试页面的时候用到的插件。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200525211456422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200525213025167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200525215441811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200525215834182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200525221634401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200525222553844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020052522280713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200525225445341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200525231602916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200525232101854.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RlbmdkYXpoYW5nNzcwOTYwNDM2,size_16,color_FFFFFF,t_70