Debugging 解决问题的技巧'；DevTools已断开与页面的连接'；电子辅助管

我有一个电子的问题，应用程序变成空白。i、 它变成了一个白色的屏幕。如果我打开开发工具，它会显示以下消息

在ActivityMonitor中，我可以看到发生这种情况时，电子辅助进程的数量从3下降到2。而且我似乎不是唯一一个遇到它的人。e、 g

但我还没有找到一个有帮助的答案。在电子碰撞的情况下，有什么好的方法来识别问题吗

---

对于上下文，我正在将sdk加载到Electron中。最初，我使用browserify对其进行打包，效果很好。但我想转到SDKs npm版本。这个版本似乎引入了这个问题（尽管代码应该是相同的）。

自从我最初发布这个问题以来，已经过了很长一段时间。我会自己回答的，以防我的错误对任何人都有帮助

我从来没有找到原始问题的“解决方案”。在很晚的一天，我切换到了sdk的npm版本，它成功了

但在此之前，我又碰到了这个问题。幸运的是，到那个时，我已经添加了一个记录器，它还将控制台写入文件。我注意到JavaScript语法错误导致了崩溃。e、 g.缺少闭合支架等

我怀疑这就是造成我最初问题的原因。但是Chrome开发工具做的最糟糕的事情是在工具崩溃时关闭控制台，而不是保留它

我用来设置记录器的代码

/*global window */
const winston = require('winston');
const prettyMs = require('pretty-ms');

/**
 * Proxy the standard 'console' object and redirect it toward a logger.
 */
class Logger {
  constructor() {
    // Retain a reference to the original console
    this.originalConsole = window.console;
    this.timers = new Map([]);

    // Configure a logger
    this.logger = winston.createLogger({
      level: 'info',
      format: winston.format.combine(
        winston.format.timestamp(),
        winston.format.printf(({ level, message, timestamp }) => {
          return `${timestamp} ${level}: ${message}`;
        })
      ),
      transports: [
        new winston.transports.File(
          {
            filename: `${require('electron').remote.app.getPath('userData')}/logs/downloader.log`, // Note: require('electron').remote is undefined when I include it in the normal imports
            handleExceptions: true, // Log unhandled exceptions
            maxsize: 1048576, // 10 MB
            maxFiles: 10
          }
        )
      ]
    });

    const _this = this;

    // Switch out the console with a proxied version
    window.console = new Proxy(this.originalConsole, {
      // Override the console functions
      get(target, property) {
        // Leverage the identical logger functions
        if (['debug', 'info', 'warn', 'error'].includes(property)) return (...parameters) => {
          _this.logger[property](parameters);
          // Simple approach to logging to console. Initially considered
          // using a custom logger. But this is much easier to implement.
          // Downside is that the format differs but I can live with that
          _this.originalConsole[property](...parameters);
        }
        // The log function differs in logger so map it to info
        if ('log' === property) return (...parameters) => {
          _this.logger.info(parameters);
          _this.originalConsole.info(...parameters);
        }
        // Re-implement the time and timeEnd functions
        if ('time' === property) return (label) => _this.timers.set(label, window.performance.now());
        if ('timeEnd' === property) return (label) => {
          const now = window.performance.now();
          if (!_this.timers.has(label)) {
            _this.logger.warn(`console.timeEnd('${label}') called without preceding console.time('${label}')! Or console.timeEnd('${label}') has been called more than once.`)
          }
          const timeTaken = prettyMs(now - _this.timers.get(label));
          _this.timers.delete(label);
          const message = `${label} ${timeTaken}`;
          _this.logger.info(message);
          _this.originalConsole.info(message);
        }

        // Any non-overriden functions are passed to console
        return target[property];
      }
    });
  }
}

/**
 * Calling this function switches the window.console for a proxied version.
 * The proxy allows us to redirect the call to a logger.
 */
function switchConsoleToLogger() { new Logger(); } // eslint-disable-line no-unused-vars

然后在index.html中，我首先加载这个脚本

<script src="js/logger.js"></script>
<script>switchConsoleToLogger()</script>

SwitchConsoleLogger（）

我遇到了这个问题，不明白为什么DevTool总是断开连接。因此，我一时兴起，启动了FirefoxDeveloperEdition，并将原因确定为一个带有字符串长度属性的未定义变量

if ( args.length > 1 ) {
    $( this ).find( "option" ).each(function () {
        $( $( this ).attr( "s-group" ) ).hide();
    });
    $( args ).show();
}

---

TL；DR Firefox Developer edition可以在Chrome的DevTool出现故障时识别此类问题。

我已经安装了Google Chrome 79.0.3945.130版（64位）。每次我处于调试模式时，我的应用程序都会崩溃。我尝试了在网上找到的所有解决方案，但没有一个是有用的。我降级到所有以前的版本：

78.x崩溃了

77.x崩溃了

75.x没有崩溃

---

我不得不重新安装版本75.0.3770.80（64位）。问题已经解决了。这可能是一个新版本的Chrome问题。我向Chrome assistence发送了反馈。

您可以下载Google Chrome Canary。我在Google Chrome上遇到了这个问题，DevTools每次都在同一地点崩溃。在Chrome Canary上，调试器不会崩溃。

调试这样的崩溃的诀窍是启用日志记录，这显然是默认禁用的。这是通过设置环境变量来完成的，如中所述

启用该选项后，您应该可以在控制台中看到如下内容：

---

打开您的谷歌开发控制台（Ctrl+shift+i）。然后按（fn+F1）或只按F1，然后向下滚动并单击“恢复默认值并重新加载”。

阅读上述评论后，我清楚地看到，至少在Chrome中存在一个问题，即没有显示任何故障来源的指示。在Firefox中，该程序可以工作，但延迟时间很长

但是，正如Shane Gannon所说，问题的根源肯定不在浏览器中，而在代码中：在我的例子中，我打开了一个while循环，没有添加相应的增量，这使得循环无限大。如下例所示：

var a = 0;
while (a < 10) {

  ...

  a ++               // this is the part I was missing;
}

var a=0；
而（a<10）{
...
a++//这是我丢失的部分；
}

---

纠正后，问题消失。

检查您的终端是否有任何错误？没有。我试图捕获uncaughtException和SIGTERM，但这些处理程序未被触发。能否为代码提供一些代码或链接？我无法确定是哪部分代码导致了问题。因此，我无法提供代码的精简版本。目前它只是我本地机器上的一个原型。但Electron不使用Firefox。对我来说也是如此：Google Chrome 80.0.3987.87（64位）在调试断点时总是在同一点崩溃。改为安装谷歌Chrome 75.0.3770.100（64位）->FIXED.“但问题的根源肯定不在浏览器中，正如Shane Gannon所说。”。我没有说问题出在浏览器上。我说是语法错误。这不太可能是浏览器的问题。你是对的，这正是我想说的。我对这句话进行了编辑，使它更清楚。