Month: September 2021

How To Test A Website In Different Devices And Browsers

How To Test A Website In Different Devices And Browsers

Back in the day, we only use our personal computers for browsing the web. In web development, we only even use <tables></tables> tag using table rows and columns to layout our pages. With the introduction of smaller devices such as tablets and smartphones, everything changed for ensuring our pages are compatible with these devices. This means that look consistent and function properly in as many browsers and on as many devices as possible.

With different devices and gadgets in all shapes and sizes being introduced to the market every year, one of the biggest challenges in creating web pages is ensuring that those pages are cross-browser and device compatible.

Here are some of the tools you can use to ensure those pages are cross-browser and device compatible.

Browser’s Development Tools

Different devices are also running different Operating systems. Let’s start with Windows as this is the most popular operating system used in PC and Laptops.

Windows 10 + Google Chrome

Windows 10 is the latest operating system of windows as of this writing. Google chrome is the most popular web browser out there. There are 3 ways on how to do this. The first way is navigating through the browser’s menu. Here are the steps to test your website using chrome in Windows 10.

Step 1. Click the kebab menu, also known as the three vertical dots menu on the upper right corner of the browser.

Step 2. Hover your mouse on ‘More tools’ and additional options will appear.

Google Chrome Browser - More Tools

Step 3. Click Developers tools and Dev tools will appear.

Step 4. Click the device icon or the ‘toggle device toolbar’ icon.

Google Chrome Browser - Toggle Device Toolbar

Now there will be a toolbar at the top of your page for testing your site on different devices based on their dimensions or resolutions.

There are 2 more ways to access developer tools in Google Chrome.

The second way is to right-click anywhere on your page, and a context menu will appear. The last option there is ‘inspect’ that when clicked, Dev tools will appear. Just next to that ‘inspect’ word is the second way or the shortcut for accessing the dev tools. Pressing Ctrl+Shift+I simultaneously will do the same way as the other 2 methods.

Google Chrome Browser - Inspect

Those are 3 ways of accessing Dev tools in Google Chrome to test your site.

Windows 10 + Mozilla Firefox

To ensure cross-browser compatibility, of course, we want to test it to as many browsers as possible. Now let’s try Mozilla Firefox, the best alternative to Google Chrome in my opinion.

Mozilla Firefox has almost the same ways of accessing its own dev tools just like Chrome.

Step 1. Click the Hamburger menu, on the upper right corner of the browser.

Step 2. Click on ‘More tools’ and additional options will appear.

Mozilla Firefox Browser - More Tools

Step 3. Click Web Developers Tools and Dev tools will appear.

Mozilla Firefox Browser - Web Developer Tools

Step 4. Click the device icon or the ‘toggle device toolbar’ icon.

Mozilla Firefox Browser - Toggle Device Toolbar

Now just like Google Chrome, there will be a toolbar at the top of your page for testing your site on different devices.

Another way of accessing the dev tools is through right-clicking anywhere on your page, and a context menu will appear. The last option there is ‘inspect’ that when clicked, Dev tools will appear just exactly like Google Chrome.

Mozilla Firefox Browser - Inspect

Those are the ways of accessing dev tools and testing your site using Mozilla Firefox. Now let’s see Microsft’s Edge.

Windows 10 + Microsoft’s Edge

Microsoft Edge is native for Windows 10, and the new  Edge is based on Chromium and was just recently released on January 15, 2020. The ways to check your site in Edge is the same as Google Chrome.

Mac OS + Safari

Checking Google Chrome and Mozilla Firefox in Mac OS is just exactly the same as the Windows counterpart. So let’s go straight to the browser that is native to Mac OS, the Safari.

Step 1. Click the Safari menu, on the upper light corner of the browser.

Safari Browser - Preferences

Step 2. Click on ‘Preferencess…’ and ‘advance’ window will appear. Now tick the ‘Show Develop menu in menu bar’ option.

Safari Browser - Advanced Options

Step 3. Develop menu will now appear on the menus at the top. Click Develop menu and click ‘Enter Responsive Design Mode’ and ‘Show Web Inspector’ to check your site.

Safari Browser - Web Inspector Tool

Now Safari’s web inspector will appear as well as responsive design mode. You can check your site now.

Safari Browser - Toggle Device Toolbar

Another way of accessing the web inspector is through right-clicking anywhere on your page, and a context menu will appear. The last option there is ‘Inspect Element’ that when clicked, Safari’s web inspector will appear just exactly the other browsers that we have covered so far.

Testing Platforms

Not all of us have the luxury of jumping from one OS to another when checking our site. Because that means having access of at least 2 computers with different Operating Systems. Not to mention, there are hundreds if not thousands of different devices and gadgets in all shapes and sizes out there. The good news is, there is still a way in checking your site using the web and mobile testing platforms.

Let me introduce you to one of many testing platforms out there. This is in my opinion the best and user-friendly. It is called Browserstack.

BrowserStack

You must register first to use BrowserStack. Once registered and logged in, using the web app is easy. You can choose between different Operating Systems including the mobile devices on the left sidebar. And choose between different web Browsers at the top menu. Clicking the version number will bring you to its live server that hosts the chosen device, Operating System, and browser.

BrowserStack

Now you can check the look and functionality of your site in as many as whatever available devices out there using this testing platform.

Conclusion

Yes, it’s crazy how web development evolved through the years. But using these tools would help make our life easier testing our site. I hope this post is helpful to know your different options in checking your site on different devices and browsers.