函数在调试面板中显示方式取决于其定义形式：函数声明始终显示明确函数名；匿名函数表达式显示为“anonymous”；具名函数表达式则显示所起的内部名称，显著提升调用栈可读性与错误定位效率。
函数在调试面板（如 Chrome DevTools 的 Sources 或 Call Stack 面板）中如何显示，直接取决于它是函数声明还是函数表达式，尤其是是否具名。这个细节对排查调用栈、定位错误和理解执行流程很关键。
函数声明在调试面板中始终显示函数名
函数声明必须带名称，且该名称会完整出现在调用栈、断点提示、堆栈跟踪中：
- 即使你在代码里写在后面，DevTools 仍能准确标记为
foo而不是anonymous - 断点悬停时显示
function foo() { ... }，清晰可读 - 错误堆栈中会显示
at foo (script.js:5:12)，便于快速跳转
匿名函数表达式显示为 “anonymous”
如果函数表达式没写名字，DevTools 就无法识别其身份：
- 调用栈里统一显示
anonymous或<anonymous></anonymous> - 多个匿名函数嵌套时，堆栈难以区分哪个是哪个（比如连续几个
setTimeout回调） - 断点悬停只显示
function () { ... }，缺少语义信息
具名函数表达式（NFE）能改善调试体验
给函数表达式起个名字，名字虽不能在外部访问，但会被 DevTools 识别并用于展示：
-
const handleClick = function submitForm() { ... };→ 调试时显示submitForm - 递归调用中也能正确显示函数名，避免
anonymous堆叠 - Chrome 和 Firefox 都支持该行为，Node.js 的
node --inspect同样生效
实际调试中的典型对比
假设同一段逻辑用两种方式实现：
- 函数声明：
function validateEmail(email) { ... }→ 堆栈显示validateEmail - 匿名表达式：
const handler = function() { validateEmail(...); }→ 堆栈显示anonymous - 具名表达式：
const handler = function onInputSubmit() { ... }→ 堆栈显示onInputSubmit
名字越具体，调试时越省力。不花哨，但真有用。
