“源”面板是Edge浏览器JavaScript调试的核心工具，用于设置断点、单步执行及分析执行流程；具体步骤包括打开面板、定位JS文件、设置断点、触发调试和使用控件单步执行。
如果您在使用Edge浏览器进行JavaScript调试时需要定位和分析代码执行流程，则“源”面板是核心工具之一。以下是使用该面板设置断点并执行代码调试的具体步骤：
一、打开开发者工具并进入“源”面板
“源”面板用于查看、编辑和调试网页加载的所有脚本文件，是设置断点和单步执行的基础界面。
1、在Edge浏览器中打开目标网页。
2、按
F12或右键页面选择“检查”以打开开发者工具。
立即学习“Java免费学习笔记（深入）
”；
3、点击顶部标签栏中的
“源”
选项卡，进入源面板。
二、定位并加载目标JavaScript文件
源面板默认显示已加载的HTML文档，需手动展开或搜索才能访问关联的JS脚本，确保可设置断点。
1、在左侧文件树中展开
“页面”
节点，查看当前网页加载的所有资源。
2、若未看到目标JS文件，点击左上角
“文件夹图标”
按钮刷新资源列表。
3、也可直接使用快捷键
Ctrl + P（Windows）或 Cmd + P（macOS）
打开快速文件搜索框，输入文件名后回车跳转。
三、在代码行设置断点
断点用于暂停JavaScript执行，便于检查变量状态、调用栈及执行路径，支持行断点、条件断点与DOM断点等多种类型。
1、在源面板右侧代码编辑区中，找到需调试的JavaScript语句所在行。
2、点击该行号左侧的空白区域，出现
蓝色圆点即表示断点已成功设置。
Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
3、若需设置条件断点，右键该行号区域，选择
“编辑断点”
，输入JavaScript表达式（如i === 5），满足条件时才会触发暂停。
四、触发断点并查看调试信息
断点触发后，执行将暂停于指定位置，此时可实时观察作用域变量、调用栈及控制台输出等关键调试上下文。
1、在网页中执行会调用目标代码的操作（例如点击按钮、提交表单或等待定时器触发）。
2、当断点命中，代码编辑区高亮显示当前暂停行，右侧自动切换至
“调试器”
视图。
3、在右侧
“作用域”
面板中查看当前函数内所有变量值；在“调用栈”
中查看函数调用层级。
五、使用调试控件单步执行代码
调试控件提供精细化执行控制，支持逐行、逐函数、跳出及继续运行等操作，帮助验证逻辑分支与异常路径。
1、在源面板顶部工具栏中，找到调试控制按钮组。
2、点击
“跳过”（F10）
执行当前行，不进入函数内部。
3、点击
“步入”（F11）
进入当前行调用的函数体内部。
4、点击
“跳出”（Shift + F11）
快速执行完当前函数剩余部分并返回上层调用点。
5、点击
“继续”（F8）
恢复执行直至下一个断点或脚本结束。