查看“浏览器/开发者工具”的源代码

浏览器开发者工具(DevTool)，是内置于现代浏览器（如Chrome、Firefox、Edge等）中的一套强大工具，主要用于帮助开发者调试、分析和优化网页或Web应用。
下面是主要页签的作用：

[[File:主要页签.png.webp]]
== 1. 元素（Elements） ==
作用：查看和实时修改网页的 HTML 结构 和 CSS 样式。

常用功能：

检查 DOM 树：通过点击页面元素，快速定位对应的 HTML 代码。

实时编辑：直接修改 HTML 或 CSS，即时生效（无需刷新页面）。

查看样式规则：分析元素的盒模型（Box Model）、继承的样式、层叠优先级。

调试伪类：强制激活 :hover、:active 等状态，测试样式效果。

事件监听：查看元素绑定的事件（如 click、mouseover）。

适用场景：

调试布局问题、调整响应式设计、快速测试样式变更。

== 2. 源码（Sources） ==

作用：调试 JavaScript 代码，管理网页的静态资源（脚本、样式、图片等）。

常用功能：

查看源代码：浏览网页加载的所有文件（HTML、JS、CSS、图片等）。

断点调试：在 JS 代码中设置断点，单步执行（Step Over/Into），查看变量值。

修改代码：直接编辑 JS/CSS 文件并保存（需配合 Workspace 映射到本地文件）。

Source Map 支持：调试压缩后的代码（如 Webpack 打包的代码）。

代码片段（Snippets）：保存和运行常用的调试代码片段。

适用场景：

修复 JS 逻辑错误、分析代码执行流程、调试复杂的前端框架（React/Vue）。

== 3. 控制台（Console） ==
作用：交互式执行 JavaScript 代码，输出日志和错误信息。

常用功能：

打印日志：通过 console.log()、console.error() 等输出调试信息。

执行 JS 代码：直接输入命令与页面交互（如操作 DOM、调用函数）。

查看错误：显示 JS 运行时错误、网络请求失败、安全警告等。

API 测试：快速测试 fetch、localStorage 等浏览器 API。

实用方法：如 $0（引用当前选中的 DOM 元素）、copy()（复制变量内容）。

适用场景：

快速调试代码、捕获运行时错误、动态操作页面内容。

== 4. 网络（Network） ==
作用：监控和分析网页的所有 网络请求（XHR、图片、脚本等）。

常用功能：

请求列表：查看每个请求的 URL、状态码（如 200/404）、耗时、响应大小。

筛选请求：按类型过滤（XHR、JS、CSS、Img 等）。

查看详情：点击请求可查看请求头（Headers）、响应内容（Response）、参数（Payload）。

性能分析：通过瀑布图（Waterfall）识别慢速请求或阻塞问题。

模拟弱网：限制网络速度（如 3G），测试页面在低速环境的表现。