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

Question

有什么方法可以让我自己的 Chrome 控制台实例作为我的 桌面 应用程序中的反应组件。作为桌面应用程序假定我的应用程序启动并运行

• 我会用 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 元素（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 可以放置这样的代码。