Apps

Chrome add-on Responsive Inspector lets you preview media queries

A handy add-on for the Chrome browser allows you to inspect media queries on active URLs and understand how responsive websites interact at various screen sizes.
Created by Piotr Walczyszyn, the Responsive Inspector Beta release is a Google Chrome Extension that can be used as a tool to examine media queries that are defined within the CSS of websites that you are visiting in the Chrome browser. In addition to visually inspecting media queries, the Responsive Inspector allows you to preview websites with pixel-perfect browser resizing, and also features a screenshot-sharing option. The Responsive Inspector can also be found on the Google Chrome web store as an extension to Chrome; just click to "Add to Chrome" then click "Add" and the icon is then added to the top right of your Chrome toolbar as shown in Figure B:

By clicking on the Responsive Inspector icon, you can then preview the media queries that are defined for the active URL in the Chrome browser. The first feature allows you to view any media queries that are defined by a maximum width, any media queries that are defined for both the minimum and maximum width, and finally, any media queries that are defined by a minimum width up to infinity. For example, thirteen media queries are defined for the Word Wildlife Fund website as displayed in Figure C below, and all examples in this demonstration will be inspecting the Word Wildlife Fund website.

Figure C

The second feature of the Responsive Inspector allows you to preview the corresponding code for the particular media query by clicking the button on the right side of each displayed media query as shown in Figure D; I have the cursor hovering over the {} icon on the right side of the max width equals 900px bar.

Figure D

Once clicked, the Responsive Inspector opens up a preview of the CSS code into a new window to the corresponding media query as found in the CSS and is shown in Figure E.

Figure E

A third feature of the Responsive Inspector allows you to test and view the page at a defined width by sliding the cursor on the top pixel rule to match the corresponding horizontal bar as shown in Figure F:

Once you have selected the width you wish to view, you can click on that setting to resize the browser window at that pixel width, and then you can view the responsiveness of the website you are inspecting, as shown in Figure G. This gives you a view of how the website behavior responds to the resized browser window, and you can use any of the widths -- not just the defined media queries in your testing. Things to notice are navigation, image placement, image resizing, and text and font resizing to fit the new screen size.

Figure G

And then selecting 480px from the Responsive Inspector, we get this resized browser window view as shown in Figure H:

A fourth feature of the Responsive Inspector is the ability to take a whole page screen capture of the active page, as displayed in the current resized browser window. The "Take whole page screenshot" option is displayed in Figure I below. The whole page screenshot stitches together the entire website into one image, which can be saved as a JPG for future reference and documentation. This is helpful for sending images to clients and customers or for demonstrating the various media query views that can be generated. It also helps customers to understand how the website will look and feel within each browser screen size.

Figure I

Figure J below displays the process while Responsive Inspector is stitching together the whole page screenshot.

The fifth and last feature gives you the ability to share your screenshot images on Bēhance where you can upload the screenshot images showcasing your work, and you can also discover other creative works.

The final window as shown in Figure K displays the Save File, Bē Share, and Discard file options.

Figure K

The whole page screenshot is displayed in Figure L below.

Figure L

Currently the Responsive Inspector does not allow for vertical media query height specifications, but that is being worked on now and should be available as a feature for the next version of the tool. Overall the Responsive Inspector is a great tool for understanding how responsive websites interact to various screen sizes and browser window sizes.  If you experience any issues or bugs while using the Responsive Inspector, feel free to report them to Piotr through his blog, Out of Me.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks