So this one is strange.

Steps to reproduce:

1. Go to https://www.sephora.com/search?keyword=make%20up%20primer
2. Inspect Element with contextual menu on "Sort by:" for example

Expected:
Open devtools at the right position in the inspector.

Actual:
open the inspector with the body selected.
If I try to manually go to the right place, I can't find it. Only a parent is visible in the inspector see screenshot.

But if I copy outer HTML on this node.
and paste this into a code editor I get the right markup.

Mike, this issue seems to have similar symptoms as Bug 1524005, Bug 1522273 and similar ones you fixed lately. Can you please have a look if this is another case that needs to be captured?

This is happening on Duolingo site too. :/
This is super inconvenient for diagnosing issues, given the number of react websites these days.

There is no sort by that I can see at https://www.sephora.com/search?keyword=make%20up%20primer

At the same time there is an issue on https://www.duolingo.com/

Adding a screenshot of the page with sort by

sephora.com have completely different products, websites and website technologies depending on which country you are in.

Because I am UK based and they have no UK website I was forced onto the french version, which doesn't have this issue. Incidentally, even using a US VPN didn't prevent me being redirected to the French website, just saying.

After some experimentation I finally created a link that takes me to some products on the website you attached in your screenshot.

So just to clarify that the following websites have issues:

• https://www.duolingo.com/ (Inspect "Get Started").
• https://www.sephora.com/brand/kaja/all (Inspect "Sort by").

https://hg.mozilla.org/mozilla-central/rev/9d4a32e1dd25