Menu
When you have the Chrome developer tools open, and you resize the window, a small white box appears in the top right corner telling you the dimensions of the window as you resize it. I've marked it with a big green arrow in the screenshot below.
This is a very useful tool, but I've noticed that frequently the values are unexpected and inconsistent with the widths of other elements. For example, when I took the screenshot below, Chrome says the window width is 419px. But if I click the html elements, whose width should be 100%, Chrome tells me its width is 404px. This is confusing to me. Why are they different? Is this a bug in Chrome?
467
# Open the Issues tabOpen DevTools. Click the Go to Issues button in the yellow warning bar. Alternatively, select Issues from the More tools menu. Once you're on the Issues tab, click the Reload page button if necessary.
Open Chrome Developer Tools. Click the Toggle Device Mode option near top left of the developer tools section. Choose Responsive from the dropdown menu at the top of the screen. Edit the dimensions, which are also at the top of screen, right next to the dropdown.
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.
Show viewport width when resizing window in Chrome developer tools? I use Chrome with developer tools docked to the right hand side of the window. Chrome used to show the viewport dimensions at the top right of the window, when you resize the viewport by dragging the central divider.
I use Chrome with developer tools docked to the right hand side of the window. Chrome used to show the viewport dimensions at the top right of the window, when you resize the viewport by dragging the central divider. I've always found it useful for testing responsive sites and media queries.
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.
There are many ways to open Chrome DevTools, because different users want fast access to different parts of the DevTools UI. When you want to inspect a DOM node's styles or attributes, right-click the element and select Inspect. Figure 1. The Inspect option Or press Command + Option + C (Mac) or Control + Shift + C (Windows, Linux, ChromeOS).
FYI those dimension numbers are document.documentElement.clientWidth and document.documentElement.clientHeight.
Robert is correct. Make sure the zoom ratio is 100% to get the correct dimensions.
88
That's including the vertical scroll bar's width. Try removing the scroll bar and then check. It will match exactly.
23
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
