如何查看JS渲染内容的网页调用的API？fetch/XHR仅显示svg怎么办

你遇到的是SPA站点常见的接口隐藏场景，不需要逐个排查所有JS函数，按下面的步骤操作就可以快速定位：

• 先检查网络面板的全部分类，不要只看fetch/XHR：部分站点会用jsonp、websocket甚至普通的GET请求加载JS格式的静态数据，这类请求不会被归类到fetch/XHR里，你可以在过滤器里直接搜json、api、data这类关键词缩小范围
• 启用全局搜索匹配响应内容：按Ctrl+Shift+F（Mac是Cmd+Opt+F）打开Chrome devtools的全局搜索，输入页面上渲染的任意一段独有的文本内容（比如商品名称、文章标题的某个片段），devtools会自动匹配到返回这段内容的请求，直接定位数据源
• 拦截全局请求方法：如果上面的方法都找不到，可以在控制台注入代码劫持请求方法，打印所有请求地址：

// 劫持fetch
const originalFetch = window.fetch;
window.fetch = (...args) => {
  console.log('Fetch请求:', args[0]);
  return originalFetch.apply(this, args);
};
// 劫持XMLHttpRequest
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(...args) {
  console.log('XHR请求:', args[1]);
  return originalOpen.apply(this, args);
};

注入之后刷新页面，所有请求地址都会直接打印在控制台里

• 最后才考虑静态分析JS：如果确实是数据硬编码在JS里，也不需要挨个读函数，直接在网络面板的JS分类里把所有JS文件下载下来，用文本编辑器全局搜http、url、接口这类关键词，快速定位资源地址

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