Chrome 不只是“一个浏览器”，对程序员来说它是最强大的开发工具箱、性能分析器和临时运行环境。下面把我常用且实用的技巧汇总成一份清单——覆盖调试、性能、安全、效率、自动化与快捷键，读完你能马上用上，工作效率立刻提升。

风格贴近开发者实战，直接干货 + 可复制操作。建议收藏（Ctrl/Cmd+D）。

一、必学的 DevTools 技巧（调试与定位）

  1. 打开方式：F12 或 Ctrl/Cmd + Shift + I。面板会记住上次的 docking（停靠）位置。
  2. 元素选择直接点网页：Ctrl/Cmd + Shift + C，悬停即可查看 DOM / CSS。
  3. 实时编辑 CSS 与 DOM：Elements 面板双击样式或文本，修改能即时预览，便于调试样式问题。
  4. 覆盖（Overrides）/ Workspaces：把本地项目映射到 DevTools，直接保存修改到本地文件（适合快速调试前端）。
  5. Network 面板 — 按域名/类型过滤：快速查看XHR/Fetch/API请求，右键可复制 Request/Response 内容或“Copy as fetch”。
  6. 按请求重放（Replay XHR）：Network 里右键请求 → Replay XHR，便于调试同一接口。
  7. Throttling（网络/CPU 模拟）：在 Network 或 Performance 中模拟 3G、4G 或慢CPU，测试页面在低端设备的表现。
  8. 断点调试 JS（含条件断点）：Sources → 点击行号加断点；右键断点设置条件表达式（仅在满足时触发）。
  9. XHR/Fetch 断点：Sources → Event Listener Breakpoints / XHR/fetch 中断，方便抓取接口发起时机。
  10. DOM breakpoint（元素变化断点）：右键元素 → Break on → subtree modifications，定位 JS 操作 DOM 的代码。
  11. 黑盒脚本（Blackbox scripts）：把第三方库标记为黑盒，跳过其堆栈，调试时更专注自己代码。
  12. 性能剖析（Performance）：录制交互并分析长任务、布局抖动、JS执行瓶颈与帧率问题。
  13. Lighthouse 一键做性能/可访问性/SEO 报告：在 Audits 或 Lighthouse 面板生成可执行建议报告。
  14. 捕获堆快照（Memory）：定位内存泄漏（比较快照，找 Detached DOM 等）。
  15. 覆盖（Coverage）查看未使用的JS/CSS：Performance → Coverage 或 Command Menu 搜 Coverage，找到可以删减的代码。

二、快速生产力+快捷键（节省时间）

  1. 快速切换标签：Ctrl/Cmd + Tab 或 Ctrl/Cmd + 1..9 快跳到指定标签。
  2. 在地址栏直接执行 JavaScript：在 Omnibox 输入 javascript:alert(document.title)（注意安全）。
  3. 直接搜索页面文本并高亮所有匹配项：Ctrl/Cmd + F，按 Enter 跳下一个。
  4. 书签栏显示所有项（Ctrl/Cmd+Shift+B 切换），把常用 snippet、DevTools shortcut 存为书签。
  5. 打开书签时在新标签里：中键点击或 Ctrl/Cmd + 点击。
  6. 关闭多个标签快速恢复：误关标签用 Ctrl/Cmd + Shift + T 恢复最近关闭的标签。
  7. 一次打开多个书签：书签文件夹右键 → Open all (在新窗口/新标签)。
  8. 分屏窗口并行调试：Windows/Mac 系统自带窗口分屏，Chrome 支持独立进程隔离页面崩溃。

三、自动化与脚本化（提高重复任务效率）

  1. 用 Copy as fetch 得到可执行 JS 请求代码：Network → 右键请求 → Copy → Copy as fetch，直接粘到控制台运行。
  2. Snippets（控制台小脚本）：Sources → Snippets，写常用脚本（抓取数据、DOM 快速修改），可保存复用并直接 run。
  3. Command Menu（命令面板）：Ctrl/Cmd + Shift + P，快速搜索 DevTools 命令（Timing、Screenshots、Throttling 等）。
  4. Remote Debugging（远程调试移动设备）：Chrome 支持通过 --remote-debugging-port=9222 与 USB 调试连接 Android 设备，便于移动端排查。
  5. Headless Chrome / Puppeteer 自动化脚本：用于 CI/CD 或无头抓取（Puppeteer 比 Selenium 更轻量、速度更快）。

四、隐蔽但有用的设置与 Flags（进阶）

  1. 禁止图片/字体加载提升抓取速度：设置 → 隐私与安全 → 网站设置 → 限制图片，也可用扩展或 DevTools 的 Network Throttling/Filtering。
  2. Chrome Flags（chrome://flags）：启用实验性功能（如 Parallel downloading、Quic），注意稳定性与安全性。
  3. 启动参数（命令行）常用项：
  • --headless=new（无头模式，新 headless 更稳定）
  • --disable-gpu --no-sandbox --disable-dev-shm-usage（在 Docker 上常用）
  • --remote-debugging-port=9222（远程调试）
  1. Profiles（多用户/多会话）：把不同账号、Cookie、浏览数据分开，便于同时调试登录态差异。

五、安全、网络与隐私相关（程序员必须知道）

  1. 查看并导出 Cookie / localStorage / sessionStorage：Application 面板可查看、修改、导出，便于复现登录态。
  2. 模拟慢网络与网络丢包：Network 面板中模拟带宽限制与 Offline，测试容错逻辑。
  3. 证书与 HTTPS 问题：Security 面板查看证书链，遇到自签名证书需在系统/浏览器信任，抓包工具 (Charles/mitmproxy) 需要安装 CA。
  4. 拦截与修改请求：用 DevTools 的 Request Blocking 或 Chrome 插件（Requestly）临时 mock 返回或替换请求数据。

六、性能与内存排查秘诀

  1. 查找长任务（Long Tasks）：Performance 面板会标记 >50ms 的长任务，优化 JS 拆分与懒加载。
  2. 检测大体积资源：Network 列表按 Size 排序，找出大图片/未压缩 JS。
  3. 开启 Coverage 找出死代码：去掉未使用脚本或 CSS，减少首屏加载。
  4. 利用 Lighthouse 自动给出优化建议：包括首屏时间、可访问性、最佳实践。

七、扩展（Extensions）与工具推荐（提高效率）

  1. HTTP 请求/抓包：Postman / RESTer（用于快速构造并测试 API）。
  2. 临时修改响应/请求：Requestly（模拟后端接口）、ModHeader（修改 header）。
  3. 前端开发便利：React/Redux/Angular/Vue DevTools（框架专用调试）。
  4. 截图与录制：Full Page Screen Capture、Loom（录屏）或 DevTools 的 Capture full size screenshot。
  5. 密码/会话管理：使用浏览器内置或密码管理器（注意安全）。

八、日常维护与问题解决小贴士

  1. 遇到奇怪行为先试 Incognito（无扩展环境）：可以快速排除扩展冲突。
  2. 清理缓存/Hard Reload：刷新时按住 Shift 点击刷新或在 Network 面板勾选 Disable cache，然后刷新。
  3. 卡顿/崩溃：进入 chrome://memory-redirect/ 或 chrome://tracing 查看性能消耗。
  4. 多进程隔离：每个 tab/extension 通常在单独进程，调试 crash 时查看 Task Manager（Shift + Esc）。
  5. 浏览器恢复/备份：导出书签和设置，或使用 Google 帐号同步（注意隐私）。

九、脚本与小工具（复制即用）

快速保存页面为 HTML（控制台 Snippet）

在 DevTools → Snippets 新建并运行：

// save_page.js - 保存当前完整 HTML 到下载
(function(){
  const html = document.documentElement.outerHTML;
  const blob = new Blob([html], {type: 'text/html'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = location.hostname + '.html';
  a.click();
})();

从页面批量抓取链接（Console 一键运行）

// 把当前页面所有链接导出为数组
const links = Array.from(document.querySelectorAll('a'))
  .map(a => ({text: a.innerText.trim(), href: a.href}))
  .filter(x => x.href);
console.log(links);

十、结语：把浏览器当作你的“开发平台”

Chrome 远不止“浏览网页”的工具。把 DevTools、Snippets、Profiles、Remote Debugging、Headless、Puppeteer/Puppeteer-core 等组合起来，你能把问题快速闭环：从抓包、调试到自动化重放乃至性能优化与 CI 集成。

# chrome # 前端
Logo
广州城市开发者社区

欢迎加入我们的广州开发者社区，与优秀的开发者共同成长！

更多推荐

下《刚刚问世》系列初窥篇-Java+Playwright自动化测试-28- 操作单选和多选按钮 - 中篇（详细教程）R

对于外部地址 (aAddr, aPort)，只有当内部设备已经向 (aAddr, aPort)发送过数据时，NAT 设备才会将来自 (aAddr, aPort)的数据转发给 (iAddr, iPort)。在 NAT 设备中，维护着一个映射表，记录了私有 IP 地址和端口到公网 IP 地址和端口的映射关系。对于外部地址 (aAddr, aPort)，只有当内部设备已经向 (aAddr, aPort)

avatar 广州城市开发者社区
cover

Parlant框架详解：用自然语言构建可控LLM智能体 | 程序员必学

avatar 广州城市开发者社区

第71篇：AI+能源：智能电网、新能源预测与节能优化

摘要：本文系统性地深入探讨人工智能在能源领域的革命性应用。我们首先解析智能电网（Smart Grid）的核心机制——AI如何融合实时电力数据（发电、输电、配电、用电）、气象信息、用户行为，通过强化学习（Reinforcement Learning）与优化算法（如线性规划、混合整数规划），实现电力的动态调度、供需平衡、故障预测与自愈，构建更安全、高效、弹性的电力系统。

avatar 广州城市开发者社区