We all know the struggle. You’re on your phone and you try to open a website, but it asks you to download an app. It’s not that you don’t want the app, but you don’t have enough space to download it. Plus, the website works fine on your computer. So why doesn’t it work on your phone?
This is because of mobile view settings! Your phone will automatically switch to the mobile version of a website when it detects that your phone is smaller than a computer screen. This is mostly to make websites easier to navigate and use on smaller screens, but many times (like in Chrome and Firefox) also hide certain features or options.
At this point in time, there are no Chrome extensions for mobile view, so we decided to make one!
Chrome Extension For Mobile View
Web developers have to test websites on specific browsers to ensure the site’s compatibility with said browser’s specifications. Tests are run repeatedly during development to help them verify how every change to the codebase reflects in the browser. This process ensures that web developers are optimizing their sites for the real world.
However, developers must bear in mind that in 2021’s first quarter, 54.8% of global website traffic came from mobile devices. As a result, they need to ensure that websites are well-optimized to run on mobile browsers. Chrome is indisputably the leading mobile browser with a current market share of 64.06% worldwide. Hence testing mobile versions of websites on Chrome is crucial.
This article aims to explain how developers can open a website’s mobile view in Chrome browser via desktop. It also explains how one can test websites on real mobile devices online.Table of Contents
- Why test mobile version of a website on real Chrome browsers?
- Using Device Simulation in Chrome DevTools for Mobile View
- BrowserStack’s Real Device Cloud for Live Testing
Why test mobile version of a website on real Chrome browsers?
As mentioned above, Chrome is the most popular browser in the market. Given that a significant number of users access the internet via Chrome, any website or web app must be compatible with it to adequately serve those users. Additionally, there are multiple versions of Chrome, and a website must be able to render and operate flawlessly on each. There is also the question of how a specific Chrome version may interact with the hardware specifications of a particular device, adding another layer of verification required in the website development pipeline.
Needless to say, emulators and simulators are unable to replicate all the specifications required for accurate testing. They may not contain and utilize all the features of every Chrome version, which means that any test run on emulators and simulators will be able to provide only inconclusive results.
It is much easier and far more effective to view and test websites on real Chrome browsers. Not only does it guarantee 100% accurate results, but it also reduces a step in the testing process. No website can be released without being tested on real browsers and devices. Therefore, it is best to do away with emulators and simulators completely, and just test on a real device cloud.
Now, let’s explore 2 methods on how to view mobile versions of websites on Chrome.
Using Device Simulation in Chrome DevTools for Mobile View
Users can view the mobile version of a website by using Chrome Devtools.
Note that this is not a fully reliable method as it uses a simulator rather than a real device and browsers to get the job done. Therefore, it cannot replicate all real user conditions, which means that any tests executing by this method will be inconclusive. For 100% accurate results, use the second method – using real browsers.
Listed below are the steps to view the mobile version of a website on Chrome:
- Open DevTools by pressing F12.
- Click on the “Device Toggle Toolbar” available. (Icon turns blue when the device mode is turned on)
- Choose a device you want to simulate from the list of iOS and Android devices.
- Once the desired device is chosen, it displays the mobile view of the website.
For web developers to gain accurate test insights, extensive testing on real devices is non-negotiable. It enables them to verify websites in real user conditions.
BrowserStack’s Real Device Cloud for Live Testing
The ideal way to test a website is to test it on a real device. This helps developers monitor websites on mobile browsers that are installed on real Android and iOS devices. By doing so, QAs can evaluate how a website performs across multiple mobile devices and browsers in the real world.
BrowserStack’s real device cloud provides 3000+ real devices and browsers to test on.
Here’s a quick tutorial on how to get started with viewing the mobile version of a website on Chrome:
- Sign up for a free BrowserStack account.
- Navigate to BrowserStack Live.
- Once the dashboard opens, you’ll be able to choose from thousands of browser-device combinations.
- Choose the device-browser combination you want to test on. In this example, it will be a Chrome browser running on Samsung Galaxy S10.
- After selecting the device and browser, a new test session will initiate on the chosen hardware-software.
- Navigate to the website you want to view on mobile and check how it renders.
Additionally, a few highlights of BrowserStack’s real device cloud:
- No setup nor download needed
- Latest Android devices from Samsung, Oneplus, Google, and Motorola
- Latest Apple devices like iPhone X, iPhone 11 Pro
- Multiple versions of leading browsers like Chrome, Firefox, Safari, Opera installed on real devices
QAs can test on any real Android or iOS mobile device directly from their browser. They do not have to download any browsers or emulators. To open a mobile version of a website on Chrome, QAs can simply log in, select the device-browser-OS combination and start testing. The image below is an exact representation of a live testing session (Chrome Browser Testing on Samsung S10+) on BrowserStack.
BrowserStack also provides the following features :
- Upfront access to DevTools that enables inspection of web elements on the page
- Geo-location testing
- Integrations with popular bug reporting tools like Jira, Trello, and Slack
- Testing of features like pinch to zoom and device rotation
The methods explained above can help developers eliminate their pain points while debugging any issue. These methods also help optimize a website’s performance across multiple devices. Knowing how to open a website’s mobile view in Chrome is an essential part of a QA engineer’s skillset, and this article will help them with mastering this skill.
responsive mobile view extension for chrome
Wondering how to check responsive website in chrome? You can use chrome extensions for responsive design. Do you know how many responsive chrome extension exist? You may not be surprised that there are more than a dozen really useful responsive plugin at chrome marketplace.
Job of a responsive web design tester as well as developer can be much easier with these chrome addon.
Google Chrome is no longer a thing for the geeks but this minimalistic web browser has now become quite a popular choice, all over the world. This is not surprising in the wake of the remarkable job that Google has done in coming up with some excellent features that can blend in with your Google account.
Till now, the habitual IE or Firefox users were hesitant to give up their favorite web browsers as they found the integrated plug-ins or add-ons extremely useful. However, the Chrome extensions introduced by Google are the answer to this. These extensions have successfully replaced or replicated the functionality of plug-ins found in a typical browser.
For the first time ever in May 2012, Google Chrome edged out Internet Explorer as the most popular web browser. To achieve this position, Google has strategically added a range of plugin to Chrome and improved its features extensively to add synchronization with a range of web applications. These plugins are effective in creating, building, analyzing, maintaining and improving of websites. The given extensions on Google Chrome provide a plethora of features required for promoting cross-platform compatibility, robustness and scalability of a responsive website.
Below given are a set of responsive chrome extensions that you might find useful during responsive web design:
Responsive Image Helper Extensions
Image Size Info
This responsive chrome extension provides information about the image height, width and file size. Even file date as reported by the server is provided, however it may not always be accurate.
Simple Image Resizer
This resizes photos and images while retaining its quality; the mechanism offered is simple and effective.
Testing Responsive Resizing
Window Resizer
The window browser can be resized to show many screen resolutions using a Window Resizer. It is useful for web designers who want to test their layouts on different resolutions on laptops, desktops and mobile devices.
Testing Mobile Websites
User Agent Switcher
It switches between the user-agent strings to help develop a site that can work on both mobile browsers and desktops. User-Agent Switcher for Chrome is the answer for your need to switch quickly between user agent strings.
HTML And CSS Extensions
CSS Reloader
It Allows Reloading Of CSS Of Web Pages Without Reloading The Page. The Keyboard Shortcuts Can Be Customized Under This Option. At A Fraction Of A Second, People Can Get Their Page Reloaded Which Can Done By Clicking Either The F9 Key Which Is Allotted For It (which Can Be Changed As Per Customer Requirement) Or Just Clicking On The Name In A Drop Down Toolbar.
Debugging Extensions
Web Developer
It adds a button with integrated web development tools. It is the web developer extension port used by Firefox which provides a development framework to web application developers.
Fonts Related Extensions
What Font
This extension can effectively inspect the web fonts. You need to hover over the font to find out the type of font.
The strategy to empower web developers and site owners by providing free and valuable toolkits such as the ones described above, has helped Google dominate the web browser market. These extensions basically provide a platform to test interoperability of website design and augment user-friendliness. These tools not only increase productivity in a website, but eventually boost website traffic.
Google Chrome, with its new set of extremely innovative and useful extensions, is like a dream come true for those web developers who deal with responsive design and wish to enhance their productivity. With the help of the above given extensions, you will easily be able to design and produce a highly responsive website.
Legacy Addons: Not available anymore
Some old addons are not available for chrome anymore. Those are listed below.
Resizer
It allows changing dimensions of web page for devices such as tablets, mobile, desktop computer, also testing the designs.
Responsive Web Design
It tests the responsiveness of web designs on Google Chrome. Its web version can be found on responsive.victorcoulon.fr. Interestingly, this extension does not have a customizable resolution option.
Responsiview
The tool tests the website in a given browser size. The aim is to test responsive design media queries and screen configurations which support tablet view (portrait orientation at 768 x 1024) and mobile-based view (portrait orientation at 320 x 480 and landscape orientation at 480 x 320). On clicking, a new window pops up for the current tab for a given window dimension. One can customize height and width as per requirements as well.
Responsive Inspector
It is a simple tool which allows viewing the media queries related to the previously visited website. It gives a responsive web layout to the pages that can be seen visually and also shows the resolutions found in CSS stylesheets. Along with this, the Pixel Perfect browser resizing, page screenshots for saving pages, CSS media query code viewing and web design sharing are also provided.
Responsive Web Design Tester
This is a responsive web design tester addon for chrome. This extention supports multiple mobile device screen size and browsers.
This makes extension makes responsive testing in chrome must easier.
Mobile Toolkit
The toolkit checks the compatibility of a website on a mobile device. It validates the code of the webpage for mobile compatibility and checks it on emulators to provide documentation to improve its compatibility. Furthermore, the extension offers one-click code validation, mobile render emulation, language reference and mobile developer resources.
Mobile Tester
It aims to test mobile websites having numerous resolutions by emulating its screen resolution and user agent. It can test several mobile devices in tandem.
W3C HTML5 & CSS3 Validator
It is a shortcut button used for quick validations. It is not a local or offline validator and has the option of showing warnings and errors. Moreover, with this extension, validation can be customized — it can be set to automatic or manual, personal or public.
HTML5 FileSystem Explorer
It gives file browser access to file systems in Google Chrome sandbox. The tool is a must for developers working on FileSystem API as its helper extension provide developers browsing into the content of a local web FileSystem created through FileSystem API.
Firebug Lite
It is an activation scheme which is simple to install. The button is greyed out as you visit the webpage when it is deactivated. Once clicked, it will turn orange and will activate firebugs for the pages in the domain. The aim is to report bugs to Google.
Performance Tuning Extensions
Speed Tracer
The tool helps to identify problems and fix it in web applications. A developer can get web page metrics from the browser and it can be examined as the application runs. It gives a clear picture of the time spent on various applications. For example, JavaScript parsing, DOM Event handling, layout and CSS style recalculation. This feature is available in Google Chrome 18 or later versions.
YSlow
The tool helps to analyse the web pages and improve performances which are based on rules for high performance. YSlow provides information related to page performance, components, summarizes the component details and shows statistics related to the web page.
Conclusion
Let us know your thoughts in the comment section below.
Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines