0Pricing
Frontend Academy · 课时

开发者工具：打开并使用 DevTools

打开 Chrome DevTools，检查元素，阅读控制台，查看网络请求，并在浏览器中实时编辑 CSS。

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

什么是浏览器 DevTools？

每个现代浏览器都内置了一套开发者工具。DevTools 可以让您检查 HTML 和 CSS、调试 JavaScript、分析性能、监控网络请求，以及完成更多操作——而且全程无需离开浏览器。

打开 DevTools

在 Windows/Linux 上按F12，或在 Mac 上按Cmd+Option+I，即可打开 DevTools。您也可以右键点击任意元素，然后选择检查。快捷键Ctrl+Shift+J / Cmd+Option+J可以直接打开控制台。

元素面板

元素面板显示实时 DOM 树。点击任意元素将其选中，即可在样式窗格中查看其计算样式。您可以双击实时编辑 HTML 或 CSS 值——更改会立即生效，但不会保存到文件中。

实时编辑 CSS

在样式窗格中，点击任意属性值即可修改。使用 + 按钮添加新规则。使用切换复选框禁用规则。这是在不切换到编辑器的情况下快速制作 CSS 原型的方法。

控制台面板

控制台会显示日志消息、警告和错误。您也可以直接输入 JavaScript 并执行。调试时，请使用 console.log()、console.warn()、console.error() 和 console.table() 输出数据。

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

网络面板

网络面板会显示页面发出的每个 HTTP 请求。选择一个请求，可以查看其请求头、预览响应正文并检查时间瀑布图。您可以按类型筛选：XHR/Fetch、JS、CSS、图像和字体。

读取请求时间

每个请求都会显示：已排队、DNS 查询、初始连接、SSL、已发送请求、等待（TTFB）和内容下载。TTFB（首字节时间）反映服务器的响应时间。

限制网络速度

使用网络面板中的限速下拉菜单，可以模拟缓慢的 3G 网络或离线状态。这能暴露在高速宽带下无法发现的性能问题，并帮助您构建适用于网络连接较差用户的体验。

设备模式

点击设备图标（Ctrl+Shift+M / Cmd+Shift+M）即可进入设备模式。您可以模拟移动视口、DPR、触摸事件和网络条件。您可以选择 iPhone 14 等预设设备，也可以设置自定义宽度。

源代码面板

源代码面板可以让您阅读 JavaScript 文件，并在其中设置断点。断点会暂停执行，以便您检查变量值和调用栈，还可以使用 F10（单步跳过）和 F11（单步进入）逐行执行代码。

断点与调试器

在源代码中点击行号即可添加断点。执行暂停后，将鼠标悬停在变量上即可查看其值，或在控制台中输入变量。使用调用栈窗格可查看哪些函数最终执行到了这里。

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

快速检查

哪个 DevTools 面板会显示页面发出的所有超文本传输协议请求，包括其状态码和响应时间？

回顾：您的 DevTools 工具箱

元素：检查并编辑实时 DOM。控制台：使用 log 并运行 JavaScript。网络：监控超文本传输协议流量。源代码：设置断点并进行调试。设备模式：测试响应式布局。掌握这四个面板将彻底改变您的调试工作流。

常见问题解答

「开发者工具：打开并使用 DevTools」课时是免费的吗？

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

「开发者工具：打开并使用 DevTools」这节课中我会学到什么？

打开 Chrome DevTools，检查元素，阅读控制台，查看网络请求，并在浏览器中实时编辑 CSS。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「开发者工具：打开并使用 DevTools」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 浏览器、DNS 与 HTTP：请求生命周期
  2. HTML、CSS 与 JavaScript：各层的职责
  3. 页面如何渲染：解析 DOM、CSSOM、布局与绘制
  4. 开发者工具：打开并使用 DevTools
← 返回 Frontend Academy