浏览器中如何确定触发指定脚本执行的调用方？

开发者阿泽

2026-10-3

mode-json.js 是 Ace 编辑器动态加载的语法高亮模块，你看到的调用栈仅显示全局作用域，是因为脚本通过动态插入 <script> 标签的方式加载，脚本本身执行时的同步调用链已经和触发加载的代码上下文断开，所以直接抓脚本执行的调用栈看不到调用方。

你可以通过以下几种方式定位调用方：

开启浏览器调试器的异步调用栈追踪
Chrome 打开 Sources 面板，勾选右侧 Call Stack 区域的「Async」复选框，Firefox 调试器的调用栈面板也有对应的「显示异步调用栈」开关。开启后再给 mode-json.js 第一行加断点，就能看到触发脚本加载的异步调用链。

拦截动态脚本插入逻辑
在你的页面代码最开头加入以下代码，触发 mode-json.js 加载时会自动打印完整调用栈：

const originalCreateElement = document.createElement;
document.createElement = function(tagName, ...args) {
  const el = originalCreateElement.call(this, tagName, ...args);
  if (tagName.toLowerCase() === 'script') {
    const nativeSrcSetter = Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src').set;
    Object.defineProperty(el, 'src', {
      set: function(val) {
        if (val.includes('mode-json.js')) {
          console.trace('触发mode-json.js加载的调用栈：');
        }
        nativeSrcSetter.call(this, val);
      },
      configurable: true
    });
  }
  return el;
}

给 Ace 内部模块加载逻辑加断点
搜索 ace.js 中的 loadModule 方法，在该方法入口加断点，Ace 所有动态模块（包括语法模式、主题等）的加载都会走这个逻辑，触发加载时就能直接看到上层调用方。
排查业务代码中设置编辑器模式的逻辑
绝大多数情况下该脚本加载是业务代码主动触发的：你在打开 JSON 文件时，会调用类似 editor.session.setMode("ace/mode/json") 的方法设置编辑器语法模式，Ace 检测到对应模式模块未加载时就会自动拉取对应的 mode-json.js 文件，直接搜索代码中包含 setMode 或者 ace/mode/json 的片段即可快速定位触发位置。