打开 Chrome Devtools 重新加载 Hulu 会导致奇怪的行为

Question

背景：我正在尝试为 Hulu 创建一个 chrome 扩展。目前，我所关心的只是从 DOM 中获取喜剧类型的电影/节目的标题。

重新创建问题的先决条件：我觉得这样说很糟糕，但是订阅了 Hulu。如果不登录，我似乎无法重新创建它。

重现问题的步骤：

• 登录后导航到https://www.hulu.com/genre/comedy-7d00a83e-556b-4f3c-b894-7c20f4360a1c。
• 打开开发工具
• 在控制台中输入以下内容：

const showLinks = [...document.getElementsByTagName("a")].filter(x => x.id.includes("title"));
console.log(showLinks);

• 上面应该打印一个大于0的数字，基本上只是抓取了ID中带有“title”的所有链接。我以后可能会也可能不会追求更好的方法，现在只是玩玩。
• 在打开 Devtools 的情况下刷新页面
• 再次输入上面的代码sn-p。您现在将注意到 0 个选定元素。由于某种原因，页面的外观也会发生变化。

任何关于为什么会发生这种情况的线索将不胜感激。任何有关获取所有标题的更好方法的建议也非常受欢迎！谢谢:)

Answer 1

几乎立即意识到我的愚蠢，开发工具默认为响应式视图，这一定是让 ​​Hulu 误以为我正在尝试通过移动/平板设备访问内容。切换到膝上型设备后不会出现该错误。