Responsive Inspector (beta) released!

Responsive Inspector logoI’m really proud to announce a beta release of Responsive Inspector extension for the Google Chrome browser. It’s a little side project that I’ve been working on together with Filip Łysyszyn - a colleague from Adobe and a great UI/UX designer. In a nutshell, Responsive Inspector allows viewing defined media queries of visited websites. It is very useful when developing responsive web layouts as it can show what min-width or max-width media queries are specified in CSS stylesheets. In addition it also enables pixel perfect browser resizing, taking and saving whole page screenshots, CSS media query code viewing, and sharing web designs on Behance service as Work In Progress.

You can find it here in the Chrome Web Store. Remember it is a beta release, so if you find any bugs or you would like to share your feedback with us you can use this contact form. Below you will find a screen shot of Responsive Inspector in action and a short video with an overview of all of its features.

Responsive Inspector screen shot



  • Facebook
  • Twitter
  • DZone
  • LinkedIn
  • Email

46 comments

    • Piotr

      Thanks for your feedback, yes PNG is possible, I think I will add configuration option in the next major release and it will be set there.

  1. Davor Tomic

    Lovely tool! I like how it highlights only active CSS for a certain breakpoint.

    Suggestion for the developers: how about adding an option to be able to export just the active CSS for a certain breakpoint into a separate file?

  2. Jaik Dean

    Lovely stuff! It would be nice if any currently-active media queries could be highlighted so you know what styles are currently applied.

  3. Jeremy

    Thank you for this! It’s incredibly helpful to be able to take screenshots at different breakpoints, especially of local work. Great stuff.

  4. Robert Novak

    Cool features but I can’t open snapshot image (jpg) into Photoshop!
    “Could not complete your request because an unknown or invalid JPEG marker type is found.”

    • Piotr

      Thanks for pointing this out! I see same problem on my machine, I guess it’s some crazy Chrome thing! I guess I will have to switch to PNG export ;)

  5. Allan Edwards

    Nice tool, I would love if I could dock the navigation to the browser. The window closes every time I move the window or resize the browser.

      • Allan Edwards

        That would be awesome. There is a tool that I use called Pixel Perfect that works in Chrome and docks to the browser on the right side. However, the web inspector view should be a better move if you can get it in the web inspector view. Keep up the good work.

  6. Jeremy Werst

    When I tried using it to size to the media queries on my website the [] button did nothing. The screenshot button would scale it to the right size and take the picture, but then went right back to full width. Version 26.0.1410.63 of Chrome, Linux Mint 64bit for an OS.

  7. Pingback: Responsive Inspector, extensión para ver los media-queries de un sitio web | DSÑ + IEO | GRÁFICO
  8. Pingback: Rriver » メディアクエリの確認やウィンドウ幅の変更ができて、ページ全体のスクリーンショットが撮れる「Responsive Inspector」が便利かも
  9. Pingback: Responsive Design Weekly #54 | Responsive Design Weekly
  10. Pingback: April 28, 2013: Weekly Roundup of Web Design and Development Resources
  11. Aaron

    Hi Piotr…thanks for creating this tool! I did notice however that vertical media queries weren’t indicated in the inspector. Do you plan on including this in a future release?

  12. Pingback: 測試 Web Responsive Design Tool | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
    • Winn

      I think figured out what the root cause of the issue is. When css files are loaded via the @import method instead of the style tag, Responsive Inspector does not recognize media queries in those css files. Our sites are built with Drupal, which uses the @import method when the site is under development, and then switches to a single aggregated css file that is loaded with the style tag for production sites. It would be awesome if you can figure out how to load css files that are @imported.

  13. ipod69

    Before I install, let me say guys how happy I am for your family names! Grzegorz Brzęczyszczykiewicz. Chrząszczyżewoszyce – powiat Łękołody

  14. Pingback: OK, these are nerd cool - FRANCES INK
  15. Pingback: Magie, pozioni e incatesimi - Wizard #2 - Grimoire
  16. Torsten

    Hi,

    This looks like a great extension, however, it would be great, if you’d add support for WordPress themes. Looks like the tool cannot cope with @imported CSS and, because of that, doesn’t show any MQs. That’s a pity.

    Cheers,
    t

  17. Pingback: Responsive Inspector | saviomd.com/blog

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>