tags: Chrome 浏览器 Google 开发者工具 扩展

Google Chrome 浏览器

Google Chrome 是由 Google 开发的一款免费、跨平台的网络浏览器。自 2008 年首次发布以来，Chrome 凭借其极速的页面加载、简洁的界面设计和强大的扩展生态，已经成为全球使用最广泛的浏览器。

Chrome 基于开源项目 Chromium 构建，使用 Blink 渲染引擎和 V8 JavaScript 引擎，可在 Windows、macOS、Linux、Android 和 iOS 上运行。

快速上手

全平台安装包下载

为了方便网络环境受限或需要批量部署的用户，以下整理了 Google Chrome 官方最新安装包（Standalone Installer）的直接下载地址。所有链接均指向 Google 官方服务器，请放心下载。

Windows 版本

macOS 版本

macOS 版本现已提供 Universal 通用安装包，同时原生支持 Intel 芯片与 Apple Silicon (M1/M2/M3) 芯片，下载后系统会自动适配。

Linux 版本

首次运行

首次启动 Chrome 时，你可以：

• 登录 Google 账号以启用同步
• 设置 Chrome 为默认浏览器
• 选择是否发送使用统计信息
• 自定义新标签页的外观

导入数据

你可以从其他浏览器导入书签、密码、历史记录和搜索引擎设置。Chrome 支持从以下浏览器直接导入：

打开 chrome://settings/importData 或通过菜单 → 书签 → 导入书签和设置 即可开始导入。

核心功能

智能地址栏（Omnibox）

Chrome 的地址栏不仅仅是输入网址的地方，它还是一个功能强大的多合一搜索框：

• 直接搜索：输入关键词后按回车，直接使用默认搜索引擎搜索
• 网址自动补全：根据你的浏览历史和书签智能补全网址
• 数学计算：输入 2+2 或 sqrt(144) 直接显示计算结果
• 单位转换：输入 100 USD to CNY 直接显示汇率转换
• 天气查询：输入 天气 或 weather 查看当前天气
• 站内搜索：输入网站域名后按 Tab，可直接使用该网站的搜索功能

标签页管理

Chrome 提供了丰富的标签页管理功能：

标签页分组

右键点击标签页，选择"向组中添加标签页"，可以创建颜色标记的标签组，方便整理相关页面。

┌──────────────────────────────────────────────────────────┐
│  [🔴 工作 ▾] Tab1  Tab2  │ [🔵 学习 ▾] Tab3 │  Tab4  │  +  │
└──────────────────────────────────────────────────────────┘
  ↑ 标签组可折叠/展开，节省标签栏空间

标签页搜索

当打开了大量标签页时，点击标签栏右上角的 🔍 搜索按钮（或按 Ctrl+Shift+A），可以快速搜索和切换到任意打开的标签页。

固定标签页

右键点击标签页 → "固定"，标签页会缩小为图标固定在标签栏左侧，不会被意外关闭。

跨设备同步

登录 Google 账号后，以下数据将自动在所有设备间同步：

• 📑 书签
• 🔐 密码与通行密钥（Passkeys）
• 📋 历史记录
• ⚙️ 设置与偏好
• 🧩 扩展程序
• 📭 打开的标签页
• 💳 付款信息与地址
• 📖 阅读列表

// 同步状态可以通过 chrome://sync-internals/ 页面查看
// 每种数据类型的同步状态示例：
{
  "bookmarks":    { "status": "synced", "count": 342 },
  "passwords":    { "status": "synced", "count": 89 },
  "extensions":   { "status": "synced", "count": 12 },
  "open_tabs":    { "status": "synced", "count": 7 },
  "preferences":  { "status": "synced" }
}

翻译功能

Chrome 内置了 Google 翻译，当你访问外语网页时：

1. 地址栏右侧会出现翻译图标
2. 点击即可将整个页面翻译为你的首选语言
3. 支持 100+ 种语言之间的互译
4. 可在设置中配置始终翻译或从不翻译特定语言

PDF 阅读器

Chrome 内置了功能完善的 PDF 查看器，支持：

• 文档大纲导航
• 文本搜索和选取
• 页面缩放与适应屏幕
• 双页视图
• 表单填写与签名
• 添加注释和高亮

投屏功能

通过 Chrome 内置的 Google Cast 功能，你可以将标签页、整个桌面或媒体文件投射到支持 Chromecast 的设备上。点击菜单 → "投射…" 即可开始。

隐私与安全

安全浏览

Chrome 的安全浏览功能可以保护你免受以下威胁：

安全浏览提供三种保护级别：

密码管理器

Chrome 内置的 Google 密码管理器 功能：

• 自动保存和填充网站登录密码
• 生成强随机密码
• 检查密码是否在数据泄露中被暴露
• 支持通行密钥（Passkeys）— 更安全的无密码登录方式
• 密码在所有登录 Chrome 的设备间加密同步

密码安全检查结果示例：
┌─────────────────────────────────────┐
│  🔐 密码检查                         │
├─────────────────────────────────────┤
│  ⚠️  已泄露的密码          3 个      │
│  ⚠️  重复使用的密码        7 个      │
│  ⚠️  弱密码               2 个      │
│  ✅  安全的密码           77 个      │
└─────────────────────────────────────┘

无痕模式

按 Ctrl+Shift+N（macOS：⌘+Shift+N）打开无痕窗口。在无痕模式下：

• ✅ 不会保存浏览历史、Cookie 和网站数据
• ✅ 不会保存表单中填写的信息
• ✅ 关闭窗口后自动清除会话
• ❌ 不会隐藏你的活动（对 ISP、雇主或网站本身仍可见）
• ❌ 不是匿名浏览（如需匿名建议使用 VPN 或 Tor）

网站权限

Chrome 让你精细控制每个网站可以访问的功能：

• 位置信息
• 摄像头
• 麦克风
• 通知
• 剪贴板
• USB 设备
• 蓝牙

点击地址栏左侧的 🔒 图标，可以查看和修改当前网站的权限设置。

开发者工具

按 F12 或 Ctrl+Shift+I 打开 Chrome DevTools，这是 Web 开发者最强大的调试工具之一。

Elements 面板

实时查看和编辑页面的 DOM 结构和 CSS 样式：

<!-- 在 Elements 面板中可以直接编辑 HTML -->
<div class="container">
  <h1 style="color: #4285f4;">Hello Chrome!</h1>
  <p class="description">
    在这里你可以实时修改任何元素的属性和样式
  </p>
</div>

在 Styles 侧栏中，你可以：

• 修改任何 CSS 属性并实时预览
• 添加新的 CSS 规则
• 查看计算后的最终样式（Computed）
• 检查盒模型（Box Model）尺寸
• 使用颜色选择器和贝塞尔曲线编辑器

Console 控制台

Console 面板是执行 JavaScript 和查看日志的地方：

// 常用的 Console API
console.log("普通日志");
console.warn("⚠️ 警告信息");
console.error("❌ 错误信息");
console.table([
  { name: "Chrome", engine: "Blink" },
  { name: "Firefox", engine: "Gecko" },
  { name: "Safari", engine: "WebKit" }
]);

// 性能计时
console.time("操作耗时");
// ...某些操作...
console.timeEnd("操作耗时");

// 分组输出
console.group("用户信息");
console.log("姓名: 张三");
console.log("邮箱: [email protected]");
console.groupEnd();

Network 面板

监控页面的所有网络请求，包括：

Performance 面板

录制和分析页面的运行时性能：

Performance 录制结果概览：

FPS    ┤████████████████░░░░████████████████████████
CPU    ┤██░░████████░░░░░░░░██░░░░░░████░░░░░░░░░░░
NET    ┤████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
       └──────────────────────────────────────────────
       0ms        500ms       1000ms       1500ms

主要指标：
• FP  (First Paint):            120ms
• FCP (First Contentful Paint): 250ms
• LCP (Largest Contentful Paint): 800ms
• TTI (Time to Interactive):    1200ms
• CLS (Cumulative Layout Shift): 0.02

Lighthouse 审计

Chrome 内置的 Lighthouse 可以对页面进行全方位审计，生成以下方面的评分和建议：

Lighthouse 报告:

  Performance     ████████████████████░░░  89
  Accessibility   ██████████████████████░  95
  Best Practices  ████████████████████░░░  88
  SEO             █████████████████████░░  92
  PWA             ████████████████░░░░░░░  72

扩展程序

安装扩展

访问 Chrome 网上应用店 浏览和安装扩展程序。你也可以在开发者模式下加载未打包的扩展：

1. 打开 chrome://extensions/
2. 开启右上角的"开发者模式"
3. 点击"加载已解压的扩展程序"
4. 选择包含 manifest.json 的文件夹

管理扩展

一个 Chrome 扩展的基本结构（Manifest V3）：

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0.0",
  "description": "一个示例 Chrome 扩展",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

推荐扩展

快捷键

掌握快捷键能极大提升浏览效率。以下是最常用的快捷键（macOS 用户将 Ctrl 替换为 ⌘）：

标签页与窗口

导航

开发者工具

实验性功能

在地址栏输入 chrome://flags 可以访问 Chrome 的实验性功能开关。这些功能正在开发中，可能不稳定。

一些有趣的实验性功能：

常用的 chrome:// 内部页面：

chrome://settings        → 浏览器设置
chrome://extensions      → 扩展程序管理
chrome://flags           → 实验性功能
chrome://bookmarks       → 书签管理器
chrome://history         → 浏览历史
chrome://downloads       → 下载记录
chrome://inspect         → 检查设备和页面
chrome://net-internals   → 网络诊断工具
chrome://gpu             → GPU 信息和状态
chrome://version         → Chrome 版本详情
chrome://about           → 所有内部页面列表
chrome://components      → 组件更新状态
chrome://system          → 系统信息
chrome://memory-internals → 内存使用详情

版本历史

Chrome 采用每 4 周一个大版本的快速发布节奏。以下是部分里程碑版本：

常见问题