electron远程调试实践

发表于 更新于 分类于

远程调试

electron远程调试很简单，只需要添加 remote-debugging-port 命令开关，指定一个端口即可开启，代码如下:

1
2
3
4
// main.ts
import { app } from 'electron'

app.commandLine.appendSwitch('remote-debugging-port', '9876')

开启之后在浏览器访问 localhost:{port}，就能看到electron上跑的应用。

很简单是吧😁，但是这个应用场景并不多，在本机开发的时候直接打开 devtool 也能一样调试，而我（大怨种）是给windows触摸屏一体机开发应用的，在屏上调试的时候一趟趟的往设备那跑就很麻烦，就用这个功能在开发机器上通过 {ip}:{port} 进行调试了。

emmmmm

在同一局域网内，{ip}:{port} 居然无法访问？electron为什么这么做呢？不过问题不大，既然 remote-debugging-port 指定的端口无法通过指定ip去访问，那么咱们可以创建一个代理，将请求转发到 9876 这个端口上。

既然说到代理，nodejs的proxy lib一抓一大把，这里我就用的 http-proxy 来做代理，开辟一个新端口 9877 并转发到 9876 端口上：

1
2
3
4
5
import httpProxy from 'http-proxy'

const proxy = httpProxy
  .createProxyServer({ target: 'http://localhost:9876', ws: true })
  .listen(9877)

搞定~

如果不是一个内网，可以借助一些工具，将外部的设备也加入到一个网络中就行了😁