electron 调试、问题追踪

---

前言

开发一个优秀的客户端GUI程序，调试测试工作必不可少。下面让我们一起学习吧。

---

一、调试工具

1. 生产环境调试工具 bugtron

字节跳动公司的工程师开发的Debugtron(https:// github.com/bytedance debugtron)可以帮助开发者完成这项工作。Debugtron是一个基于Electron开发的客户端桌面 GUI 程序，它就是为调试生产环境下的 Electron 应用而生的。
下载地址 https://www.electronjs.org/apps/debugtron

2. 日志

1. 业务日志

import log from "electron-log"
控制台也会显示相关打印
默认安装地址
appa.getPath("userData")//C:\Users\xx\AppData\Roaming\项目名称\logs
log.info("info")
log.warn("warn")
log.error("error")
log.verbose("verbose")
log.silly("silly")
//分渲染进程 和 主进程
[2022-07-22 13:48:51.175] [error] 1233333
[2022-07-22 13:50:21.182] [error] 1233333
[2022-07-22 14:26:29.360] [info]  createWindow
[2022-07-22 14:26:44.148] [info]  createWindow Load complete
[2022-07-22 14:26:51.916] [info]  createWindow Load complete
[2022-07-22 14:27:10.568] [info]  createWindow Load complete
[2022-07-22 14:27:14.627] [info]  createWindow Load complete

2. 网络日志

1. 一般情况，我们可以通过渲染进程的开发者调试工具即可查看应用的网络请求，如图
   
2. 主进程 利用electron提供的netLog模块，允许开发人员通过变成的方式记录网络求数据

 let remote = require("electron");
 await remote.netlog.startLogging("E:\\net.log");
 let ses = remote.getCurrentWebContents().session
 let xhr = new XMLHttpRequest();
xhr.open("GET"，"https://www.baidu.com");
xhr.onload = async () => {
console.log(xhr.responseText); 
await remote.netLog.stopLogging()
};
xhr.send();

3. 崩溃报告

Electron 内置了崩溃报告上报模块 crashReporter，开发者可以利用此模块收集应用程序崩溃时的环境情况和异常数据，并让应用程序把这些数据提交到一个事先指定好的服务器上。

let electron=require('electron'); 
electron.crashReporter.start({
productName:'YourName',
companyName:'YourCompany',
submiturL:'http://localhost:8989/' uploadToServer:true1);
})

二、捕获全局异常

1. 开发网页时：

当页中有异常发生时，会触发window的onerror事件，开发者可以在此事件中收集
日志、显示异常提示信息或重新加载应用。但以这种方式捕获异常后，异常依旧存开发者工具控制台还会输出异常。

window.onerror=function (){
    //收集日志
    //显示异常提示信息或者重新加载应用
  }

2. 在electron中全局异常捕获：

这种方式是利用 Node.js 技异常，这种方式捕获异常后，异常会被
对于应用程 因为 process Nodejs变量，所以在进程和渲染进程中都可以使用这种方
吃掉”，开者工具制台也不会再输出任何异常提示信息了。

  process.on('uncaughtException',(err,origin)=>{
      //收集日志
    //显示异常提示信息或者重新加载应用
})

3. 从异常中恢复

上述中崩溃报告服务只能在应用崩溃时自动发送崩溃报告，但我们并不能确切地通过它知道应用程序何时崩溃了。Electron提供了两个事件来帮助开发者截获渲染进程崩溃或挂起的事件。
可以通过监听渲染进程的crashed事件来获悉渲染进程何时发生了崩xun溃错误，代码如下所示:

let { dialog}=require('electron');
win.webContents.on("crashed", async (e, killed) => (
//应加入收集日志的逻辑
let result = await dialog.showMessageBox({
    type: "error",
    title: "应用程序崩溃",
    message: "当前程序发生异常，是否要重新加载应用程序?",
    buttons: ["是", "否"],
  })
  if (result.response == 0) win.webContents.reload();
  else app.quit();

以上代码在主进程中监听 webContents 的crashed 事件，一旦渲染进程崩溃，系统将弹出一个友善的提示对话框,如图
我们可以使用如下代码模拟渲染进程崩溃或挂起:

//模拟进程崩渍
process.crash();

//模拟进程挂起
process.hang();

需要注意的是，因为渲染进程是受控的，所以才有这两个事件提供给开发者，允许开发者监控异常并从异常中恢复。但主进程并没有类似的事件提供给开发者，开发者可以考虑使用process的’uncaughtException事件，在此事件中收集日志并重启应用。

保护用户界面

很多黑客工具会捕获你的窗口，然后通过模拟鼠标和键盘来操作你的窗口、输入数据，用机器模拟操作等。由于他看起来像真是用户一样，对于开发者来说这种黑客防不胜防。所以electron为我们提供了这样的API。
执行后，如果再有类似黑客工具捕获你的窗口，window环境下将显示一块黑色区域，应用窗口拒绝被铺货。代码如下：

//防止黑客攻击
  win.setContentProtection(true);

---

总结

本篇内容 借鉴书籍 《Electron 实战 入门 进阶与性能优化》