Inspect Element (dev tools) broken in responsive mode

macos
#1

Description of the issue:

When doing Inspect Element (developer tools) in responsive mode, the blue overlay for showing what is being inspected, is wrongly placed. I’ve added a screenshot to illustrate.

Steps to Reproduce (add as many as necessary):

Visit any website (https://brave.com will do fine) and View -> Developer -> Inspect Element. Enter responsive mode, and hover an element. The blue box that should illustrate what element it is, is not correctly places.

Expected result: I would expect it to illustrate the right element. Try it out in Chrome for instance.

Reproduces how often: Every time.

Operating System and Brave Version(See the About Brave page in the main menu):

MacOS X 10.14.4, Brave version 0.63.55 Chromium: 74.0.3729.131 (Official Build) (64-bit)

#2

cc @Mattches @sriram for assistance

#3

Seems to work fine on Linux when browser is in maximized state and set to responsive.
Works same on all channels.

@mmj is the browser set to restore state or maximized state?

cc: @LaurenWags could you try this on macOS?

#4

It worked fine until I started manually messing with the height and width. Then it stopped working.

@mmj did you manually adjust height/width?

Initial try:

After manually adjusting width and height to match screenshot from initial post:

1 Like
#5

Initially, yes. But once it broke, I couldn’t get it right again.