Consejos para resolver ‘DevTools se desconectó de la página’ y Electron Helper muere

Nuestro equipo de especialistas pasados ciertos días de investigación y recopilar de información, obtuvimos la solución, queremos que todo este artículo sea de gran utilidad en tu plan.

Solución:

Ha pasado bastante tiempo desde que publiqué originalmente esta pregunta. Lo responderé yo mismo en caso de que mi error pueda ayudar a alguien.

Nunca obtuve una “solución” al problema original. En una fecha mucho más tarde cambié a la versión npm del SDK y funcionó.

Pero antes de ese momento volví a tocar este tema. Afortunadamente, para entonces, había agregado un registrador que también escribía la consola en el archivo. Con él noté que un error de sintaxis de JavaScript causó el bloqueo. por ejemplo, falta el soporte de cierre, etc.

Sospecho que eso es lo que causó mi problema original. Pero las herramientas de desarrollo de Chrome hacen lo peor al dejar en blanco la consola en lugar de preservarla cuando fallan las herramientas.

Código que usé para configurar un registrador

/*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

Luego en index.html cargo este script primero

Tenía instalado Google Chrome versión 79.0.3945.130 (64 bit). Mi aplicación se bloqueaba cada vez que estaba en modo de depuración. Intenté todas las soluciones que encontré en la web, pero ninguna fue útil. Degradé a toda la versión anterior:

1. 78.x se estrelló
2. 77.x se estrelló
3. 75.x No se estrelló

Tuve que volver a instalar la versión 75.0.3770.80 (64 bit). El problema ha sido resuelto. Puede ser un problema de nuevas versiones de Chrome. Envié comentarios a la asistencia de Chrome.

Al final de todo puedes encontrar las interpretaciones de otros usuarios, tú todavía puedes mostrar el tuyo si te gusta.

---

---

Utiliza Nuestro Buscador