Консоль chrome js: могу ли я использовать ее как компонент ES6 реагировать на js в настольном приложении JS?

Question

Можно ли использовать собственный экземпляр консоли Chrome в качестве компонента реакции в моем приложении desktop . Будучи рабочим столом , приложение предполагает, что мое приложение запущено и работает

• Я буду использовать Chrome
• Я могу написать и установить плагины Chrome.
• Я могу создать свой собственный браузер на основе фреймворка, такого как CEF C # https://github.com/cefsharp/CefSharp/ или https://electronjs.org

Код для иллюстрации того, что я ищу на стороне JS-скрипта моего приложения:

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 и this.logger_two предполагается, что они ссылаются на экземпляры объекта, такие как console , поэтому я могу использовать этот API: https://developers.google.com/web/tools/chrome-devtools/console/console-reference

Мне нужно получить ссылку на экземпляры консоли Chrome, а не на пользовательскую замену консоли. Это важно, поскольку мне нужны все эти замечательные функции, доступные для разработчиков js, но для другой цели - наблюдения и понимания поведения моей системы.

Answer 1

ПРИМЕЧАНИЯ

• Объект window.console является нативной реализацией, которую нельзя создать , так как нет функции конструктора или класса . Но это нормально, потому что ваши «два» регистратора могут без проблем использовать один и тот же window.console.

• Структура <ChromeConsole ref={(r)=>{this.logger_one = r}} /> будет хранить в this.logger_one ссылку на элемент DOM JSX ( См. Ссылки на React docs ), поэтому она не будет ссылкой, которой мы можем манипулировать. Но это нормально, потому что мы можем использовать любой другой атрибут.

---

Вы можете использовать функциональный компонент для определения свойства (пример console) и использовать его для возврата окна консоли:

export default const ChromeConsole = ({ id, console }) => {
  console(window.console);
  return (<div data-logger-id={id} />);
}

Используйте его тогда как:

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...");
  }
}

Answer 2

Вот мое предложение:

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

И 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');

А вот рабочий пример .

Это решение не включает стили и использует функцию 'eval' (= зло).Это переопределение функции console.log (вы можете переопределить другие функции консоли, такие как error, debug, ..., а также перехватывает другие параметры консоли, используя arguments).

Выше я лишь даю базовую идею о том, как это сделать, ее нужно разработать (как библиотеку js), чтобы иметь больше функциональных возможностей, но StackOverflow необходим для размещения такого кода.