解决“ DevTools已从页面断开连接”的提示，Electron Helper消失 [英] Tips on solving 'DevTools was disconnected from the page' and Electron Helper dies

问题描述

Electron出现问题，应用程序空白。即它变成白屏。如果我打开开发工具，它将显示以下消息。

I've a problem with Electron where the app goes blank. i.e. It becomes a white screen. If I open the dev tools it displays the following message.

在ActivityMonitor中，发生这种情况时，我可以看到Electron Helper进程的数量从3个减少到2个。另外，似乎我不是唯一遇到它的人。例如

In ActivityMonitor I can see the number of Electron Helper processes drops from 3 to 2 when this happens. Plus it seems I'm not the only person to come across it. e.g.

• Facing "Devtools was disconnected from the page. Once page is reloaded, Devtools will automatically reconnect."
• Electron dying without any information, what now?

但是我还没有找到一个有帮助的答案。在Electron崩溃的情况下，有什么好的方法可以识别问题？

But I've yet to find an answer that helps. In scenarios where Electron crashes are there any good approaches to identifying the problem?

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

For context I'm loading an sdk into Electron. Originally I was using browserify to package it which worked fine. But I want to move to the SDKs npm release. This version seems to have introduced the problem (though the code should be the same).

推荐答案

已经过去了很多时间自从我最初发布此问题以来。如果我的错误可以帮助任何人，我都会自己回答。

A good bit of time has passed since I originally posted this question. I'll answer it myself in case my mistake can assist anyone.

我从来没有一个解决原始问题的方法。后来，我转而使用sdk的npm版本，它起作用了。

I never got a "solution" to the original problem. At a much later date I switched across to the npm release of the sdk and it worked.

但是在那之前，我又遇到了这个问题。幸运的是，到那时，我已经添加了一个记录器，该记录器还向文件写入了控制台。有了它，我注意到JavaScript语法错误导致崩溃。例如缺少右括号等。

But before that time I'd hit this issue again. Luckily, by then, I'd added a logger that also wrote console to file. With it I noticed that a JavaScript syntax error caused the crash. e.g. Missing closing bracket, etc.

我怀疑是造成我最初问题的原因。但是Chrome开发人员工具通过清空控制台而不是在工具崩溃时保留控制台来做最坏的事情。

I suspect that's what caused my original problem. But the Chrome dev tools do the worst thing by blanking the console rather than preserve it when the tools crash.

我用来设置记录器的代码

Code I used to setup a logger

/*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中加载脚本优先

Then in index.html I load this script first

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

这篇关于解决“ DevTools已从页面断开连接”的提示，Electron Helper消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！