I was working on a Chrome Extension (feel free to download and use it) this evening and I noticed something awesome.
If you right click on a webpage in Chrome, one option in the menu is “Inspect Element.” It shows a lot of programming mumbo jumbo which is extremely useful in programming, but not necessarily for anything else, especially if you’re not programming.
At the bottom of the window, I noticed a new tab that said “Emulation.” So, I clicked on it.
Lo and behold, in the latest Chrome update (M34 stable channel) you can view any webpage as if it were on a mobile device. How. Awesome. Is. That? I was able to select one of dozens of Android devices and then emulate the page (after a quick refresh) to see how it would behave…including any JavaScript you have in there as well.
Click any image to see it bigger.
I used to have to resize my browser window or put the page I was working on up on a secure testing server or something. Gone are the days of trying to test for mobile on anything else because I can do it right in the Chrome browser. It even reads custom CSS based on media queries (if you use those).
Now, do note, that if you’re developing across multiple browsers (and if you’re doing web development, you should be doing that), so you’ll still need to test for compatibility in Firefox, Opera, Safari, etc. This is just one way to easily knock out some mobile responsive design from your browser.
Why is this useful? If you teach any kind of web development class, this will make your life much easier. Also, since 50% of the world accesses the web via mobile as their primary method, responsive design is a must for any design course. This is one way to help make that process easier for quick cross-platform testing as students learn.