在Safari中如何查看请求发起者（Initiator）及未知请求来源？

• 设置资源加载断点
  打开Safari开发者工具（快捷键Cmd+Opt+I），切换到Sources标签，在左侧Breakpoints面板点击+，输入*.ttf作为断点规则。刷新页面后，当请求PublicSans-Light.ttf时会自动触发断点，此时查看Call Stack面板就能看到发起请求的代码调用链，直接定位到源头。

• 溯源CSS字体定义
  切换到Elements标签，随便选中页面一个元素，打开Computed面板找到font-family属性，点击属性旁的箭头（或右键选「Show Definition」），就能跳转到定义该字体的CSS规则，找到对应的@font-face声明，看看是不是第三方主题（比如你提到的analytics主题）、嵌入的第三方脚本偷偷引入了这个字体。

• 启用Network面板的Initiator列
  Safari的Network面板其实有Initiator列，只是可能默认没显示。右键点击Network表头，勾选「Initiator」，找到那个字体请求后，点击Initiator列里的文件/链接，就能直接查看发起请求的代码位置。如果显示「Other」，大概率是第三方插件或广告脚本搞的，可以逐个禁用排查。

• 用控制台拦截请求并打印调用栈
  在开发者工具的Console标签里粘贴这段代码，刷新页面：

  // 拦截fetch请求
  const originalFetch = window.fetch;
  window.fetch = function(...args) {
    if (args[0].includes('PublicSans-Light.ttf')) {
      console.trace('字体请求发起者:');
    }
    return originalFetch.apply(this, args);
  };
  
  // 拦截XMLHttpRequest请求
  const originalXHR = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function(method, url) {
    if (url.includes('PublicSans-Light.ttf')) {
      console.trace('XHR字体请求发起者:');
    }
    originalXHR.apply(this, arguments);
  };
  

  控制台会打印出完整的调用栈，顺着栈信息就能找到触发请求的代码。

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