调试不可修改代码的Web应用：如何查看HTML事件触发的JS函数？

• 事件监听器定位：打开浏览器开发者工具的「Elements」面板，选中目标下拉元素，在右侧面板找到「Event Listeners」标签，展开后查看绑定的change（或相关）事件。点击事件对应的处理函数，可直接跳转到「Sources」面板的代码位置，快速找到触发逻辑的入口函数。
• 调用栈完整追踪：在「Sources」面板找到事件处理函数的代码行，点击行号左侧添加断点。切换下拉选项触发事件后，程序会暂停在断点处，此时查看右侧「Call Stack」面板，能看到从事件触发到文本框更新的完整函数调用链路，逐层回溯即可定位计算逻辑所在的函数。
• 无侵入式函数日志：针对怀疑的函数，在「Sources」面板右键选择「Add conditional breakpoint」，在输入框中填写console.log('函数调用:', arguments); debugger;。函数执行时会自动打印调用参数并暂停，无需修改源码就能追踪调用时机和传入数据，尤其适合Backbone视图的自定义方法。
• Backbone专属技巧：在控制台直接获取下拉元素对应的Backbone视图实例（例如$('.dropdown-selector').data('view')，具体选择器需匹配应用实际情况），然后临时包装目标方法添加日志：

  const targetView = $('.dropdown-selector').data('view');
  const originalMethod = targetView.updateTextBox; // 替换为实际的方法名
  targetView.updateTextBox = function() {
    console.log('updateTextBox被调用');
    return originalMethod.apply(this, arguments);
  }
  

  这种方式不会修改源码，刷新页面后自动失效，可安全追踪视图方法的调用。

内容的提问来源于stack exchange，提问作者DNép