1-1 Inspector 介绍
git bash 常用命令
mkdir test
新建文件夹cd test
进入文件夹cd ../
进入父级文件夹ls
列出当前文件夹下的文件和文件夹code 当前目录下的文件夹名
可通过 vsCode 自带的一个全局变量 code 打开对应的项目
VS Code 进行断点调试
快捷键 F5 启动一个 websocket 服务进行调试,会在调试控制台打印:
D:\Program Files\nodejs\node.exe --inspect-brk=24775 app.js
Debugger listening on ws://127.0.0.1:24775/6cc7bcf1-c9fc-4f58-a819-2dd38e9fb9bf
For help, see: https://nodejs.org/en/docs/inspector
对应的 http 服务为:
http://127.0.0.1:24775
在后面加上 json 即可查看对应的元信息http://127.0.0.1:24775/json
1-2 激活调试
node --inspect app.js
运行时添加 --inspect 即可激活调试
使用 express 搭建一个服务启动调试
npm init
初始化一个包管理器并指定入口文件(app.js)npm install express --save
安装 express 模块- 在入口文件 app.js 中书写服务代码
const express = require('express')
const app = express()
app.get('/', (req, res) => {
res.send('hello world !')
})
app.listen('3000', () => {
console.log('程序运行在3000端口')
})
node --inspect app.js
运行命令即可启动调试
注意:需要设置 VSCode,设置里搜索 attach,将 Debug › Node: Auto Attach 的值改为 on 即可
1-3~4 调试客户端-chrome devtools
启动调试客户端
- 法一:
- chrome 浏览器中输入 chrome://inspect
- 选择 Devices
- 点击 Configure… 配置好点 Done
- 然后点击 Target 下的 inspect 即可
-
法二:
直接在浏览器中访问元信息中的 devtoolsFrontendUrl 也可打开
查看元信息 -
法三:
打开浏览器开发者工具,点击左上角的绿色图标进入 -
法四:
使用 VSCode 的调试功能
1-5 调试客户端 vscode
- 启动方式:快捷键 F5
- 配置:launch.json
- node 中打印参数列表:
console.log(process.argv)