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

Question

Background: I'm trying to create a chrome extension for Hulu. For now, all I'm concerned with is grabbing the titles of the movies/shows in the Comedy genre from the DOM.

Prereq to recreate the issue: I feel terrible saying this, but a Hulu subscription. I can't seem to recreate it without logging in.

Steps to recreate the issue:

• Navigate over to https://www.hulu.com/genre/comedy-7d00a83e-556b-4f3c-b894-7c20f4360a1c after logging in.
• Open Devtools
• Enter the following in the console:

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

• The above should print a number greater than 0, basically just grabbed all links with "title" in their ID. I may or may not pursue a better method later, just playing around for now.
• Refresh the page with the Devtools open
• Enter the above code snippet again. You will now notice 0 selected elements. The look and feel of the page also changes for some reason.

Any clues on why this is happening would be greatly appreciated. Any suggestions on a better way to grab all the titles would also be quite welcome! Thanks :)

Answer 1

Almost immediately realized my folly, the devtools defaulted to a Responsive view which must have fooled Hulu into thinking I was trying to access content through a mobile/tablet device. The error does not occur after switching to a laptop device.