Ndtyjky

Is any way to have my own instance of Chrome console as react component in my desktop application. Being desktop application assumes that to have my application up and running

• I will use Chrome


• I can write and install Chrome plugins.


• I can build my own browser based on framework like CEF C# https://github.com/cefsharp/CefSharp/ or https://electronjs.org
  

The code to illustrate what I am looking for on JS script side of my application:

class App extends Component {

 constructor() {

   super();

   this.logger_one = null;

   this.logger_two = null;

 }



 render() {

  return (<div>

             <SomeOtherComponent .../>

             <ChromeConsole ref={(r)=>{this.logger_one = r}} />

             <hr/>

             <ChromeConsole ref={(r)=>{this.logger_two = r}} />

          </div>

           )

 }



 event_handler_one() {

   logger_one.log("something happen for one...");

 }



 event_handler_two() {

   logger_two.log("something happen for two...");

 }

}

this.logger_one and this.logger_two suppose to refer to instances of an object like console so I can use this API: https://developers.google.com/web/tools/chrome-devtools/console/console-reference

I need to get a reference to Chrome console instances, not custom-made console replacement. It is important since I do need all that nice features available for js developers but for a different purpose - observation and understanding my system behavior.

NOTES

• The window.console object is a native implementation that can not be instantiated as there's no constructor function or class available. But that is fine, because your "two" loggers can use the same window.console without a problem.




• The structure <ChromeConsole ref={(r)=>{this.logger_one = r}} /> will store in this.logger_one a reference to the DOM JSX element (See Refs on React docs), so it will not be a reference that we can manipulate. But that is fine, because we can use any other attribute.

You can use a functional component to define a property (example console) and use it to return the window console:

export default const ChromeConsole = ({ id, console }) => {

  console(window.console);

  return (<div data-logger-id={id} />);

}

Use it then as:

class App extends Component {

  constructor() {

    super();

    this.logger_one = null;

    this.logger_two = null;

  }



  render() {

    return (

      <div>

        <SomeOtherComponent .../>

        <ChromeConsole id="one" console={(r)=>{this.logger_one = r}} />

        <button onClick={event_handler_one} />

        <hr/>

        <ChromeConsole id="two" console={(r)=>{this.logger_two = r}} />

        <button onClick={event_handler_two} />

      </div>

    );

  }



  event_handler_one = () => {

    this.logger_one.log("something happen for one...");

  }



  event_handler_two = () => {

    this.logger_two.log("something happen for two...");

  }

}

Here is my proposition:

<div id="log"></div>

<input id="command" onkeyup="handleCmdEnter(event,this)"/>

And js:

var old = console.log;

var logger = document.getElementById('log');



console.log = function (message) {

  if (typeof message == 'object') {

    logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';

  } else {

    logger.innerHTML += message + '<br />';

  }

}



window.handleCmdEnter = (event, input) => {

  if(event.key=='Enter'){

      let val = input.value;

      input.value ='';

      logger.innerHTML+='<br>'+val;      



      try {

        let res = eval(val);

        logger.innerHTML+='<br>'+res;  

      } catch (e) {

        old({e});

        logger.innerHTML+='<br>EXCEPTION:'+e.message;

        logger.innerHTML+='<br>Stacktrace:'+e.stack;

      }

  } 

}



console.log('xxx');

And here is working example.

This solution doesn't include styles and use 'eval' (=evil) function. It's override "console.log" function (you can override other console functions like error, debug,... and also intercepts more console parameters using arguments).

I only give base idea above how to do it, it needs to be developed (as js library) to have more functionality but StackOverflow is go place to put such code.