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

是将我自己的Chrome控制台实例作为我的桌面应用程序中的react组件的任何方法。作为桌面应用程序假定要启动并运行我的应用程序

• 我会用铬
• 我可以编写和安装Chrome插件
• 我可以基于CEF C#或

用于说明我在应用程序的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=null；
this.logger_two=null；
}
render（）{
返回(
{this.logger_one=r}}/>

{this.logger_two=r}}/>
)
}
事件处理程序一（）{
logger_one.log（“某件事发生在某人身上…”）；
}
事件处理程序二（）{
logger_two.log（“两个人发生的事情…”）；
}
}

this.logger\u one

和

this.logger\u two

假设引用对象的实例，如控制台，因此我可以使用此API：

---

我需要获得对Chrome控制台实例的引用，而不是定制的控制台替换。这很重要，因为我确实需要js开发人员可以使用的所有优秀功能，但目的不同——观察和理解我的系统行为。

以下是我的建议：

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

var old=console.log；
var logger=document.getElementById（'log'）；
console.log=函数（消息）{
如果（消息类型=='object'）{
logger.innerHTML++=（JSON&&JSON.stringify？JSON.stringify（message）：message）+'
'；
}否则{
logger.innerHTML+=message+'
'；
}
}
window.handleCmdEnter=（事件，输入）=>{
如果（event.key=='Enter'）{
设val=input.value；
input.value=''；
logger.innerHTML+='
'+val；
试一试{
设res=eval（val）；
logger.innerHTML+='
'+res；
}捕获（e）{
旧的（{e}）；
logger.innerHTML+='
异常：'+e.message；
logger.innerHTML+='
Stacktrace:'+e.stack；
}
} 
}
console.log（'xxx'）；

这是

此解决方案不包括样式并使用“eval”（=evil）函数。它是覆盖“console.log”函数（您可以覆盖其他控制台函数，如

error

，

debug

，…并使用

参数截取更多控制台参数）

我只给出了上面的基本想法，它需要开发（作为js库）才能有更多的功能，但是StackOverflow是放置这些代码的地方。
注意


window.console
对象是一个本机实现，不能实例化，因为没有构造函数或类可用。但这很好，因为您的“两个”记录器可以使用相同的
window.console
而不会出现问题

结构
{this.logger\u one=r}/>
将在
this.logger\u one
中存储对domjsx元素（）的引用，因此它将不是我们可以操作的引用。但这很好，因为我们可以使用任何其他属性



您可以使用功能组件定义属性（例如
console
），并使用它返回窗口控制台：

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

export default const chromeconosole=（{id，console}）=>{
控制台（window.console）；
返回（）；
}

然后将其用作：

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

类应用程序扩展组件{
构造函数（）{
超级（）；
this.logger_one=null；
this.logger_two=null；
}
render（）{
返回(
{this.logger_one=r}}/>

{this.logger_two=r}}/>
);
}
事件处理程序一=（）=>{
这个.logger_one.log（“某件事发生在某个人身上…”）；
}
事件处理程序二=（）=>{
这个.logger_two.log（“两个人发生的事情…”）；
}
}
“某些事件”比如什么？虽然不是Chrome控制台的实际实例，但您可以复制它的功能。。。这方面的一个示例是此服务器上堆栈代码段功能中的console divsite@PatrickEvans我听不懂你的暗示。这个问题会有悬赏，所以请详细说明。我需要在我的应用程序主窗口中有多个记录器，并具有一些复杂的功能。仅仅拥有textarea实例只是一个初始选项。是的，显然可以创建一个基于某种状态漂亮地显示字符串的组件。你是在要求图书馆推荐书，希望有人能为你写推荐书，还是你有一个特别的问题？很不幸，这在这里被认为是离题的——看吧，但我确实需要Chrome控制台。我已经更新了这个问题。抱歉搞混了