浏览器开发者工具

浏览器开发者工具（DevTools）是内置于现代浏览器中的调试和开发套件，它让你能够实时检查 HTML 结构、调试 JavaScript、分析网络请求、测量页面性能。掌握 DevTools 是每个前端开发者的必备技能。

前置知识

阅读本节前，建议先了解：VS Code 插件推荐

基础概念

浏览器开发者工具是浏览器提供的一组内嵌面板，允许开发者实时检查和修改网页的 DOM 结构、CSS 样式、JavaScript 执行、网络请求等。Chrome DevTools 是最常用的版本，Firefox Developer Tools 和 Safari Web Inspector 也提供了类似功能。它们是前端开发中最核心的调试工具。

打开 DevTools

打开方式

text

通用方式：
  - 快捷键 F12
  - 快捷键 Ctrl+Shift+I（Windows）/ Cmd+Option+I（macOS）
  - 右键点击页面 → "检查" / "Inspect"

Chrome 特有：
  - 快捷键 Ctrl+Shift+J（Windows）/ Cmd+Option+J（macOS）→ 直接打开 Console
  - 菜单 → 更多工具 → 开发者工具

Firefox 特有：
  - 快捷键 Ctrl+Shift+K（Windows）/ Cmd+Option+K（macOS）→ 直接打开 Web Console
  - 菜单 → 更多工具 → 浏览器工具 / Web 开发者工具

Safari 特有：
  - 首次需要：偏好设置 → 高级 → 勾选"在菜单栏中显示开发菜单"
  - 快捷键 Cmd+Option+I

停靠模式

DevTools 可以以多种方式停靠在浏览器窗口中：

text

停靠位置（通过 DevTools 右上角三个点菜单切换）：
  - 独立窗口（Undocked）     - DevTools 在独立窗口中
  - 底部停靠（Dock to bottom）- DevTools 在页面下方（默认）
  - 左侧停靠（Dock to left）  - DevTools 在页面左侧
  - 右侧停靠（Dock to right） - DevTools 在页面右侧

推荐使用右侧停靠模式，特别是在调试响应式布局时，可以同时观察页面和代码。

详细说明

面板概览

Chrome DevTools 包含以下核心面板：

面板名称	功能	快捷进入
Elements	检查和编辑 DOM 结构与 CSS 样式	Ctrl+Shift+C
Console	执行 JavaScript、查看日志和错误	Ctrl+Shift+J
Sources	调试 JavaScript、查看源代码	Ctrl+Shift+E
Network	监控网络请求和资源加载	Ctrl+Shift+N
Performance	录制和分析页面运行时性能	Ctrl+Shift+P → Performance
Application	管理 Cookie、Storage、Service Worker	无快捷键
Lighthouse	全面审计页面性能、可访问性等	无快捷键
Layers	分析图层和合成	无快捷键

更多面板

在 DevTools 右上角三个点菜单中选择 "More tools"，还可以打开更多面板如 Coverage（代码覆盖率）、Rendering（渲染设置）、Changes（代码变更追踪）等。

Elements 面板

Elements 面板是检查和修改 HTML 结构与 CSS 样式的主要工具。

核心功能：

text

1. DOM 树浏览
   - 以树形结构展示完整的 DOM
   - 支持展开/折叠节点
   - 灰色文字表示用户代理样式注入的元素

2. 元素选择
   - 点击面板左上角的"选择元素"按钮（或 Ctrl+Shift+C）
   - 在页面上点击任意元素即可选中
   - 选中的元素在 DOM 树中高亮显示

3. 实时编辑 HTML
   - 双击元素标签可以编辑标签名
   - 双击属性可以编辑属性值
   - 右键 → "Edit as HTML" 可以编辑整个元素的 HTML

4. 实时编辑 CSS
   - 右侧 Styles 面板显示元素的所有样式来源
   - 可以直接点击修改、添加、删除 CSS 属性
   - 勾选/取消属性前的复选框来启用/禁用样式

Console 面板

Console 面板是执行 JavaScript 代码和查看日志输出的核心工具。

主要用途：

javascript

// 1. 查看日志输出
console.log('普通日志');
console.warn('警告信息');   // 黄色样式
console.error('错误信息');   // 红色样式
console.info('提示信息');   // 蓝色样式
console.table(['苹果', '香蕉', '橘子']); // 表格形式展示数据
console.dir(document.body);  // 以对象形式展示 DOM 元素

// 2. 直接执行 JavaScript 代码
document.title = '新标题';    // 修改页面标题
document.body.style.backgroundColor = '#f0f0f0'; // 修改背景色

// 3. 使用 $ 快捷选择器（Chrome 特有）
$('h1')                         // 等同于 document.querySelector('h1')
$$('p')                         // 等同于 document.querySelectorAll('p')
$0                              // 获取当前选中的 DOM 元素
$1                              // 获取之前选中的元素

// 4. 使用 Console API 辅助调试
console.time('计时器');
// ... 执行一些代码
console.timeEnd('计时器');      // 输出: 计时器: 1.234ms

console.group('分组日志');
console.log('第一条日志');
console.log('第二条日志');
console.groupEnd();

console.count('点击次数');
console.count('点击次数');
console.count('点击次数');      // 输出: 点击次数: 3

Console 面板设置：

text

过滤级别（通过面板顶部的过滤按钮）：
  - All messages   - 显示所有消息
  - Info           - 仅显示 info 级别
  - Warnings       - 仅显示 warn 级别
  - Errors         - 仅显示 error 级别

搜索功能：
  - Ctrl+F 在 Console 面板中搜索日志内容

Preserve log：
  - 勾选后在页面刷新时保留 Console 日志
  - 适合调试页面加载时的错误

Network 面板

Network 面板用于监控页面加载过程中的所有网络请求，分析资源加载情况和性能瓶颈。

text

常用操作：
  1. 打开 Network 面板
  2. 刷新页面（F5）开始记录
  3. 或点击面板上的 "清除" 按钮后手动触发操作

列信息说明：
  - Name       - 请求的资源名称
  - Status     - HTTP 状态码（200、404、304 等）
  - Type       - 资源类型（html、css、js、img 等）
  - Initiator  - 发起请求的源（解析器、脚本、其他）
  - Size       - 资源大小（ transferred / actual size）
  - Time       - 请求耗时
  - Waterfall  - 资源加载的瀑布流时间线图

常用过滤方式：

text

过滤按钮：
  - All         - 所有请求
  - Fetch/XHR   - Ajax 和 Fetch 请求
  - JS          - JavaScript 文件
  - CSS         - CSS 文件
  - Img         - 图片资源
  - Media       - 媒体文件（视频、音频）
  - Font        - 字体文件
  - Doc         - HTML 文档
  - WS          - WebSocket 连接
  - Wasm        - WebAssembly 模块

手动过滤：
  - 在搜索框输入关键词过滤
  - 输入 "larger-than:100k" 过滤大于 100KB 的资源
  - 输入 "status-code:200" 过滤指定状态码的请求

Sources 面板

Sources 面板用于查看和调试 JavaScript 源代码。

text

核心功能：
  1. 文件浏览器（左侧）
     - 以树形结构展示页面加载的所有源文件
     - 包括 HTML、CSS、JS 和资源文件

  2. 代码编辑器（中间）
     - 查看源代码内容
     - 设置断点（点击行号）
     - 实时编辑代码（编辑后需 Ctrl+S 保存生效）

  3. 调试工具栏（右侧）
     - Pause/Resume：暂停/继续执行
     - Step Over：跳过当前行
     - Step Into：进入函数内部
     - Step Out：跳出当前函数
     - Deactivate Breakpoints：禁用所有断点

Application 面板

Application 面板管理网页的各种存储和运行时数据。

text

功能区域：
  - Storage
    → Local Storage      - 查看和管理 localStorage 数据
    → Session Storage     - 查看和管理 sessionStorage 数据
    → IndexedDB           - 查看 IndexedDB 数据库内容
    → Cookies             - 查看和管理 Cookie
    → Cache Storage        - 查看 Cache API 缓存内容

  - Background Services
    → Service Workers      - 注册和调试 Service Worker
    → Web Workers          - 查看活跃的 Web Worker

  - Frames
    → iframe 列表          - 查看页面中嵌入的 iframe

  - Manifest
    → Web App Manifest     - 查看 PWA 配置

Lighthouse 面板

Lighthouse 是 Chrome 内置的自动化审计工具，可以全面评估网页质量。

text

审计维度：
  - Performance       - 页面性能（FCP、LCP、CLS 等核心指标）
  - Accessibility     - 无障碍访问（语义化、ARIA、键盘导航等）
  - Best Practices   - 最佳实践（HTTPS、控制台错误等）
  - SEO              - 搜索引擎优化（meta 标签、可爬取性等）
  - PWA              - 渐进式 Web 应用（离线支持、Service Worker 等）

评分范围：0~100 分
  - 90~100  = 优秀（绿色）
  - 50~89   = 需要改进（橙色）
  - 0~49    = 较差（红色）

实战示例

示例：使用 Console 快速调试页面

创建一个用于练习 DevTools 的 HTML 页面：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DevTools 练习</title>
  <style>
    :root {
      --primary: #2563eb;
      --danger: #dc2626;
      --success: #16a34a;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 2rem;
      background: #f8fafc;
      color: #1e293b;
    }

    .container {
      max-width: 700px;
      margin: 0 auto;
    }

    h1 {
      color: var(--primary);
      margin-bottom: 1rem;
    }

    .card {
      background: white;
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .card h2 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }

    .card p {
      color: #64748b;
      line-height: 1.6;
    }

    .btn {
      display: inline-block;
      padding: 0.5rem 1.2rem;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.95rem;
      transition: opacity 0.2s;
    }

    .btn:hover {
      opacity: 0.85;
    }

    .btn-primary {
      background: var(--primary);
      color: white;
    }

    .btn-danger {
      background: var(--danger);
      color: white;
    }

    .btn-success {
      background: var(--success);
      color: white;
    }

    .output {
      margin-top: 1rem;
      padding: 1rem;
      background: #f1f5f9;
      border-radius: 6px;
      font-family: monospace;
      font-size: 0.9rem;
      min-height: 2rem;
      color: #334155;
    }

    .hidden {
      display: none;
    }

    #infoBar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: var(--primary);
      color: white;
      text-align: center;
      padding: 0.5rem;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>DevTools 练习场</h1>
    <p>打开浏览器开发者工具，在 Console 面板中尝试以下练习。</p>

    <div class="card">
      <h2>练习 1：修改页面内容</h2>
      <p>在 Console 中执行代码修改页面标题和卡片数量。</p>
      <button class="btn btn-primary" onclick="exercise1()">执行</button>
      <div class="output" id="output1"></div>
    </div>

    <div class="card">
      <h2>练习 2：操作 DOM 元素</h2>
      <p>使用选择器选中元素并修改样式。</p>
      <button class="btn btn-primary" onclick="exercise2()">执行</button>
      <div class="output" id="output2"></div>
    </div>

    <div class="card">
      <h2>练习 3：动态创建元素</h2>
      <p>通过 JavaScript 创建新的 DOM 元素并插入页面。</p>
      <button class="btn btn-success" onclick="exercise3()">创建新卡片</button>
      <button class="btn btn-danger" onclick="clearCards()">清空卡片</button>
      <div id="dynamicArea"></div>
    </div>
  </div>

  <script>
    // 练习 1：修改页面内容
    function exercise1() {
      var output = document.getElementById('output1');
      // 修改页面标题
      var originalTitle = document.querySelector('h1').textContent;
      document.querySelector('h1').textContent = 'DevTools 大师';
      // 统计卡片数量
      var cards = document.querySelectorAll('.card');
      output.textContent =
        '原标题: ' + originalTitle +
        ' → 新标题: DevTools 大师\n' +
        '当前卡片数量: ' + cards.length;

      // 在 Console 中输出更详细的信息
      console.log('所有卡片元素:', cards);
      console.table(
        Array.from(cards).map(function (card, i) {
          return {
            index: i,
            title: card.querySelector('h2').textContent
          };
        })
      );
    }

    // 练习 2：操作 DOM 元素
    function exercise2() {
      var output = document.getElementById('output2');

      // 选中第一个按钮并修改其样式
      var firstBtn = document.querySelector('.btn');
      firstBtn.style.background = '#dc2626';
      firstBtn.style.transform = 'scale(1.05)';
      firstBtn.textContent = '已修改样式！';

      // 为所有卡片添加边框
      var cards = document.querySelectorAll('.card');
      cards.forEach(function (card, i) {
        card.style.borderLeft = '4px solid #2563eb';
      });

      output.textContent =
        '已修改第一个按钮的背景色和大小\n' +
        '已为 ' + cards.length + ' 个卡片添加左边框\n\n' +
        '提示：尝试在 Elements 面板中查看变化';

      console.log('你可以通过 $0 在 Console 中引用当前选中的元素');
    }

    // 练习 3：动态创建元素
    var cardCount = 0;

    function exercise3() {
      cardCount++;
      var dynamicArea = document.getElementById('dynamicArea');

      var newCard = document.createElement('div');
      newCard.className = 'card';
      newCard.innerHTML =
        '<h2>动态卡片 #' + cardCount + '</h2>' +
        '<p>这张卡片由 JavaScript 动态创建。' +
        '在 Elements 面板中查看 DOM 变化。</p>' +
        '<button class="btn btn-danger" onclick="this.parentElement.remove()">删除此卡片</button>';

      dynamicArea.appendChild(newCard);

      console.log('已创建卡片 #' + cardCount, newCard);
    }

    function clearCards() {
      var dynamicArea = document.getElementById('dynamicArea');
      dynamicArea.innerHTML = '';
      cardCount = 0;
      console.warn('所有动态卡片已清空');
    }
  </script>
</body>
</html>

练习步骤：

打开此页面，按 F12 打开 DevTools
在 Console 面板中输入 $('h1') 查看选中元素
在 Console 中输入 document.title 查看当前标题
点击页面上的按钮，在 Console 中观察 console.log 输出
切换到 Elements 面板，查看 DOM 结构变化
在 Elements 面板中直接编辑 HTML 和 CSS 属性

常用快捷键

操作	Windows/Linux	macOS
打开 DevTools	F12 / Ctrl+Shift+I	Cmd+Option+I
打开 Console	Ctrl+Shift+J	Cmd+Option+J
元素选择	Ctrl+Shift+C	Cmd+Shift+C
清除 Console	Ctrl+L	Cmd+K
搜索文件	Ctrl+P	Cmd+P
全局搜索	Ctrl+Shift+F	Cmd+Option+F
刷新页面	F5 / Ctrl+R	Cmd+R
强制刷新（清缓存）	Ctrl+Shift+R	Cmd+Shift+R
切换面板	Ctrl+[ / Ctrl+]	Cmd+[ / Cmd+]
命令面板	Ctrl+Shift+P	Cmd+Shift+P

注意事项

DevTools 修改不会保存到源文件：在 Elements 面板中做的所有修改都是临时的，刷新页面后恢复原状。持久修改需在源代码文件中进行
不要在生产环境暴露调试信息：console.log 等调试语句应在发布前移除，或使用构建工具在生产版本中自动移除
Console 中使用 $ 的注意：某些库（如 jQuery）也使用 $ 作为全局变量，可能产生冲突。此时可以使用 $0 代替
Network 面板需手动刷新：打开 Network 面板后，需要刷新页面（F5）才会开始记录请求，除非勾选了 "Preserve log"
Sources 面板中的断点：刷新页面后断点会保留，但关闭 DevTools 后会消失

最佳实践

养成用 Console 调试的习惯：比用 alert() 更高效，不会阻塞页面执行
使用命令面板（Cmd+Shift+P）：输入命令名称快速打开功能，比逐个面板寻找更高效
利用 $0 引用选中元素：在 Elements 面板选中元素后，在 Console 中用 $0 直接引用它
使用 Snippets 保存常用脚本：Sources 面板 → Snippets 区域，可以保存和重用代码片段
使用 Device Mode 进行移动端调试：点击 DevTools 左上角的手机图标，模拟不同设备

继续学习：元素检查与调试

浏览器开发者工具 ​

基础概念 ​

打开 DevTools ​

打开方式 ​

停靠模式 ​

详细说明 ​

面板概览 ​

Elements 面板 ​

Console 面板 ​

Network 面板 ​

Sources 面板 ​

Application 面板 ​

Lighthouse 面板 ​

实战示例 ​

示例：使用 Console 快速调试页面 ​

常用快捷键 ​

注意事项 ​

最佳实践 ​

参考链接 ​

浏览器开发者工具

基础概念

打开 DevTools

打开方式

停靠模式

详细说明

面板概览

Elements 面板

Console 面板

Network 面板

Sources 面板

Application 面板

Lighthouse 面板

实战示例

示例：使用 Console 快速调试页面

常用快捷键

注意事项

最佳实践

参考链接