vscode 调试 js

最新推荐文章于 2024-06-11 16:55:53 发布

信行合一

最新推荐文章于 2024-06-11 16:55:53 发布

阅读量2.6k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/tengdazhang770960436/article/details/106341884

版权

文章目录

1.使用 chrome 调试页面

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

1.安装插件：open in browser

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

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

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

在这里插入图片描述

2.使用 vscode 调试页面

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

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

2.1.使用 launch 方式调试页面

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

2.1.2.打开调试面板

在这里插入图片描述

2.1.3.点击 run 按钮

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

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 按钮

在这里插入图片描述
然后我们就可以通过点击按钮触发 vscode 调试了，接下来浏览器会有如下文件提示：
之后系统自动帮我们跳转到 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 的绿色按钮：
在这里插入图片描述

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.')

在这里插入图片描述

3.2.编写调试配置项

在这里插入图片描述
调试配置项如下：

{
  "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 是我们在调试页面的时候用到的插件。

信行合一

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
vscode 调试 js

1.使用 chrome 调试页面这种方式其实不需要使用 vscode 来调试页面，vscode 只是我们的编辑器，我们使用 vscode 来编辑我们的页面，然后通过 vscode 在 chrome 中打开我的页面。步骤如下：1.安装插件：open in browser2.在要调试的页面上右键选择 open in browser其中第一个选项是在默认浏览器中打开，第二个选项是在其他浏览器中打开3.在 chrome 中打开开发者工具2.使用 vscode 调试页面使用 vscode 调试页
复制链接

扫一扫