对于扩展React-dev工具，如何在chrome-dev-menu中水平对齐选项卡，而不是垂直对齐？

Question

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

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

调试屏幕在两个垂直之间划分。

但是，我正在关注一个教程，其中这些菜单是水平划分的，与我的菜单相比，它们似乎更有效且更具可读性。

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

但是我的屏幕空间由于这样的垂直划分而浪费了，

我还在底部尝试了停靠（调试器菜单），但可读性更高。

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

编辑1：获得解决方案后。

增加字体大小后，屏幕没有垂直拆分，我得到的chrome-dev-tools-screen与我的老师的屏幕相同。

Answer 1

当您减小dev-tools窗口大小时，会发生垂直分割。 在此github页面上描述了此功能： https://github.com/facebook/react-devtools/pull/541

以下是显示该视频的视频： https://www.youtube.com/watch?v=RdKVJEy41M4

Answer 2

您可以在Chrome 87中水平拆分标签页（并查看其中之一）。右键点击菜单中的网络，然后选择“移至底部”