Chrome 小技巧

Chrome 浏览器有很多不为人知但非常实用的功能和技巧。

开发者工具技巧

快捷键: Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac)

功能: 快速访问开发者工具的所有功能

常用命令：

Capture full size screenshot - 截取整个页面截图
Show Console - 显示控制台
Enable local overrides - 启用本地覆盖
Clear site data - 清除站点数据
Block request URL - 阻止特定请求

2. 复制为各种格式

在 Network 面板中，右键点击请求：

Copy → Copy as cURL
Copy → Copy as Fetch
Copy → Copy as PowerShell
Copy → Copy as URL
Copy → Copy as cURL (bash)

3. 监听 DOM 变化

在 Console 中：

javascript

// 监听元素变化
const observer = new MutationObserver((mutations) => {
  console.log('DOM changed!', mutations);
});

observer.observe(document.body, {
  childList: true,
  subtree: true
});

// 停止监听
observer.disconnect();

4. 引用上次选中的元素

javascript

// $_ 引用上次计算的结果
2 + 2
// 4
$_ * 10
// 40

// $0 引用上次选中的 DOM 元素
$0
$1 // 上上次
$2 // 上上上次

// $(selector) 快速选择元素
$('button')

// $$(selector) 选择所有元素
$$('div')

// 快速获取元素的 XPath
$x('//div[@class="test"]')

5. 条件断点

在 Sources 面板中，右键点击行号 → "Add conditional breakpoint"

javascript

// 只在特定条件下暂停
condition: element.value.length > 10

// 或者使用 console.log 而不暂停
condition: console.log(element.value) || false

6. 黑盒脚本 (Blackbox Script)

跳过不想调试的第三方代码：

Settings → Blackboxing → Add pattern
添加: jquery.min.js

7. 本地覆盖 (Local Overrides)

修改线上文件并在本地生效：

1. 打开 Sources 面板
2. 右键 → Overrides → Select overrides folder
3. 选择本地文件夹
4. 修改任何文件，自动保存到本地

8. 网络节流 (Network Throttling)

模拟不同网络条件：

Network 面板 → 选择网络速度
- Offline
- Slow 3G
- Fast 3G
- Custom (自定义)

9. 设备模拟

Ctrl+Shift+M (Windows/Linux)
Cmd+Shift+M (Mac)

功能：

模拟各种设备
测试响应式设计
模拟触摸事件
修改设备参数

10. Performance 监控

Performance 面板 → 录制 → 执行操作 → 停止

可以看到：

FPS (帧率)
CPU 使用情况
网络请求
JavaScript 执行时间
渲染性能

地址栏技巧

1. 搜索引擎快捷键

直接在地址栏输入：

搜索: github cloudflare
搜索特定网站: site:docs.cloudflare.com workers ai
计算器: 123 * 456
单位转换: 100 usd to cny
时间: time new york
天气: weather beijing

2. 快速搜索标签页

Ctrl+Shift+A (Windows/Linux)
Cmd+Shift+A (Mac)

3. 从历史记录搜索

Ctrl+H (Windows/Linux)
Cmd+Y (Mac)

4. 直接搜索标签

在地址栏输入: @
然后选择: @tabs
搜索: github

页面导航技巧

1. 快速切换标签页

Ctrl+Tab (下一个标签)
Ctrl+Shift+Tab (上一个标签)
Ctrl+1-9 (跳转到第 N 个标签)

2. 重新打开关闭的标签页

Ctrl+Shift+T (Windows/Linux)
Cmd+Shift+T (Mac)

3. 关闭当前标签页

Ctrl+W (Windows/Linux)
Cmd+W (Mac)

4. 恢复上次关闭的窗口

Ctrl+Shift+N (Windows/Linux)
Cmd+Shift+N (Mac)

页面操作技巧

1. 快速查找

Ctrl+F (查找)
Ctrl+G (下一个)
Ctrl+Shift+G (上一个)

2. 查找所有匹配项

在查找框中，输入搜索词后：

点击三个点 → "Find all occurrences"
会显示所有匹配项的数量和位置

3. 快速编辑页面内容

在 Console 中输入:
document.body.contentEditable = true

现在可以直接编辑页面上的任何文本！

4. 查看页面源代码

Ctrl+U (Windows/Linux)
Cmd+Option+U (Mac)

5. 检查元素

Ctrl+Shift+C (Windows/Linux)
Cmd+Shift+C (Mac)

6. 页面缩放

Ctrl + (放大)
Ctrl - (缩小)
Ctrl 0 (重置)

7. 滚动页面

Space (向下翻页)
Shift+Space (向上翻页)
Home (跳到顶部)
End (跳到底部)

实用功能

1. 内置任务管理器

Shift+Esc (Windows/Linux)
或: More tools → Task manager

可以看到每个标签页的：

内存使用
CPU 使用
网络使用

2. 隐身模式快捷键

Ctrl+Shift+N (Windows/Linux)
Cmd+Shift+N (Mac)

3. 下载页面

Ctrl+J (Windows/Linux)
Cmd+Option+L (Mac)

4. 历史记录

Ctrl+H (Windows/Linux)
Cmd+Y (Mac)

5. 书签管理器

Ctrl+Shift+O (Windows/Linux)
Cmd+Option+B (Mac)

6. 清除浏览数据

Ctrl+Shift+Delete (Windows/Linux)
Cmd+Shift+Delete (Mac)

实验性功能

1. Chrome Flags

访问: chrome://flags/

有用的 Flag：

# 快速标签页关闭
chrome://flags/#enable-fast-tab-close

# 平行下载
chrome://flags/#enable-parallel-downloading

# 懒加载图片
chrome://flags/#enable-lazy-image-loading

# 强制暗黑模式
chrome://flags/#enable-force-dark

# 读卡器模式
chrome://flags/#enable-reader-mode

# QUIC 协议
chrome://flags/#enable-quic

# 内存节省模式
chrome://flags/#memory-saver-mode

2. Chrome 内部页面

chrome://version        # 版本信息
chrome://flags         # 实验性功能
chrome://extensions    # 扩展程序
chrome://downloads     # 下载页面
chrome://history       # 历史记录
chrome://bookmarks     # 书签
chrome://cache         # 缓存
chrome://dns           # DNS 预取
chrome://net-internals # 网络内部
chrome://gpu           # GPU 信息
chrome://components    # 组件信息
chrome://tracing       # 性能追踪
chrome://kill          # 关闭卡死的标签
chrome://crash         # 故意崩溃（测试用）

3. 隐藏的恐龙游戏

断网时访问任意网站，或直接访问: chrome://dino

解锁无限模式：

javascript

// 在 Console 中运行
Runner.prototype.gameOver = function(){}

修改速度：

javascript

Runner.instance_.setSpeed(1000)

实用代码片段

1. 查看页面所有 cookies

javascript

// 在 Console 中
document.cookie

// 或者详细信息
console.table(document.cookie.split(';').map(c => {
  const [key, value] = c.trim().split('=');
  return { key, value };
}));

2. 导出所有 localStorage

javascript

// 导出
console.log(JSON.stringify(localStorage));

// 导入
const data = JSON.parse(jsonString);
Object.keys(data).forEach(key => {
  localStorage.setItem(key, data[key]);
});

3. 查看页面加载时间

javascript

performance.timing

// 计算页面加载时间
const timing = performance.timing;
const loadTime = timing.loadEventEnd - timing.navigationStart;
console.log(`页面加载时间: ${loadTime}ms`);

4. 复制页面所有链接

javascript

// Console 中运行
copy($$('a').map(a => a.href).join('\n'))

5. 查看所有事件监听器

javascript

getEventListeners(document.body)
getEventListeners(document.querySelector('button'))

6. 监控所有 XHR 请求

javascript

// 拦截 XMLHttpRequest
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
  console.log('XHR:', method, url);
  return originalOpen.apply(this, arguments);
};

// 拦截 Fetch
const originalFetch = window.fetch;
window.fetch = function(...args) {
  console.log('Fetch:', args[0]);
  return originalFetch.apply(this, args);
};

7. 页面加载进度条

javascript

// 在 Console 中运行
const progress = document.createElement('div');
progress.style.cssText = `
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #4CAF50, #2196F3);
  transition: width 0.3s;
  z-index: 9999;
`;
document.body.appendChild(progress);

let width = 0;
const interval = setInterval(() => {
  width += Math.random() * 10;
  if (width >= 100) {
    width = 100;
    clearInterval(interval);
    setTimeout(() => progress.remove(), 500);
  }
  progress.style.width = width + '%';
}, 200);

8. 查看页面内存使用

javascript

// 在 Console 中
performance.memory

// 详细信息
console.table({
  used: `${(performance.memory.usedJSHeapSize / 1048576).toFixed(2)} MB`,
  total: `${(performance.memory.totalJSHeapSize / 1048576).toFixed(2)} MB`,
  limit: `${(performance.memory.jsHeapSizeLimit / 1048576).toFixed(2)} MB`
});

9. 页面元素截图

javascript

// 截图特定元素
async function captureElement(selector) {
  const element = document.querySelector(selector);
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const { width, height } = element.getBoundingClientRect();
  canvas.width = width * window.devicePixelRatio;
  canvas.height = height * window.devicePixelRatio;

  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

  // 需要使用 html2canvas 库
  // 这里只是示例概念
  console.log('Use html2canvas library for actual capture');
}

// 使用: captureElement('.header');

10. 自动填充表单

javascript

// 填充所有输入框
document.querySelectorAll('input[type="text"]').forEach(input => {
  input.value = 'test@example.com';
});

document.querySelectorAll('input[type="password"]').forEach(input => {
  input.value = 'password123';
});

快捷键大全

Windows/Linux

快捷键	功能
`Ctrl+T`	新建标签页
`Ctrl+W`	关闭标签页
`Ctrl+Tab`	下一个标签
`Ctrl+Shift+T`	恢复关闭的标签
`Ctrl+L`	聚焦地址栏
`Ctrl+D`	添加书签
`Ctrl+F`	页面内查找
`Ctrl+Shift+N`	新建隐身窗口
`Ctrl+Shift+Delete`	清除浏览数据
`Ctrl+U`	查看源代码
`Ctrl+Shift+I`	开发者工具
`Ctrl+Shift+C`	检查元素
`Ctrl+Shift+J`	JavaScript 控制台
`F12`	开发者工具
`F5`	刷新页面
`Ctrl+F5`	强制刷新
`Esc`	停止加载
`Space`	向下翻页
`Shift+Space`	向上翻页

Mac

快捷键	功能
`Cmd+T`	新建标签页
`Cmd+W`	关闭标签页
`Cmd+Option+I`	开发者工具
`Cmd+Option+C`	检查元素
`Cmd+Option+J`	JavaScript 控制台
`Cmd+Option+U`	查看源代码

小技巧总结

使用 Ctrl+Shift+P 打开命令菜单，快速访问所有功能
使用 $_、$0、$1 等快捷引用提高开发效率
本地覆盖功能让你修改线上文件
黑盒脚本跳过不想调试的代码
chrome://flags 中有很多实验性功能
恐龙游戏断网时可以玩
开发者工具可以截取整个页面截图
使用 copy() 函数快速复制数据
条件断点只在满足条件时暂停
使用 Network 面板的 Block 功能阻止特定请求

Chrome 小技巧 ​

开发者工具技巧 ​

1. 命令菜单 (Command Menu) ​

2. 复制为各种格式 ​

3. 监听 DOM 变化 ​

4. 引用上次选中的元素 ​

5. 条件断点 ​

6. 黑盒脚本 (Blackbox Script) ​

7. 本地覆盖 (Local Overrides) ​

8. 网络节流 (Network Throttling) ​

9. 设备模拟 ​

10. Performance 监控 ​

地址栏技巧 ​

1. 搜索引擎快捷键 ​

2. 快速搜索标签页 ​

3. 从历史记录搜索 ​

4. 直接搜索标签 ​

页面导航技巧 ​

1. 快速切换标签页 ​

2. 重新打开关闭的标签页 ​

3. 关闭当前标签页 ​

4. 恢复上次关闭的窗口 ​

页面操作技巧 ​

1. 快速查找 ​

2. 查找所有匹配项 ​

3. 快速编辑页面内容 ​

4. 查看页面源代码 ​

5. 检查元素 ​

6. 页面缩放 ​

7. 滚动页面 ​

实用功能 ​

1. 内置任务管理器 ​

2. 隐身模式快捷键 ​

3. 下载页面 ​

4. 历史记录 ​

5. 书签管理器 ​

6. 清除浏览数据 ​

实验性功能 ​

1. Chrome Flags ​

2. Chrome 内部页面 ​

3. 隐藏的恐龙游戏 ​

实用代码片段 ​

1. 查看页面所有 cookies ​

2. 导出所有 localStorage ​

3. 查看页面加载时间 ​

4. 复制页面所有链接 ​

5. 查看所有事件监听器 ​

6. 监控所有 XHR 请求 ​

7. 页面加载进度条 ​

8. 查看页面内存使用 ​

9. 页面元素截图 ​

10. 自动填充表单 ​

快捷键大全 ​

Windows/Linux ​

Mac ​

推荐扩展 ​

开发相关 ​

效率相关 ​

网络相关 ​

小技巧总结 ​

Chrome 小技巧

开发者工具技巧

1. 命令菜单 (Command Menu)

2. 复制为各种格式

3. 监听 DOM 变化

4. 引用上次选中的元素

5. 条件断点

6. 黑盒脚本 (Blackbox Script)

7. 本地覆盖 (Local Overrides)

8. 网络节流 (Network Throttling)

9. 设备模拟

10. Performance 监控

地址栏技巧

1. 搜索引擎快捷键

2. 快速搜索标签页

3. 从历史记录搜索

4. 直接搜索标签

页面导航技巧

1. 快速切换标签页

2. 重新打开关闭的标签页

3. 关闭当前标签页

4. 恢复上次关闭的窗口

页面操作技巧

1. 快速查找

2. 查找所有匹配项

3. 快速编辑页面内容

4. 查看页面源代码

5. 检查元素

6. 页面缩放

7. 滚动页面

实用功能

1. 内置任务管理器

2. 隐身模式快捷键

3. 下载页面

4. 历史记录

5. 书签管理器

6. 清除浏览数据

实验性功能

1. Chrome Flags

2. Chrome 内部页面

3. 隐藏的恐龙游戏

实用代码片段

1. 查看页面所有 cookies

2. 导出所有 localStorage

3. 查看页面加载时间

4. 复制页面所有链接

5. 查看所有事件监听器

6. 监控所有 XHR 请求

7. 页面加载进度条

8. 查看页面内存使用

9. 页面元素截图

10. 自动填充表单

快捷键大全

Windows/Linux

Mac

推荐扩展

开发相关

效率相关

网络相关

小技巧总结