2.4 源代码（Sources）面板
2.4.1 断点调试
2.4.1.1 设置断点
断点调试是前端开发中极为常见的调试方式。通过在 Sources 面板中点击某行代码左侧的行号区域，即可设置一个断点。当程序运行至该行时，浏览器会自动暂停执行，此时开发者可以查看当前变量的值、调用栈状态，并逐步控制代码的执行流程。
步骤：
操作步骤如下：
- 打开浏览器的开发者工具，进入 Sources 面板。
- 定位到需要调试的 JavaScript 文件，并展开以查看其源码。
- 在希望暂停执行的代码行左侧点击，设置断点（通常以蓝色或红色圆点标识）。
- 刷新页面或触发相关逻辑，当执行流到达断点位置时，浏览器将暂停并高亮当前行。
- 利用调试控制按钮（如单步执行、跳过函数、进入函数等）来逐步运行代码，分析程序行为。
观察变量变化：
在调试过程中，可通过 Scopes 面板查看当前作用域中的变量信息。此外，也可使用 Watch Expressions 功能添加需重点关注的表达式或变量，其值将在每次执行暂停时动态更新，便于追踪变化。
示例：
例如，考虑以下简单的 HTML 页面，其中包含一个用于计算两数之和的事件监听器。我们希望在变量赋值阶段暂停执行，以便观察其值的变化情况。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>HTML测试</title>
</head>
<body>
<!-- 无事件处理的按钮 -->
<button>点击我</button>
<!-- 使用 onclick 属性绑定事件的按钮 -->
<button onclick="alert('按钮被点击了！')">点击我</button>
<!-- 使用 addEventListener 添加事件监听的按钮 -->
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function () {
let a = 10;
let b = 20;
let sum = a + b; // 可在此处设置断点
console.log(sum); // 也可在此设置断点
return sum;
});
</script>
</body>
</html>
在上述代码中，可在
let sum = a + b; 这一行设置断点，从而在函数执行过程中检查
sum 的值是否正确生成。
2.4.2 源代码映射（Source Maps）
在实际项目开发中，为了优化加载性能和减少资源体积，通常会对 JavaScript 文件进行压缩与合并。然而，压缩后的代码往往难以阅读和调试。为解决这一问题，引入了源代码映射技术。
源代码映射文件（通常以 .map 为扩展名）是一种 JSON 格式的文件，记录了压缩后代码与原始源码之间的对应关系。当浏览器加载了压缩代码并设置了断点时，开发者工具会借助该映射文件还原出原始代码结构，使调试过程更加直观高效。
2.4.2.1 调试压缩后的代码
确保构建流程已生成对应的 source map 文件。一旦配置正确，在 Sources 面板中浏览器将自动识别并展示可读的原始源码文件（若存在映射文件）。此后，你可以在这些映射后的文件上正常设置断点、查看变量、跟踪执行流程，如同调试未压缩代码一样。
工作区Workspace
本地文件映射至 Sources 面板（Workspace 功能）
Workspace 功能允许将本地项目目录映射到浏览器的 Sources 面板中，实现直接在开发者工具内编辑和保存文件。这对于快速修改、原型验证或临时修复非常实用。
步骤：
操作流程如下：
- 在 Sources 面板中切换至 Workspace 标签页（名称可能因浏览器不同略有差异）。
- 点击 添加文件夹 或类似按钮（图标形式常见）以引入本地目录。
Add folder to workspace
- 选择你的项目根目录或指定需要映射的文件夹。
- 根据项目结构完成路径映射配置，确保浏览器能准确关联本地资源。
- 完成设置后，即可在 Sources 面板中直接编辑这些文件，所有更改将实时同步保存至本地磁盘。
注意：
注意事项：
- 请确认所使用的浏览器支持 Workspace 功能。
- 映射规则需结合项目的实际路径结构和构建配置进行调整。
- 并非所有文件类型或浏览器都支持实时编辑与保存功能，部分场景下可能受限。
发帖
雷达卡
京公网安备 11010802022788号
