javascript - how can i display border height and width in pixel in chrome or firefox to test for responsive webdesign - Stack Ov

admin管理员组

文章数量:1327328

Since today in the morning I am searching for an add on for chrome or firefox which shows me the border lines(height, width) of page, so that i can test my page by resizing and watching its heights and widths in border lines.

i tried, window resizer, Web Developer and a bunch of others.. but they dont show me dynamically the borders of page in pixels during resize.

i hope, i explained it clearly

example:

Since today in the morning I am searching for an add on for chrome or firefox which shows me the border lines(height, width) of page, so that i can test my page by resizing and watching its heights and widths in border lines.

i tried, window resizer, Web Developer and a bunch of others.. but they dont show me dynamically the borders of page in pixels during resize.

i hope, i explained it clearly

example:

• javascript
• html
• css
• google-chrome
• firefox

Share Improve this question Follow edited Aug 25, 2013 at 10:45 doniyor asked Aug 25, 2013 at 10:36 doniyordoniyor 37.9k6161 gold badges181181 silver badges270270 bronze badges 4

• 1 You mean like this: dimensionsapp. – Jonathan Commented Aug 25, 2013 at 10:51
• @Jonathan, yes, exactly, but is there any integrated version so that i can see it in every tab i open right inside my normal browser? – doniyor Commented Aug 25, 2013 at 10:53
• You can use ctrl+shift+m on Firefox – psd2htmldepot Commented Aug 25, 2013 at 10:56
• IE devtools have a resize option under the 'Extra' tab. – Jonathan Commented Aug 25, 2013 at 10:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

In Chrome, there is a "gear" icon to the bottom right of the development tools (right-click on any element, then "Inspect Element") that opens up the general settings. Just check "Show Rulers" in the "Elements" section, then hover on elements in the HTML code in the Elements pane.

In Firefox you can also select "Responsive design view" from the web developer menu. This allows you to resize a page and make it responsive in a much more interactive way.

本文标签：