上一章我们学会了用各种方式打开 DevTools。但打开之后，你可能会发现一个问题：默认的 DevTools 界面不一定完全符合你的使用习惯。
比如，有的人喜欢深色主题，觉得长时间盯着浅色界面眼睛容易累；有的人习惯把 DevTools 放在屏幕右侧，有的人却喜欢放在底部；有的人希望界面显示中文，有的人则更习惯英文原版。
更重要的是，DevTools 默认的键盘快捷键不一定顺手——你可能会想把自己常用的操作绑定到更习惯的按键上。
这些问题都能通过自定义 DevTools来解决。
DevTools 提供了丰富的自定义选项，从外观主题、面板布局、界面语言，到键盘快捷键、编辑器行为，几乎所有方面都可以按你的喜好来调整。花几分钟把 DevTools 调整成自己最舒服的样子，之后每天开发都能省下不少精力。
小提示：这一章的内容非常适合边读边操作。打开 DevTools 的设置面板，跟着文章一步步调整，找到最适合你的配置。
一、如何打开设置面板？
在开始自定义之前，先要知道设置面板在哪里。
打开 DevTools 之后，有几种方式可以进入设置（Settings）：
方法一：点击齿轮图标
在 DevTools 窗口的右上角（通常在关闭按钮旁边），有一个齿轮形状的图标 ⚙️，点击它就直接进入设置面板了。
方法二：键盘快捷键
在 DevTools 获得焦点的情况下，按下以下快捷键也能快速打开设置：
Windows / Linux：按 F1
Mac：按 Fn + F1
所有平台：按 ?（问号键）
小提示：? 键在控制台面板中会失效，原因是控制台面板中命令行已自动获取焦点，按？时，？会直接作为命令行内容。
方法三：通过命令菜单
按 Ctrl + Shift + P（Win/Linux）或 Cmd + Shift + P（Mac）打开命令菜单，输入 settings 或 设置，选择对应命令即可。
打开设置后，你会看到多个标签页：Preferences（偏好设置）、Workspace（工作区）、 Experiments（实验功能）、 Ignore List（忽略列表）、 Devices（设备）、 Shortcuts（快捷键）等。本章我们主要关注 Preferences 和 Shortcuts 这两个最常用的标签页。
二、外观定制：让 DevTools 看起来更顺眼
Preferences 标签页中的 Appearance（外观）部分，控制着 DevTools 的视觉效果。
1. 主题（Theme）：深色还是浅色？
这是最常用的自定义选项。DevTools 提供了三种主题选择：
浅色主题：默认的白色背景，适合光线充足的环境。
深色主题：黑色背景搭配亮色文字，适合暗光环境，很多开发者觉得这样更“酷”且对眼睛更友好。
与 Chrome 颜色方案匹配：让 DevTools 自动跟随 Chrome 浏览器的主题颜色。
设置方法：设置 → Preferences → Appearance → Theme，在下拉菜单中选择你喜欢的主题。
更快捷的方式：打开命令菜单（Ctrl/Cmd + Shift + P），输入 dark 或 dark theme，选择“切换到深色主题”命令，按回车即可。不用进设置面板，一秒切换。
小建议：如果你经常在晚上写代码，深色主题会明显减轻眼睛的疲劳感。试试用一周深色主题，你可能就不想换回去了。
2. 面板布局（Panel Layout）：放在哪、怎么放？
DevTools 默认停靠在浏览器窗口的右侧或底部，但你可以随时调整它的位置。
调整停靠位置：
在 DevTools 右上角（齿轮图标旁边），有一个三个竖点图标，点击它，在弹窗顶部 Dock Side 右侧选择停靠位置：
停靠到底部：DevTools 显示在浏览器窗口的下方。
停靠到左侧：DevTools 显示在浏览器窗口的左侧。
停靠到右侧：DevTools 显示在浏览器窗口的右侧。
弹出为独立窗口：DevTools 变成一个独立的窗口，可以拖到另一个显示器上。
调整面板内部布局：
在 Preferences → Appearance → Panel layout 中，你可以控制面板内部窗格的排列方式：
Auto（自动） ：布局会根据 DevTools 窗口的宽度自动调整——宽的时候并排显示，窄的时候上下堆叠
垂直拆分：强制将面板窗格上下排列。
水平拆分：强制将面板窗格左右排列。
这个设置主要影响元素面板的 Styles 标签页和源代码面板的 Debugger 窗格的布局方式。
小建议：如果你使用宽屏显示器，停靠到右侧可以充分利用横向空间；如果你习惯上下分屏，停靠到底部可能更舒服。多试几种组合，找到最适合你的。
3. 界面语言（Language）：中文还是英文？
DevTools 的界面语言默认跟随 Chrome 浏览器的语言设置。但如果你想单独调整，可以在 Preferences → Appearance → Language 中选择。
支持的语言包括英语、中文、日语、韩语、法语、德语等主流语言。更改后需要重新加载 DevTools 才能生效。
更快捷的方式：打开命令菜单，输入 Chinese 或你想要的语言名称，选择对应选项即可。
小建议：对于初中级开发者，中文界面能降低学习门槛。但随着你越来越熟练，可以考虑切换回英文——因为大多数技术文档、社区讨论、错误信息都是以英文呈现的，习惯英文界面有助于你更好地融入全球开发者社区。
三、快捷键自定义：打造你自己的“快捷键体系”
DevTools 默认提供了大量键盘快捷键（我们在第七章会详细讲解）。但默认的不一定是最适合你的——也许你习惯用某个组合键做某件事，但 DevTools 把它分配给了另一个操作。
好消息是：DevTools 允许你自定义几乎任何操作的键盘快捷键。
如何自定义快捷键？
打开设置面板（Settings）。
切换到 Shortcuts（快捷键）标签页。
你会看到一个长长的列表，左边是操作名称，右边是当前的快捷键。
找到你想修改的操作，将鼠标悬停在该行上，点击出现的 Edit（修改） 按钮（铅笔图标）。
将光标置于文本框中，按下你想要的新按键组合。
如果这个组合已经被其他操作占用，DevTools 会提醒你。
点击 Check（检查） 按钮确认修改。
为未分配快捷键的操作添加快捷键
默认情况下，DevTools 并没有为所有可用操作都分配快捷键。比如，你想通过一个按键快速切换深色/浅色主题，但默认没有这个快捷键——你可以自己创建一个。
操作方法同上：在 Shortcuts 标签页中找到对应的操作（比如在 Rendering 分类下找到切换主题的相关命令），然后按照步骤设置你想要的快捷键组合。
恢复默认快捷键
如果你改乱了，或者想回到最初的状态，点击 Shortcuts 标签页右下角的恢复默认快捷键按钮即可。
小建议：不要一次性自定义太多快捷键——先改 1-2 个你最常用的操作，用一段时间觉得顺手了再慢慢扩展。快捷键的终极目标是形成肌肉记忆，而不是记一张长长的列表。
四、其他实用的自定义选项
除了外观和快捷键，Preferences 中还有不少对日常开发很有帮助的设置。
1. 启用 Ctrl/Cmd + 1-9 切换面板
在 Preferences → Appearance 中，勾选 “启用 Ctrl/Cmd + 0-9 快捷键切换面板” 。
开启后，你可以用 Ctrl + 1（Win/Linux）或 Cmd + 1（Mac）快速切换到第一个面板（元素面板），Ctrl + 2 切换到第二个面板（控制台面板），依此类推。面板的编号顺序就是标签栏从左到右的顺序。
小建议：这个功能非常实用，强烈推荐开启。记住 Ctrl/Cmd + 1 到元素面板、Ctrl/Cmd + 2 到控制台面板，就能在日常调试中省下不少鼠标点击。
2. 源代码编辑器的相关设置
在 Preferences 的 Sources（来源）部分，有一系列针对源代码面板编辑器的设置：
自动补全：在编辑器中输入代码时，自动弹出补全建议。
自动添加右括号：输入左括号或左大括号时，自动补全对应的右括号或右大括号。
括号匹配：高亮显示配对的括号、大括号和方括号。
代码折叠：允许你折叠和展开代码块，方便浏览长文件。
显示空格字符：在编辑器中用圆点显示空格、用线条显示制表符，帮助排查缩进问题。
检测缩进：自动使用源文件中的缩进风格，而不是使用默认缩进。
这些设置能让代码编辑体验更接近你习惯的代码编辑器（如 VS Code）。
3. 禁用“已暂停的状态叠加层”
当你在源代码面板中设置断点、代码执行暂停时，浏览器视口中会出现一个半透明的“Paused in debugger”叠加层。如果你觉得这个叠加层遮挡了页面内容，可以在 Preferences → Appearance 中勾选 “停用已暂停的状态叠加层” 来关闭它。
五、用命令菜单快速更改设置
最后分享一个小技巧：很多设置其实不需要进入设置面板就能修改。
打开命令菜单（Ctrl/Cmd + Shift + P），直接输入设置的名称或值，DevTools 就会自动推荐相关的设置选项。
比如：
输入 dark → 切换到深色主题。
输入 Chinese → 切换界面语言为中文。
输入 disable JavaScript → 禁用 JavaScript（我们第六章会详细讲）。
这个方法特别适合那些你知道想做什么、但不知道设置选项在哪里的情况。
小建议：把命令菜单当成 DevTools 的“全局搜索”来用。想做什么就直接搜，不用在层层菜单里翻找。
总结
在这一章中，我们学会了如何根据自己的喜好和习惯来定制 DevTools：
打开设置面板：点击齿轮图标、按 F1（Win/Linux）/ Fn + F1（Mac）、或按 ? 键。
外观定制：
主题：浅色、深色、或跟随 Chrome 配色。
面板布局：停靠位置（底部/右侧/独立窗口）和内部窗格排列。
界面语言：支持中文、英文等多种语言。
快捷键自定义：在 Shortcuts 标签页中修改任何操作的快捷键，甚至为未分配快捷键的操作创建新的快捷键。
其他实用设置：
启用 Ctrl/Cmd + 1-9 快速切换面板。
源代码编辑器的自动补全、括号匹配、代码折叠等。
关闭“已暂停的状态叠加层”。
命令菜单快速修改：不用进设置面板，直接在命令菜单中输入设置名称或值即可。
花十几分钟把 DevTools 调成自己喜欢的样子，是一件“一次投入、长期受益”的事情。从今天开始，打造属于你自己的调试环境吧。
下一章预告：我们将学习一系列 DevTools 的实用技巧——从 Logpoints 到强制 CSS 状态，从性能分析到快捷操作，让你的调试效率再上一个台阶。
本章练习
打开 DevTools 的设置面板，浏览一遍所有标签页，了解都有哪些选项可以调整。
尝试切换深色和浅色主题，感受两种配色方案的区别。然后用命令菜单的方式再切换一次。
调整 DevTools 的停靠位置（底部 → 右侧 → 独立窗口），找到你最舒服的一种。
在 Shortcuts 标签页中，找到“切换 DevTools 停靠位置”这个操作，看看它的默认快捷键是什么。如果觉得不顺手，试着改成你习惯的组合键。
开启 Ctrl/Cmd + 1-9 切换面板功能，然后用 Ctrl/Cmd + 1 切换到元素面板，Ctrl/Cmd + 2 切换到控制台面板，体验一下键盘操作的流畅感。
（选做）在 Sources 部分开启“代码折叠”功能，然后在源代码面板中找一个长文件，试试折叠和展开代码块。
