I have a site testing for compatibility issues and responsive designs on IE,Chrome,Firefox,Safari.
In Firefox the testing was completed with ease as it had the developer options and there by pressing the Ctrl+m gives you get the different resolution screen.
The same is not applicable for IE,Safari. Under Google Chrome I tried the Inspect Element and then the Toogle device mode and is slightly difficult.
I often use browsestack (a tool to check compatibility) , but it's not free although it provides me more than 500+ platforms.
So, my questions is:
– If I have to test the responsive design without using any tool so could you please suggest me on how the above can be done?
@Phuoc,
Have you tried to do the testing with VMs? I found VMs are useful with cross-browser tests.
Hi aThanh,
Yeah, I also use VM or VB to setup the virtual machine when I tried to cross-browser test (IE 8, Safari , etc…). But when skimmed in stackoverflow, I found there’re something cool that want to share:
You can use inbuilt mode in chrome browser for responsive design testing.
With help of device mode you can do following:
– Test your responsive designs by emulating different screen sizes and resolutions, including Retina displays.
– Evaluate your site’s performance using the network emulator, without affecting traffic to other tabs.
– Visualize and inspect CSS media queries.
-Accurately simulate device input for touch events, geolocation, and device orientation.
-Enhance your current debugging workflow by combining device mode with the existing DevTools.
Enabling device mode Turn on device mode by pressing the Toggle device mode toggle device mode icon off icon. When device mode is enabled, the icon turns blue and the viewport transforms into a device emulator.
You can also toggle device mode on and off using the keyboard shortcut: Ctrl+Shift+M (or Cmd+Shift+M on Mac).
Ref: https://developer.chrome.com/devtools/docs/device-mode
Alternative Options: You can right click on an element on a page and then select Inspect Element option from context menu.
Additionally I would suggest you to use chrome extensions for testing responsive design of your web application. Such as following extensions;
Responsive Web Design Tester –
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
Responsive-web-design testing tool-
https://chrome.google.com/webstore/detail/responsive-web-design/gkmaomcbenajgclicfopaempggmbghka?hl=en
If you have another way, please advise.
@Phuoc,
Thanks for sharing.
That sounds interesting. It’s no doubt you have much more experience than I have in this subject 😀