如何找到动态加载内容的来源答案

【问题标题】：how to find source of dynamically loaded content如何找到动态加载内容的来源
【发布时间】：2026-01-26 23:55:02
【问题描述】：

我想抓取this table 中的条目。它显然是在页面加载后由 javascript 填充的，所以我不想抓取（使用 webdriver 之类的东西），而是直接从 javascript 正在与之交谈的任何服务请求数据。

使用 chrome 开发工具的网络选项卡，我想我已将其缩小到 xhr POST 到 https://www.oregon.gov/oha/ERD/_vti_bin/client.svc/ProcessQuery，但显示的响应看起来并不相关，其他网络活动项目似乎都不是要么。

我如何准确追踪填充表格的请求？

【问题讨论】：

看来填充该表的实际数据来自window.sessionStorage。因此，您可能需要考虑单步执行浏览器 devtools 中的代码，以查看 window.sessionStorage 是从哪里开始填充数据的。
@sideshowbarker - 谢谢！你是怎么想出来的？我正在尝试搜索“存储”，但找不到任何东西……我没有做这种事情的经验，我该如何开始单步执行代码？
通过在 devtools 中对断点进行一些非常快速的初始设置，我认为数据可能会从运行 https://apps.oregon.gov/Application/CDN/Assets/bundle.min.js?b=twitter-bootstrap,modernizr,jasny-bootstrap,js.cookie,outdated-browser,statewide-links,helpful-page-poll_an_bs,sp_2016 中的 sessionStorage.setItem(e,e) 调用的某些代码进入 window.sessionStorage。稍后我会抽出时间自己进一步研究，但与此同时，如果您从那里更多地走代码，设置更多断点，您也许可以进一步隔离数据源。
至于调试方法，我稍后也会尝试抽出时间写一些细节。但一般来说，如果您不熟悉可以从 devtools 中获得哪些信息，您有时可以通过浏览其中的不同选项卡并展开内容，直到找到有趣的东西来发现很多信息。
@sideshowbarker - 感谢您的帮助！我从未注意到在 DOM 中“中断子树修改”的可能性。在浏览这么多缩小的 js 时遇到问题，所以我期待你的文章，但与此同时我会继续寻找......现在我明白为什么 javascript 标记会相关:)

标签： web-scraping xmlhttprequest google-chrome-devtools fetch-api web-storage

【解决方案1】：

HTML5 引入了web-storage，它和 cookie 一样，在本地缓存数据。这可以防止首次加载站点后的数据请求。在 chrome 开发工具中，转到 application 选项卡，然后在 storage 下，查找包含所需数据的密钥。如果它在那里，您可以清除存储，刷新，然后您将在获取数据的network 选项卡中看到xhr 或fetch [1] 请求。您可以右键单击请求并将其复制为curl 命令以直接请求数据而无需抓取。您可能会担心该服务会阻止来自其批准的 Web 前端之外的访问，但 cors 无法阻止您，因为它仅适用于浏览器。

[1] fetch 是自 2015 年以来改进的 xhr

感谢@sideshowbarker 将我指向sessionStorage 并回答我的cors 问题。

【讨论】：