前端调试

1,034 阅读3分钟

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。如果有这些需求需要使用下面的调试方式。

安卓机远程调试

  1. 使用数据线连接电脑,选择允许使用 usb
  2. 在DevTools 中选中 remoet devices
  3. 可以看到连接的设备
  4. 选中设备后后点击想要调试的链接地址右边的 inspect
  5. 会弹出一个窗口,是pc端模拟移动端的样式,并且手机和pc端同步,可以查看手机上点击的请求以及log显示

ios远程调试

由于我用的是安卓机,只用过别人的手机试过一次,并没有截图,具体流程可以参考凹凸实验室-链接

charles 抓包

pc设置:

  1. 启动 charles,输入密码授权
  2. 安装证书
  3. 信任证书

mobile设置:

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

2. 配置代理服务 ip 地址就是pc端的地址,端口号固定为8888

3. 访问chls.pro/ssl 下载证书 4. 安装正式并设置为信任,访问页面地址,chales会弹框出消息如下,点击允许可以开始抓包。

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"
    }
  ]
}

区块1主要用于查看断点数据,区块2体统一些工具方法,如我点击这个按钮会跳过当前断点继续执行代码。

attach 调试方式

  1. --inspect参数是启动调试模式必需的。注意这里是port 是 Debugger 监听的端口
"configurations": [
    {
      "request": "attach",
      "name":"附加",
      "address": "localhost",
      "port":9229
    }
]
  1. 在vscode 中打开debug ,f5 + 选择node.js
  2. 重新刷新 http服务监听的地址会命中断点的位置

在debug中使用npm启动

  1. node 的 debug 模式 127.0.0.1:9229 默认监听该地址,命令行中打印的时候还会拼接上 UUID 。
  2. 触发 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,

  1. pm2 start app.js --watch
    • 如使用 node app.js 启动项目当我们修改了代码后需要重新启动才能看到改动后的修改,使用 --watch 就减少了我们重启的步骤
  2. pm2 log 当我们使用 start 启动项目后为了查看log数据可以使用该命令
  3. pm2 ecosystem pm2、 pm2 deploy ecosystem.config.js production setup production将本地代码部署到服务器上。
    • 不过我感觉pm2 这个功能比较麻烦,需要将改动 push 到github,然后服务器上从 github 拉取。
    • 采用 bash 命令会比较快捷
    rsync -rtv  * root@IP:PATH(存放在服务端的目录地址)
    echo  -e "访问地址:域名+PATH "
    
  4. pm2 list 查看当前启动项列表,注意 pm2 log 会打印所有项目的log,但是它会根据 list 中 id 来区分这些log来自于哪个项目

参考

Better Mobile Application Testing with Charles Proxy
pm2