ui 调试
内网ip调试
打开网络找到当前局域网分配的ip地址 ,将localhost 替换为ip

http://localhost:8080/company
// 替换为局域网分配的ip地址
http://192.168.24.179:8080/company
将上面的 http://192.168.24.179:8080/company 发送给手机,手机打开无线连到和pc端相同的网络下,这样同一个局域网内通过ip可以互相访问到。
该方式简单、实时对调整页面很有帮助。但是无法查看请求或者log。如果有这些需求需要使用下面的调试方式。
安卓机远程调试
- 使用数据线连接电脑,选择允许使用 usb

- 在DevTools 中选中
remoet devices
- 可以看到连接的设备

- 选中设备后后点击想要调试的链接地址右边的 inspect

- 会弹出一个窗口,是pc端模拟移动端的样式,并且手机和pc端同步,可以查看手机上点击的请求以及log显示

ios远程调试
由于我用的是安卓机,只用过别人的手机试过一次,并没有截图,具体流程可以参考凹凸实验室-链接
charles 抓包
pc设置:
- 启动 charles,输入密码授权

- 安装证书

- 信任证书

mobile设置:
- 手机连上和pc端相同的局域网,设置代理,选择手动



node 调试
launch.json 启动配置项基础版
{
"version": "0.2.0",
"configurations": [
{
// 使用 node 拼接上 program 相当于 node app.js
"type": "node",
"request": "launch",
"name": "Launch Program",
// 忽略的文件
"skipFiles": [
"<node_internals>/**"
],
// 将环境变量设置在该对象下的字段,挂载到 process 对象下 。代码中通过 process.env 获取
"env":{
"argv":"wechat",
"NODE_ENV":"development",
},
// 启动当前目录下 app.js
"program": "${workspaceFolder}/app.js"
}
]
}

attach 调试方式
- --inspect参数是启动调试模式必需的。注意这里是port 是 Debugger 监听的端口
"configurations": [
{
"request": "attach",
"name":"附加",
"address": "localhost",
"port":9229
}
]
- 在vscode 中打开debug ,f5 + 选择node.js
- 重新刷新 http服务监听的地址会命中断点的位置
在debug中使用npm启动
- node 的 debug 模式 127.0.0.1:9229 默认监听该地址,命令行中打印的时候还会拼接上 UUID 。
- 触发 debug ,还是继续访问我们的地址如
http://localhost:9000/react/request-params,会命中我们设置的断点
// launch.json
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch via NPM",
"type": "node",
// 指定命令行运行的路径,该字段可省略
"cwd": "${workspaceFolder}",
// debug 模式为 laugch 另一个选项:attach
"request": "launch",
// 指定运行程序,可选值 'npm', 'mocha', 'gulp' 等
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "debug" //这里的dev就对应package.json中的scripts中的dev
],
"port":9229
},
]
}
// package.json
"scripts": {
// 通过命令行传递参数 test 可以通过 process.argv.slice(2)[0] 拿到该参数
// --inspect 必填,如果 launch.json中未指定端口后,可以通过 --inspect-brk=9229 指定
"debug":"node --inspect app.js test"
},
可以通过 env 来指定环境,可以通过 process.env 来获取你设定的值,不过我生产环境的代码里已经通过 process.argv 来判断当前环境,为了减少判断,我是通过 node app.js test 来传的环境变量。
pm2
pm2 有很多好用的api,
- pm2 start app.js --watch
- 如使用 node app.js 启动项目当我们修改了代码后需要重新启动才能看到改动后的修改,使用 --watch 就减少了我们重启的步骤
- pm2 log 当我们使用 start 启动项目后为了查看log数据可以使用该命令
- pm2 ecosystem pm2、 pm2 deploy ecosystem.config.js production setup production将本地代码部署到服务器上。
- 不过我感觉pm2 这个功能比较麻烦,需要将改动 push 到github,然后服务器上从 github 拉取。
- 采用 bash 命令会比较快捷
rsync -rtv * root@IP:PATH(存放在服务端的目录地址) echo -e "访问地址:域名+PATH " - pm2 list 查看当前启动项列表,注意 pm2 log 会打印所有项目的log,但是它会根据 list 中 id 来区分这些log来自于哪个项目