Google Chrome device frame is not visible when turned on : <p>I know my question is out of topic, but I will ask anyway. Because I need an answer, I also asked this on Quora.</p>

<p>From this <a href="https://winaero.com/blog/make-screenshot-of-web-page-with-device-frame-in-chrome/" rel="noreferrer">site</a> it shows how to enable the frame. </p>

<p>I want to take a screen shot / even full screen shot of my web app for showcase / use it for reporting. I used <code>Chrome</code> for this. </p>

<p>In the developer's tool there is this option to hide and show the <code>Device Frame</code>. Yet I didn't see it. </p>

<p><a href="https://i.stack.imgur.com/oocvO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oocvO.png" alt="sample"></a></p>

<p>As you can see, there is an overflow menu from the right - <code>hide device frame</code>. I already enabled it. </p>

<p>I take a sample screen shot from Angular Material page. As you can see there is no device frame wrapping the web app. Yet I enable the device frame. :( </p>

<p><a href="https://i.stack.imgur.com/ots4s.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ots4s.png" alt="angularMaterial"></a></p>

<p>I thought it will be visible the device frame once the screen shot is done. But what I see is what I get. </p>

<p>Is this a bug? Is there any extension that can perform this operation?</p>
