做网页ref="/tag/156/" style="color:#C468A7;font-weight:bold;">开发，免不了天天跟 Chrome 打交道。很多人只知道按 F12 打开开发者工具，但真正用起来总觉得卡手——断点不会设、网络请求看不清、代码改了还刷新无效。其实，把 Chrome 的开发环境稍微调一调，效率能翻倍。
打开开发者工具的正确姿势
别再右键“检查”了。直接按 F12 或者 Ctrl+Shift+I（Mac 是 Cmd+Option+I），速度快得多。如果习惯停靠在右侧，可以在三个面板位置按钮之间切换，选个顺眼的布局。
让源码可编辑：启用本地覆盖（Local Overrides）
改完 HTML 或 CSS 刷新就丢？太折磨。开启 Local Overrides 就能保存修改到本地。
步骤很简单：打开开发者工具 → Sources → 左侧面板找到 Overrides 选项卡 → 点击 Select folder for overrides，选一个你电脑上的空文件夹用来存修改。授权后，页面上任何静态资源都可以右键“Save for overrides”，改完自动同步到你选的目录。
比如你发现某个按钮样式不对，直接在 Elements 面板改 CSS，保存后刷新，样式还在，调试体验立马不一样。
屏蔽缓存，看清真实请求
开发时最怕浏览器偷偷用缓存，让你以为接口没调通。勾上开发者工具 Network 面板左上角的 Disable cache，只要面板开着，缓存自动禁用。
模拟弱网和设备
用户不一定都用 WiFi，点 Network 标签旁边的下拉菜单，可以切到 Slow 3G，看看加载过程会不会白屏太久。配合 Device Toolbar（手机图标），还能模拟 iPhone、Pixel 各种屏幕尺寸，响应式布局一眼看出问题。
快速定位脚本错误
控制台报错红一片？点 Console 面板，错误信息会按来源文件和行号标清楚。点击文件名直接跳转到 Sources 面板对应代码行，加个断点就能一步步往下走。
想在特定条件停下，比如变量为 null 时，右键断点选 Edit breakpoint，输入表达式就行。
小技巧：用 console.log 也能分组
输出太多，找不着重点？试试分组打印：
console.group('用户登录流程');
console.log('开始请求');
console.log('token 获取成功');
console.groupEnd();这样日志在控制台里就是折叠展开的，结构清晰多了。
快捷键提效
- Ctrl+P（Mac: Cmd+P）：快速搜索并打开项目中的任意文件
- Ctrl+Shift+F：全局搜索所有文件内容
- Ctrl+\：在 Sources 面板中跳到当前行的下一行断点
这些功能不用装插件，Chrome 原生全支持。花半小时配一遍，后面省下的时间数不清。下次遇到页面加载慢、样式错乱、脚本报错，打开工具直接查，别再靠猜了。