-1

Here is an example page:

https://www.lazada.vn/products/dam-xoe-so-mi-vien-den-han-quoc-dx30-trang-i145861801-s151858737.html

When I right-click the main product image on this page and choose "Inspect Element from the context menu, the DevTools open, but select the <body> tag instead of the one I clicked.

Chrome's DevTools do select the <img> tag, as expected.

Is this a bug in the Firefox DevTools?

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
Alex Sharov
  • 154
  • 1
  • 9

1 Answers1

1

When you right-click the image, you actually inspect the overlaying semi-transparent blue <div>, not the <img> tag. This <div> is only temporarily added when hovering the image.

The reason why you don't land at that <div> in the Firefox DevTools is that it's removed again as soon as you hover the context menu, while in the Chrome DevTools it's still there when moving the cursor over the context menu.

This is because mouse events are obviously blocked in Chrome while the context menu is shown, in Firefox not.

So, I see two solutions for your problem:

  1. Use the inspection tool from within the Firefox DevTools:

Inspector button within Inspector panel in Firefox DevTools

This shows a highlighter, which blocks mouse events, so that you can inspect the image.

  1. Request to change this behavior so that mouse events are not triggered while the context menu is open.
Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132