如何在 Chrome Devtools 中将 CSS 样式部分移动到底部？

Question

当我在 Google Chrome 上进行检查时，我同时看到了 HTML 和 CSS 部分，如下所示。

如何将CSS部分移动到底部，同时保留HTML部分在上面，如下所示？

Answer 1

单击钉子 > 将“面板布局”设置为水平

这是您要水平设置面板的位置 希望对你有帮助。

Answer 2

今天晚上我也有同样的问题。我找到的所有答案都试图描述如何移动整个开发工具面板。但你和我真正想要的是调整内部面板。

这就是我所做的：

1. 单击开发者工具右上角的设置GEAR。这是那个看起来像甜甜圈的小东西。这将打开全屏 SETTINGS 面板。
2. 单击首选项选项（如果尚未选择）。
3. 在外观选项组中，查找面板布局下拉列表。
4. 将面板布局选择更改为水平。

今晚对我来说就是这样。希望对你有帮助。

抱歉，我不包括屏幕截图 - 我必须回去工作！

Answer 3

首先，您需要单击 3 个点。然后您选择所需的底座一侧。

Answer 4

1：右键单击，打开检查

2：点击右上角的“齿轮图标” （首选项菜单）

3：左上角的首选项选项卡，选择“水平” 对于“面板布局”

4：在主检查中关闭首选项菜单
窗口，关闭控制台选项卡

5：HTML 元素将位于菜单顶部，CSS 选择器将位于菜单底部

Answer 5

设置-首选项-外观-面板布局-“垂直”

使用 chrome v120，它对我有用。

Answer 6

您需要点击devTools右侧的3个点并选择dock side