如何在浏览器控制台访问$(document).ready()方法内定义的函数

问题背景 #

此前有过同类场景的疑问，当时咨询的是如何在浏览器控制台访问定义在window.onload = function() {// code and functions}内部的所有JavaScript函数。本次需要实现相同效果，访问jQuery的ready方法内定义的函数，对应代码结构如下：

$(document).ready(function() {
  // 我想要在浏览器控制台访问此处定义的所有函数
})

解决方案 #

核心原理：定义在$(document).ready回调内的函数属于闭包私有变量，默认不会暴露到全局作用域，因此外部无法直接访问，可根据你是否有权限修改源码选择对应方案：

方案1：可修改页面源码（推荐） #

直接将需要访问的函数挂载到window全局对象即可完成暴露，控制台可直接调用：

$(document).ready(function() {
  // 原内部定义的函数
  function getPageData() {
    return { id: 1, title: '测试数据' }
  }
  function submitForm() {
    console.log('表单提交成功')
  }

  // 单个暴露
  window.getPageData = getPageData

  // 多个函数可以统一挂载到一个自定义全局对象，避免污染全局命名空间
  window.devTools = {
    getPageData,
    submitForm
  }
})

调用方式：

• 单个暴露的函数直接在控制台输入getPageData()即可调用
• 统一挂载的函数输入devTools.submitForm()即可调用

方案2：不可修改源码，仅做临时调试 #

用浏览器开发者工具的断点功能即可临时访问：

1. 打开开发者工具的「源代码」面板，找到包含$(document).ready的对应JS文件
2. 在ready回调内部的任意可执行代码行打上断点
3. 刷新页面触发断点停留，此时控制台的当前作用域为ready的闭包作用域，直接输入内部函数名即可调用
4. 如果需要在断点释放后仍能调用，可以在断点停留时在控制台手动将函数挂载到全局：输入window.tempSubmit = submitForm，之后即使断点释放，你也可以随时调用tempSubmit()

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