react-devtool看消息缓存与转发机制（electron版）

Posted 2021-02-14 breakdown

 electron

httpServer.on(‘request‘, (req, res) => {
    // Serve a file that immediately sets up the connection.
    var backendFile = readFileSync(join(__dirname, ‘backend.js‘));
    //res.end(backendFile + ‘
;ReactDevToolsBackend.connectToDevTools();‘);
    res.end(backendFile );
  });

  　

  在chrome 插件下的通信调试不够透明，且chrome 的插件特别是开发工具界面几乎无法调试。 看到了react-devtools 也提供electron 版本的调试工具。 正好学习一下。

   react-devtools-core/standalone.js : 渲染进程js. (websocket server 和 调试界面)

  react-devtools/app.js：主进程js

 react-devtools-core/src/backend.js： 网页加载的js。(解析__REACT_DEVTOOLS_GLOBAL_HOOK__ 钩子变量， 发送消息给websocket 服务器， 这里需要手动引入，chrome插件版可以自动注入)