布局模式

1DevTool 让你以三种不同的布局模式排列面板。每种模式都针对不同类型的工作设计。你可以随时在它们之间切换而不会丢失打开的内容 —— 你的面板只是重新排列以适应新布局。

三种布局模式

2×2 网格

网格模式将主区域分为四个相等的象限。每个象限容纳一个面板，总共可同时看到四个面板。

最适合： 并行运行多个 AI agent。当 Claude Code 在一个终端中处理前端，Codex 在另一个终端中重构后端，Browser 面板预览结果时，2×2 网格让你同时观看所有。

这是你首次打开 1DevTool 时的默认布局，因为并行 agent 工作是应用设计的核心。

列视图

列视图将主区域分为两个并排的面板 —— 左列和右列。每列占据屏幕的一半。

最适合： 专注的双面板工作。常见设置是左侧终端和右侧浏览器，因此你可以向 agent 输入提示并立即看到结果渲染。另一个流行的组合是 Terminal + Git，因此你可以在 agent 提交更改时审查 diff。

全屏

全屏模式将单个面板扩展到填充整个主区域。所有其他面板被隐藏（但仍在运行）。

最适合： 深度专注。当你需要阅读长 AI 输出、编写详细提示或检查复杂的数据库结果时，全屏消除所有干扰。再次按快捷键立即返回你之前的布局。

如何切换布局模式

有两种切换方式：

1. 点击主区域顶部工具栏中的布局图标。 它按顺序循环三种模式。
2. 使用键盘快捷键 Mac 上的 Cmd+Shift+L 或 Windows/Linux 上的 Ctrl+Shift+L。

两种方法在任何时候都有效，即使面板已聚焦且你正在输入中间。

提示： 如果你想要临时聚焦一个面板而不更改布局，只需按 Cmd+Shift+F（Mac）或 Ctrl+Shift+F（Windows）将活跃面板全屏，然后再次按它返回。

布局预设

一旦你以你喜欢的方式排列了面板，你可以将其保存为 布局预设，以便一键返回。

保存预设：

1. 按你想要的方式排列面板。
2. 点击工具栏中的布局图标打开布局菜单。
3. 选择 Save as preset 并给它一个名称（例如 "Agent sprint" 或 "Review mode"）。

保存的预设出现在布局菜单顶部。点击任何预设名称立即恢复该排列，包括哪些面板类型打开以及它们的位置。

预设按项目保存，因此你可以为不同的代码库设置不同的排列而不会相互干扰。