Question

可以通过任何方式将自己的Chrome控制台实例作为桌面应用程序中的react组件。作为桌面应用程序，是假定我的应用程序已启动并运行

我将使用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假设引用了诸如控制台之类的对象的实例，因此我可以使用以下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元素（See Refs on 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');

这是working example。

此解决方案不包含样式，而是使用'eval'（= evil）函数。它覆盖了“ console.log”功能（您可以覆盖其他控制台功能，例如error，debug ...，还可以使用arguments截取更多控制台参数）。

我只是在上面给出了基本思路，它需要进行开发（作为js库）以具有更多功能，但是StackOverflow可以放置此类代码。

chrome js控制台：我可以将其用作桌面JS应用程序中的ES6 react js组件吗？

2 个答案: