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

【问题标题】：How to move the CSS Styles part to the bottom in Chrome Devtools?如何在 Chrome Devtools 中将 CSS 样式部分移动到底部？
【发布时间】：2022-01-02 08:30:01
【问题描述】：

当我在谷歌浏览器上进行检查时，我有 HTML 和 CSS 部分，如下所示。

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

【问题讨论】：

这能回答你的问题吗？ How to reposition Chrome Developer Tools

标签： css google-chrome styles google-chrome-devtools inspect

【解决方案1】：

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

希望对你有所帮助。

【讨论】：

成功了！非常感谢！

【解决方案2】：

首先，您需要单击 3 个点。然后你选择你想要的码头边。

【讨论】：

这个选项会将整个控制台移动到底部。我需要的是仅将 CSS 部分移动到 HTML 的底部，如我在屏幕截图中所述。我不想改变整个控制台的横向视图。

【解决方案3】：

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

这是我所做的：

点击开发者工具右上角的设置GEAR。这是一个看起来像甜甜圈的小东西。这将打开一个全屏 SETTINGS 面板。
点击PREFERENCES选项（如果尚未选择）。
在 APPEARANCE 选项组中，查找 Panel layout 下拉菜单。
将面板布局选择更改为水平。

今天晚上我做到了。希望对你有帮助。

抱歉，我不包括屏幕截图——我得回去工作了！

【讨论】：

“我需要回去工作”部分是不必要的。您无需为不包括屏幕截图而道歉，因为提问者没有明确要求。不谴责你，只是给出一些如何回答的提示。除此之外，干得好！
谢谢你，克拉克！祝你工作顺利，伙计！您可以从@alexandrupineda 找到相同的答案

【解决方案4】：

您需要单击 devTools 右侧的 3 点并选择停靠端

【讨论】：