0Pricing
Frontend Academy · 课时

Chrome DevTools：Elements、Console、Network

浏览 Elements、Console 和 Network 面板，检查样式、调试 JavaScript 错误并监控 HTTP 请求。

Chrome DevTools：Elements、Console、Network 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

高效打开 DevTools

右键单击任意元素并选择“检查”，即可打开 DevTools，并选中该元素。按 F12 可切换面板。在 Mac 上按 Cmd+Shift+C，在 Windows 上按 Ctrl+Shift+C，可直接进入检查模式，而无需打开完整面板。

元素面板——DOM 检查器

元素面板显示实时解析后的 DOM 树，而不是原始 HTML 源代码。它会反映 JavaScript 的修改。将鼠标悬停在节点上可在页面中高亮显示该节点。双击即可直接编辑 HTML。

样式与计算值面板

选中元素后，样式面板会按特异性顺序显示所有已应用的 CSS 规则。带删除线的规则表示已被覆盖。计算值面板显示每个属性最终计算出的值。

强制元素状态

点击样式面板中的 :hov 按钮，可以强制设置 :hover、:focus、:active 或 :visited 等 CSS 状态。无需让光标保持完全静止，也能检查悬停样式。

盒模型可视化工具

计算值面板显示交互式盒模型图：内容、内边距、边框和外边距。将鼠标悬停在各个区域上即可查看其值。点击即可实时编辑外边距和内边距的值。

控制台基础——记录日志与运行代码

控制台显示错误、警告和日志。输入任意 JavaScript 表达式并按 Enter，即可针对实时页面对其求值。将控制台作为交互式 REPL，可以立即测试代码片段。

// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())

控制台 API 方法

除了 console.log 之外，还可以使用：console.warn()（黄色警告）、console.error()（红色错误）、console.table()（将数组或对象渲染为表格）、console.group() / console.groupEnd()（用于分组输出），以及 console.time()（用于计时）。

网络面板概览

每个 HTTP 请求（HTML、JS、CSS、图像、XHR、Fetch）都会显示为一行。各列显示方法、状态、大小和耗时。点击某一行即可查看完整的请求和响应详细信息。

筛选网络请求

使用筛选栏按 URL 搜索，或按类型筛选：全部、XHR/Fetch、JS、CSS、图像、媒体、字体、WS。当您调试 JavaScript 发起的 API 调用时，XHR/Fetch 筛选器最为有用。

检查请求与响应

选择一个网络请求即可查看：标头（请求和响应）、预览（格式化的 JSON/HTML）、响应（原始正文）、计时（连接阶段）。Payload 选项卡显示 POST 正文参数。

限速——模拟慢速网络

点击限速下拉菜单（默认值：不限速），即可模拟慢速 3G、快速 3G 或离线状态。“停用缓存”复选框可防止浏览器在测试期间使用缓存资源。

快速检查

在 Chrome DevTools 的什么位置可以查看应用于所选元素的所有 CSS 规则，包括已被覆盖的规则？

总结：Chrome DevTools 面板

元素面板：检查和编辑实时 DOM 与 CSS。强制伪状态以检查悬停样式。控制台：实时记录日志、调试并运行 JS。网络面板：监控所有 HTTP 请求，检查标头和响应，并通过限速模拟慢速连接。

常见问题解答

「Chrome DevTools：Elements、Console、Network」课时是免费的吗？

是的 — 「Chrome DevTools：Elements、Console、Network」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Chrome DevTools：Elements、Console、Network」这节课中我会学到什么？

浏览 Elements、Console 和 Network 面板，检查样式、调试 JavaScript 错误并监控 HTTP 请求。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「Chrome DevTools：Elements、Console、Network」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Chrome DevTools：Elements、Console、Network
  2. VSCode：扩展、Emmet 与快捷键
  3. Prettier 与 ESLint 设置
  4. 浏览器兼容性与 caniuse.com
← 返回 Frontend Academy