Menu
Recently I reinstalled my PC. When finished reinstalling everything I noticed upon using Inspect that the screen height and width of the page does not show on the top right corner anymore.
Did they remove it or is there a secret setting I haven't found yet? or maybe a bug? This made my life so much easier when I had to make a site responsive.
752
Right-click the image whose size you want to know and select Inspect. View your image's width and height displayed in the Chrome DevTools. (Note, the first number is always the width). If your image is not highlighted by default, click the inspect element button.
There is a button in the inspect element in Chrome to toggle device toolbar. Click it, and you are done. Show activity on this post. When you've opened the inspector, click on the kebab menu on the top right(three vertical dots), there select the doc size to "undock into separate window".
You'll notice dotted lines appearing around elements on your page. Find the content area and click to focus on it. Back in the bottom window, click Box Model on the right. The width and height will be shown.
Apparently it was removed in one of the latest updates, however you can access the Toggle device mode by pressing F12 and then pressing Ctrl + Shift + M.
If you do not like this way, you can use this example based on javascript that will tell you the current width of the window:
var onresize = function()
{
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
console.log(width);
}
Press F12 and then press Esc to see console.
Based on this answer: https://stackoverflow.com/a/28241682/3399806
146
That was definitely a useful feature that they removed. Luckily there's a Chrome extension that you can use to achieve the same functionality:
Download here: Viewport Dimensions
Restart your browser after installing. Enjoy!
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
