Chrome DevTools Issue

[rhhutchins]

I’ve somehow managed to make DevTools in Chrome show only a cropped part of my screen. I was futzing around with a Chrome extension to allow me to capture a scrolled page before this happened.

I have an HTML file open in VS Code then right-click and choose Open with Live Server. The page displays without being cropped; but when I right-click and choose Inspect, I get a cropped image of my screen instead of the full image (see ss). This means that I cannot inspect anything but the cropped area. Searching hasn’t revealed an answer.

Can anyone help?

[SamA74]

That’s in device emulation mode, see it’s gone to the size of iPhone 12 Pro.
You can toggle the mode on/off with that second icon above the inspect panel.
As a side note, it’s showing your page isn’t responsive to mobiles.

[rhhutchins]

Thanks, Sam. I’m not familiar enough with DevTools to spot that. I must have fat fingered something.

I have the entire screen displayed now, but I have to scroll to get to all of it. Is there a way to make the screen appear without having to scroll?

[Zensei]

You can try hitting the following keystrokes (without the plus of course) as many times a necessary:

Ctrl + -

[DaveMaxwell]

@Zensei

You can try hitting the following keystrokes (without the plus of course) as many times a necessary:

Or just use the dropdown at the top to something else (responsive is the default, but the OP changed his to iPhone 12)