2

我正在构建 ReactApp,并使用 React-Dev-Tools 进行调试,

在测试组件的状态时,它并排显示两个菜单,在<React/> code状态值的左侧和右侧。

截屏

调试屏幕垂直分为两部分。

但是,我正在关注一个教程,其中这些菜单是水平划分的,与我的相比,它们看起来更高效且更具可读性。

由于水平对齐,导师的屏幕 = 更具可读性的代码。

截图2

但是我的屏幕空间因为这样的垂直划分而被浪费了,

截图3

我还在底部尝试了停靠(调试器菜单),但它更具可读性。截图4

尽管我在调试菜单中重置了设置,但如何在 chrome 工具中水平对齐两个菜单/选项卡?

编辑1:得到解决方案后。

增加字体大小后,屏幕没有垂直分割,我得到了和我导师一样的 chrome-dev-tools-screen。

截图5

4

2 回答 2

1

当您减小开发工具窗口大小时,会发生垂直拆分。此 github 页面上描述了此功能: https ://github.com/facebook/react-devtools/pull/541

这是显示它的视频: https ://www.youtube.com/watch?v=RdKVJEy41M4

于 2019-04-02T12:31:14.330 回答
0

您可以在 Chrome 87 中水平拆分选项卡(并查看其中一个)。右键单击菜单中的网络,然后选择“移至底部”

在其他选项卡下移动任何选项卡

于 2020-11-21T04:12:45.873 回答