文件名称：ReactMonitor:快速可视化React的组件树及其性能
文件大小：789KB
文件格式：ZIP
更新时间：2024-04-09 23:02:32
JavaScript
ReactMonitor 快速可视化React的组件树性能，以改善入门和调试 它有什么作用 通过使用ReactMonitor Chrome DevTool，无论是初学者还是经验丰富的开发人员都可以直观地表示他们正在使用的现有代码库。该工具使用React构建，将在场景后动态遍历光纤根对象，在页面上显示状态，道具，渲染时间和组件类型。 如何安装和运行 为了能够使用该应用程序，用户可以： 从下载“ ReactMonitor” Google Chrome扩展程序 导航到您将在其上运行React Monitor的React应用程序的域 打开您的Chrome开发者工具，然后选择React Monitor 现在，您可以实时查看应用程序的状态更改！ 方法2：克隆此存储库 在克隆的根目录中，运行npm build 在Chrome->扩展程序中，启用开发人员模式 选择添加新的未打包扩展名 在文件夹选择窗口中，
【文件预览】：
ReactMonitor-master
----.gitignore(27B)
----package()
--------makeTreeCreator.test.js(582B)
--------package.json(1KB)
--------treeGraphFactory.js(3KB)
--------JSONStringify.js(555B)
--------package-lock.json(131KB)
--------containerWrapper.js(470B)
--------sendContentScript.js(180B)
--------newNode.js(1KB)
--------ReactWorkTags.js(717B)
--------compareStateAndProps.js(2KB)
--------README.md(2KB)
--------treeGraphFactory.test.js(733B)
--------makeTreeCreator.js(1023B)
--------deleteParent.test.js(849B)
--------deleteParent.js(202B)
--------createTree.js(735B)
----package.json(2KB)
----package-lock.json(634KB)
----src()
--------app()
--------assets()
--------extension()
----webpack.config.js(2KB)
----__test__()
--------playButton.test.js(915B)
--------stateChange.test.js(661B)
--------helperFunctions.test.js(1KB)
--------componentsList.test.js(825B)
--------timeTravel.test.js(1014B)
--------stateAndProps.test.js(805B)
--------record.test.js(801B)
----LICENSE(1KB)
----README.md(3KB)
----uml()
--------devtools.plantuml(844B)
--------highLevelDiagram.plantuml(639B)
--------treeCreator.plantuml(1KB)
----mockData()
--------tinyFlameGraph.js(354B)
--------ticTacToeFiberRoot.js(3KB)
--------ticTacToe.js(1KB)
--------devToolData.js(2KB)
--------treeGraph.js(0B)
--------fiber.js(629B)