To fellow developers!
I’m thrilled to introduce you to U-Eyes: Mobile Device Simulator, a powerful Chrome extension for web developers and designers looking for a simple but elegant way to perform responsive testing, or creating mock-up for your websites on mobile devices.
With an inventory of 35+ devices, U-Eyes can help covering your responsive testing extensively, from mobile phones to tablets. Also, it simplifies the process of creating mock-up, or documenting your tests, with various screenshot modes and screen recording capabilities.
You don’t have to take my words for it, just take a minute to check out this interactive demo.
Get Started With U-Eyes: Mobile Device Simulator
Anyone can get started with U-Eyes simply by visiting the extension home on Chrome Web Store (or alternatively the extension home page which also includes documentation), then click on the “Add to Chrome” button to install the extension to your Chrome browser.
Once installed, you’ll see the U-Eyes: Mobile Device Simulator icon in your Chrome browser toolbar. Click on the icon to activate the extension, and you will see your website in mobile view!
In some cases, the icon may not be immediately available on the browser toolbar, but you have to click on Extensions icon and “pin” it to your browser toolbar.
What Can You Do With U-Eyes: Mobile Device Simulator
1. For starter, responsive testing on different devices
Once you have U-Eyes available on your Chrome browser, you can easier view any website in mobile view by visiting that website, then click on the U-Eyes icon to activate mobile view.
You can switch to a different device by clicking on the device panel on the top-right to open the device inventory.
You can also switch the device orientation between portrait and landscape by clicking on the Orientation button.
2. Taking screenshots of the mobile view
Up until this point, U-Eyes seems to be just a beautified mobile viewer, doing something you can already perform with Chrome Dev Tools. However, the difference is that U-Eyes can help you take screenshots of the mobile view, without the need of manually selecting/cropping the screen.
Whether you only want the screenshot of the mobile screen (content without device frame), or the screenshot of the whole device (including device frame), or the screenshot of the whole page from top to bottom, U-Eyes can take care of it with just 1 click. You just need to select Screen Shot, Device Shot, or Full-page Shot!
For websites that have some animations/loading, you can also click on Settings to config the timer and make sure that U-Eyes will only take the shot after everything has loaded as expected.
If you have multiple pages (on the same domain/website) that you want to take screenshots, you can use Automatic mode and provide a list of urls. U-Eyes will iterate through your list, and take the screenshots that you desire.
3. Recording your interaction on the mobile view
Sometimes, static screenshots just can’t get the job done. Static screenshots certainly cannot show the beautiful animations that you spent weeks perfecting, or how a user can interact with your website to achieve the best outcome.
Well, U-Eyes can, by recording the mobile view with screencast feature. You can just click on the Screencast button, start interacting with your website on mobile view, and everything will be captured in a compact WEBM file.
4. Save or share your outputs
The screenshots (or recording) that you produced with U-Eyes are all processed locally on your machine, and it will not be sent or stored anywhere without your permission.
Once the screenshot/recording is processed and ready, you can save it to you computer or upload to Imgur to share it with your colleagues!
Remember, please do not upload the file to public cloud if it contains sensitive data!
5. Monitor your website’s performance metrics
Although it is still a work-in-progress, the Performance Dashboard highlights a couple of key performance metrics for your website on the top-left. The metrics may not be 100% accurate, dues to your network traffics and other factors, but it can act as a high level indicator to monitor improvement.
Final words
For the fellow developers and designers who read this article until the end, thank you so much for your patience. As you can see from this guide, U-Eyes: Mobile Device Simulator is designed to seamlessly integrate into your Chrome browser, making it effortless to use without any learning curve. Plus, it’s lightweight and won’t slow down your browsing experience. It’s perfect for checking responsive designs, creating mock-ups, and enhancing your overall web development workflow.
Have questions or want to share your experience with U-Eyes: Mobile Device Simulator? Feel free to drop a comment below. I’d love to hear from you!
Happy developing!
Top comments (0)