javascript - 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假设引用控制台等对象的实例，以便我可以使用此 API：https ://developers.google.com/web/tools/chrome-devtools/console/console-reference

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

标签： javascriptreactjsgoogle-chrome-devtools

Answer 1

笔记

• 该window.console对象是无法实例化的本机实现，因为没有可用的构造函数或类。但这很好，因为您的“两个”记录器可以window.console毫无问题地使用相同的记录器。

• 该结构<ChromeConsole ref={(r)=>{this.logger_one = r}} />将存储在this.logger_one对 DOM JSX 元素的引用中（请参阅 React 文档的参考资料），因此它不是我们可以操作的引用。但这很好，因为我们可以使用任何其他属性。

---

您可以使用功能组件来定义属性（示例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...");
  }
}