这种方式其实不需要使用 vscode 来调试页面,vscode 只是我们的编辑器,我们使用 vscode 来编辑我们的页面,然后通过 vscode 在 chrome 中打开我的页面。
步骤如下:
其中第一个选项是在默认浏览器中打开,第二个选项是在其他浏览器中打开
使用 vscode 调试页面有 2 种方式
1.launch 方式:这种方式是打开一个新的页面的方式,也就是在一个新打开的页面中进行调试
2.attach 方式:这种方式是把当前页面附加到一个已经打开的页面上去。这个已经打开的页面其实是我们事先打开的页面,这个页面指定了 chrome 调试的端口。
前置条件:
无论使用 launch 还是 attach 方式,我们的页面都需要通过 live server 打开,打开的操作步骤如下:
1.安装 Live Server 插件
2.打开要调试的页面
3.点击 【Go Live】按钮在浏览器中打开页面,操作步骤如下
4.复制下浏览器中的页面地址后面备用
如果之前没有调试过,那么 vscode 会提示我们创建一个 launch.json 的配置文件
注意此时的 html 文件使用 外部js 的方式引入 js文件
创建完配置文件之后配置文件内容如下:
{
"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}"
}
]
}
这个地方不知道为什么 vscode 不支持 html 页面内部标签里面的js调试,因此特地创建一个 js 文件然后引入:
html 文件内容如下:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="test.js">script>
head>
<body>
<button onclick="hello()">hellobutton>
body>
html>
test.js 文件内容如下:
function hello() {
var name = 'dada';
var age = 18;
console.log(name, age)
}
在 test.js 文件的 var age = 18 处打上断点。
然后我们就可以通过点击按钮触发 vscode 调试了,接下来浏览器会有如下文件提示:
之后系统自动帮我们跳转到 vscode 窗口
这种方式跟 launch 的整体流程都是一致的,只是有细微的区别,主要流程如下:
注意: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}"
}
]
}
通过 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 窗口之外的所有窗口,不然调试按钮无法进入。
把刚才通过 Live Server获取的 url 地址粘贴到 2.2.3 中窗口然后访问
在 debug 布局中,通过下来列表选择 Attach to Chrome这一项,然后点击 run 的绿色按钮:
之后我们在刚才的 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}"
}
]
}
使用 vscode 调试 nodejs 比较容易,举例如下:
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.')
{
"type": "node",
"request": "launch",
"name": "Launch Program",
// 这里的 app.js 文件可以根据我们的需要更改
"program": "${workspaceFolder}/app.js",
"skipFiles": [
"/**"
]
}
跟之前的调试步骤一样,还是选择要调试的配置项【Launch Program】,然后点击 Run 按钮既可以开始调试。
注意:
这里并不涉及到 Live Server,Live Server 是我们在调试页面的时候用到的插件。