Reactjs 对于扩展开发工具，如何在chrome开发菜单中水平对齐选项卡，而不是垂直对齐？

我正在构建ReactApp，并使用ReactDev工具进行调试

测试组件状态时，它会并排显示两个菜单，分别位于左侧

code

和右侧的状态值

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

但是，我遵循的是一个教程，其中这些菜单是水平划分的，与我的相比，它们似乎更高效、更可读

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

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

我还尝试了底部的dock（调试器菜单），但它更可读

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

编辑1：获得解决方案后

在增加字体大小后，屏幕不再垂直分割，我得到了和我导师一样的chrome开发工具屏幕

---

当您减小“开发工具”窗口大小时，会发生垂直拆分。 此github页面介绍了此功能：

下面是显示它的视频：

---

您可以在Chrome 87中水平拆分选项卡（并查看其中一个）。右键单击菜单中的网络并选择“移动到底部”

---

感谢您的解释，我检查了屏幕宽度低于965px时，屏幕垂直分割。但当我通过

CTRL+

更改缩放级别时，它并没有在965px处拆分。我还添加了resulting-screen.TLDR的屏幕截图

ctrl++

，要获得垂直拆分，也可以先在调试屏幕中单击，然后通过

ctrl++

增加屏幕大小，而不增加浏览窗口的大小。