How can I get safari to show me the pixel dimensions of the browser window, without an extension?

I have once seen safari showing me the pixel dimensions of the browser window, even when I resized it dragging left or right, it showed how many pixels in the x axis and how many pixels in the y axis.

But now when I resize the window it doesn't show the number of pixels of any current size.

How can I get the resolution / number of pixels in x and y, to show when I resize the safari browser window(as I've seen it do before)?

note- (was formerly - mistakenly - titled as safari has stopped showing me the resolution when resizing a window)

Solution 1:

Although the accepted answer works ok for individual elements as you hover, it can be tricky to capture the entire browser / window viewport as you try to resize.

Another approach would be Safari's Responsive Design Mode, which will show you the width and height in pixels as you resize. Its tucked away in the Develop Tab, then Enter Responsive Design Mode

Solution 2:

You have to have the element inspector open. So with element inspector open, then, In Safari, when you hover over an element, it shows the pixels.

And you can get it to show the pixels while you resize a window, to do that you click the crosshair icon in the inspector, then hover over the background so it shows the pixels, then move the mouse across so it still shows the pixels, and resize the window and it will update the pixel dimensions.

Note that in Chrome, if you have the inspector open, and resize, then it shows you the pixel dimensions while you resize.

Solution 3:

In case anyone is still looking for a better solution, you can use the ruler tool in the Web Inspector to show live measurements.

Open the Web Inspector (⌥⌘I) and click the ruler tool in the icons at the top left.

One thing to keep in mind is to start with a page that has no scrolling as it appears to ignore space for the scroll bar when present (15px difference in my case)