Chrome DevTools Sources 面板调试 JavaScript 的核心是通过 source map 正确映射到可读源码；需确保 JS 文件含 sourceMappingURL 注释、.map 文件可访问、构建工具启用 sourcemap，再在面板中定位源码、设断点、暂停分析与热替换修改。
在 Chrome DevTools 的 Sources 面板中调试 JavaScript 源码，核心是让浏览器能正确映射、定位并停靠到你可读的原始代码（比如 ES6、TypeScript 或打包后的带 source map 的文件），而不是压缩混淆后的产物。
确保源码可被识别和加载
如果打开 Sources 面板只看到压缩文件（如 app.min.js）或空白，大概率是缺少 source map 或构建配置未启用。检查以下几点：
- 网页加载的 JS 文件响应头中包含 SourceMap 注释，例如：
//# sourceMappingURL=app.js.map - 对应的 .map 文件能被浏览器正常请求到（可在 Network 面板中搜索
.map查看状态码是否为 200） - 使用 Webpack/Vite 等工具时，确认
devtool（Webpack）或build.sourcemap（Vite）已设为开发友好模式（如source-map或cheap-module-source-map）
在 Sources 面板中找到并打开你的源码文件
Sources 面板左侧是资源树，通常包含几个关键区域：
- Page：当前页面直接引入的脚本（含 HTML 内联 script），按域名组织
- webpack:// 或 vscode://：表示通过 source map 映射回原始工程路径的模块（常见于现代前端项目）
- localhost:xxx：本地服务资源，若用 Live Server 或 Vite 预览，这里常能看到未压缩的源文件
点击展开对应节点，双击即可在中间编辑区打开源码——此时你看到的是可读的原始文件（如 index.ts 或 utils.js），而非 bundle.js。
立即学习“Java免费学习笔记（深入）”；
设置断点并触发调试
在打开的源码行号左侧灰色区域单击，出现蓝色标记即为断点；支持多种类型：
- 行断点：最常用，在某行暂停执行
-
条件断点：右键行号 → “Edit breakpoint”，输入条件表达式（如
i === 5），满足才中断 -
DOM 断点：右键元素 → “Break on” → 选
subtree modifications等，适合调试动态渲染 - XHR/fetch 断点：在右侧“XHR Breakpoints”中添加 URL 关键字，发起匹配请求时自动暂停
刷新页面或触发对应逻辑后，代码会在断点处暂停，右侧“Scope”、“Watch”、“Call Stack”面板同步显示运行时上下文。
利用调试器实时分析与修改
断点暂停后，你可以：
- 鼠标悬停变量查看值，或在 Console 面板中直接输入表达式求值（此时作用域为当前暂停位置）
- 在 Watch 面板中添加表达式（如
Object.keys(obj)），持续观察变化 - 使用顶部控制按钮：Resume（F8）、Step Over（F10）、Step Into（F11）、Step Out（Shift+F11）逐行/逐函数执行
- 在暂停状态下，直接在编辑区修改 JS 代码并 Ctrl+S 保存，DevTools 会尝试热替换（部分改动生效，函数体修改通常需手动刷新）
注意：修改仅作用于当前调试会话，刷新后恢复原始文件内容。
