如何在Chrome DevTools中直接调用页面预加载的已有JS函数

完全可以跳过复制代码的步骤，直接在Chrome DevTools中调用页面预加载的函数，仅需要确保调用时Console的作用域范围包含目标函数即可。

• 第一步：打开Chrome DevTools的Console面板，Windows/Linux设备可按快捷键F12或Ctrl+Shift+J，macOS设备可按快捷键Cmd+Opt+J唤起。
• 第二步：确认目标函数的作用域类型，按对应规则调用：
  • 若函数挂载在全局作用域：直接在Console输入函数名(参数)回车即可执行，比如要调用名为getUserInfo的函数，传入用户ID参数1001，直接输入getUserInfo(1001)回车就能拿到返回结果。你可以先输入函数名回车测试，如果返回的是函数定义内容而非Uncaught ReferenceError报错，就说明该函数在全局作用域可直接调用。
  • 若函数是闭包、模块、前端框架组件内部的非全局函数：打开DevTools的Sources面板，找到对应JS源码的目标函数所在位置，在函数内部任意行打一个断点，触发页面代码执行到该断点位置时，Console的上下文会自动切换到当前断点的作用域，此时直接在Console输入函数名(参数)即可调用。
• 特殊场景说明：如果目标函数在页面内嵌的iframe中，需要先点击Console面板顶部的上下文选择下拉框（默认显示top），选中对应iframe的上下文后再执行函数调用。
• 补充小技巧：如果页面的JS经过打包混淆，你可以通过全局搜索（Sources面板按Ctrl+F/Cmd+F）搜索函数名关键词快速定位到目标代码位置。

内容的提问来源于stack exchange，提问作者Mech