Skip to content

浏览器开发者工具

学习使用浏览器开发者工具——检查、调试、分析网页的内置工具箱。

你将学到

  • 开发者工具是什么、如何打开
  • 用 Elements 面板检查 HTML 和 CSS
  • 用 Console 运行 JavaScript 并阅读错误
  • 用 Network 面板观察 HTTP 请求

概念讲解

浏览器开发者工具

开发者工具（DevTools）是每个现代浏览器内置的开发者工具集。按 F12 或 Ctrl+Shift+I（Mac 上 Cmd+Option+I）即可打开一个面板，里面有检查、调试、优化网页所需的一切。它是 Web 开发者日常最重要的工具——而且免费、随时可用。

打开 DevTools

  • F12 或 Ctrl+Shift+I（Windows/Linux）
  • Cmd+Option+I（Mac）
  • 右键元素 → "检查"

核心面板

Elements —— 检查并实时编辑 DOM 和 CSS。把鼠标悬停在元素上会在页面上高亮它。实时改样式并立即看到效果——微调布局的利器。改动不会持久化（刷新即重置），所以记得拷回源文件。

Console —— 在页面上下文里运行 JavaScript 并读取消息。console.log 输出、错误、警告都出现在这里。你也可以输入表达式来查看变量或测试函数。Console 就是页面的 REPL。

Network —— 观察页面发出的每一个 HTTP 请求。看 URL、方法、状态码、大小、耗时。点开某个请求可查其头和响应体。调试 API 调用和加载缓慢就靠它。

Sources —— 查看页面 JavaScript 源码、设断点、逐步执行。断点会暂停代码，让你在那个时刻检查变量——比 console.log 强大得多。

Application —— 检查存储：cookies、localStorage、IndexedDB、缓存。调试认证和离线行为时很有用。

日常工作流

  1. 样式不对 → 打开 Elements，找到元素，实时调 CSS。
  2. 按钮没反应 → 打开 Console，看错误，测试处理器。
  3. 数据没加载 → 打开 Network，找到失败的请求，读状态和响应。
  4. 逻辑出错 → 打开 Sources，设断点，逐步执行并检查变量。

DevTools 把"猜"变成"看"。你对它越熟练，调试就越快。

示例代码

              // 你可能在 DevTools 里调试的代码。
// 在处理器内部那行设断点，检查 'items'。

function renderCart(items) {
  const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
  console.log("Cart total:", total);  // 出现在 Console 面板
  document.getElementById("cart-total").textContent = `$ ${total.toFixed(2)}`;
}

// 在 Console 里可以直接运行测试：
// renderCart([{ price: 10, qty: 2 }, { price: 5, qty: 1 }])

console.log 输出出现在 Console 面板。在 Sources 面板给 reduce 那行设断点，可暂停执行并检查 items 数组——无需打日志。

动手试一试

  • Markdown Previewer

    打开这个工具，再打开 DevTools → Network。在框里输入：没有网络请求——全在客户端跑。

  • JSON Formatter

    在这个页面打开 DevTools → Elements，检查格式化后的 JSON 输出，看 DOM 如何组织。

常见错误

错误写法

只靠 console.log 而不学断点。

正确做法

断点会暂停执行，让你检查当时所有变量、逐行单步、监视表达式。比到处撒日志高效得多。

错误写法

忘了 DevTools 里的 CSS 改动不会持久化。

正确做法

DevTools 的编辑是实时的但临时的——刷新即消失。找到合适值后拷进 .css 文件。把 DevTools 当草稿，不当真相来源。

相关资源

相关速查表

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误