Browser Developer Tools for Mobile Testing
If you think desktop browsers are the wrong place to start when it comes to optimizing for mobile, think again. All major browsers come with their own line of developer tools that also include instruments for mobile testing.
Not only can you use them to inspect your site’s HTML and CSS, but also get a live impression of what it will look like on different mobile devices. We’ll be covering Chrome, Firefox, and Safari here.
1. Chrome Device Mode
In this mode, the website you are currently on is shown in a smaller frame which reflects the confines of a mobile device (you can pull the developer tools to the side to have a little more space, if need be).Shrink and expand the frame to make the screen fit your personal needs. Alternatively, use the numbers in the upper left corner to type in a custom screen size. Be aware that you might have to reload the site in order for the content to fit properly
2. Firefox Responsive Design View
Firefox offers a similar tool to Chrome. While it does not have as many functions as its competitor, it’s still quite useful for testing the mobile capabilities of your WordPress website.You can activate it either by clicking on the menu and then Developer > Responsive Design View or by clicking the respective icon in the developer toolbar when it is toggled on.
3. Safari Responsive Design Mode
You should now see your website within a responsive view with a variety of options listed across the top. You can manually change the dimensions, select a browser view to simulate, or a device. However, all of the device presets are Apple products. So, if you want to check the view of devices that run Android, you’ll need to input the dimensions manually.
4. Android SDK
Next on our list of mobile testing tools: Android SDK (Google’s equivalent to XCode). It works for both Windows and MacOS X as well as other platforms. It is also free to use and you can download it here as part of Android Studio.
The best way to check websites for compatibility with Apple devices is the company’s very own iOS simulator. It is part of XCode, Apple’s development environment.
6. Opera Mini
Though certainly not the trendiest of browsers, Opera is still used on a fair number of mobile devices, especially older models. Often, Opera is the best available browser option for these devices. Consequently, it would behoove you to test to see that your website loads properly within it.
Browserstack is a web-based platform with tools for testing websites in different environments, operating systems, browsers, and mobile devices. It is a paid solution with access to more than 50 mobile devices on different operating systems. You can use it in a variety of ways.
Another browser-based way to test your WordPress website is LambdaTest. It’s a cloud-based automated browser testing tool that uses over 2,000 different browsers and operating systems. This number should allow you to make certain your site looks great no matter how it’s being accessed.
9. Mobile-Friendly Test
With Google’s continued emphasis on mobile-friendliness, it only makes sense that they provide a tool to analyze how well your site is performing. After typing in a URL, the mobile testing tool will check your site not only for responsiveness but other mobile-friendly markers such as page loading time.
This service lets you test your site across six different popular devices, among them the HTC One, Google Nexus 7 and the Apple iPad Mini. All you need to do is click on one, type in a web address and you are good to go. It’s also free, which is nice. Granted, this isn’t the most up-to-date testing option but it’s certainly a quick and easy way to test compatibility across several older devices without having to open your wallet.
Next in line is Responsinator. It offers testing for several different Android and iOS devices, from the iPhone 5 over “crappy Android device” (sic!) to the Nexus 4. As usual, type in any address and the corresponding website will show up on the screen of the chosen device. It doesn’t have a flip option, but you can choose landscape views for each device as well.
The last entry on our list of mobile testing tools is Screenfly offers a pretty nice range of devices including TVs and desktop computers. However, there are also plenty of tablets and phones in the list. It’s free to use and the interface is very intuitive. Highly recommended to do some quick checks!
Each tool comes with its own strengths and weaknesses. Yet, what most of them have in common is that they are definitely cheaper than investing in real-life devices.The above solutions should suffice to test for most use cases. Which one you choose is up to your own needs and preferences. In the end, all that counts is the result. Your mobile visitors will thank you.
Eastlink Cloud Pvt. Ltd.
Tripureshwor, Kathmandu, Nepal