How to enable vertical scroll bar while debugging responsive design on mobile?

Question

Mac + Chrome 101 build

In below case, how can I enable vertical scroll bar without which I can't view bottom of mobile screen.

Is this bug or I am missing some setting ?

Answer 1

Typically when you're simulating the site as a mobile device on desktop, the expectation is that you'd use the scroll wheel on mouse or a two-finger drag gesture on trackpad to simulate the screen swipe gesture on a real mobile device.

However, there is a way to permanently show the scrollbar:

Open the three-dot menu on the top right corner and click on "Add device type". This will show a new dropdown in the toolbar. (The label might be Mobile.) Open the dropdown and choose Desktop. This will show the scrollbars.

Notes:

1. Make sure that you have enabled "Always" for the "Scroll bar behavior" or "Show scroll bars" setting in your macOS System Settings otherwise the scrollbars won't show even on Desktop type.

2. In the Dimensions menu, you should choose "Responsive" if you want to freely change the device type. If you choose a fixed device, the device type dropdown will be locked to that device and disabled.

3. You may want to add a few pixels more to the device width to compensate for the permanent scrollbar. On macOS, this is typically 15 pixels.

Bonus Tip: As you can see below, I have also enabled the display of media queries and rules. It could be quite useful for you if you're debugging a responsive website. They are also on the same menu.