web-scraping - Firefox 开发工具调试器中的 'SOURCE' 文件来自哪里？

Question

使用 Firefox 的 Web 开发工具并从 https://www.espn.com 加载主页，我切换到“调试器”选项卡并看到以下内容:

如果我尝试在开发工具中“在文件中查找”(Ctrl+Shift+F)，例如“data-id”，我会得到如下结果:

我的问题是关于结果，例如两个列为“(1 match)”且没有源文件名的结果。如果我单击其中一个结果，我会跳转到“SOURCE”文件，如下所示:

一般性询问(仅使用 espn.com 作为示例)这个“SOURCE”文件内容是什么，是什么生成的，等等？我希望更好地了解特定网站如何向其页面提供动态内容，并在这些类型的结果/"file"中找到我感兴趣的信息。但如果不了解它们，就不清楚我如何能够请求/生成/抓取它们。

(此外，我注意到只有 Firefox 的开发工具会显示这些类型的生成(假定)文件，而 Chrome 则不会。)

谢谢

Answer 1

您可以通过多种方式生成此内容:

new Function(content)这样做(这是 ESPN 网站使用的一个)

new Function(`const unique_string="_AAAAA_"; console.log(unique_string)`)();

Go to Firefox's dev-tools' debugger and search for the unique string

eval(content)这也是吗

new Function(`const unique_string="_BBBBB_"; console.log(unique_string)`)();

Go to Firefox's dev-tools' debugger and search for the unique string

Element#append(Range#createContextualFragment("<script>"+content+"<\/script>")也是如此

document.body.append(
  document.createRange().createContextualFragment(
    `<script>const unique_string="_CCCCC_"; console.log(unique_string)<\/script>`
  )
);

Go to Firefox's dev-tools' debugger and search for the unique string

也许还有其他我现在没有想到的。
(说实话，我觉得像 setTimeout(content) 这样的东西没有产生一个有点令人惊讶)。