Simulating a Mobile Environment For Testing

In today’s mobile-first environment, it’s essential to make sure your website not only looks good but also works properly on mobile-sized screens. In addition to testing on an actual mobile device, there are several other options available that provide additional options and features.

Inspector Tools

Chrome Browser

  • Open Chrome Developer Tools:
    • Press F12 or Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
    • Or you can right-click anywhere on the page and choose “Inspect”.
  • Toggle Device Toolbar:
    • Click the “Toggle device toolbar” icon in the top-left corner of Developer Tools, or press Ctrl + Shift + M (Windows/Linux) or Cmd + Shift + M (Mac).
  • Choose a Mobile Device:
    • At the top of the viewport, you’ll see a dropdown labeled something like “Responsive” or the name of a device.
    • Click it and select a predefined device (e.g., iPhone 14, Pixel 7, etc.)
    • Chrome will emulate the screen resolution, user agent, and touch events for that device.
  • Adjust Options:
    • You can also customize the dimensions, zoom level, and throttle network speed (e.g., simulate 3G).
    • Use the rotation icon to switch between portrait and landscape.
  • Refresh the Page (optional):
    • Sometimes it’s helpful to reload the page (F5 or Cmd + R) to see how scripts and styles behave on mobile.
  • Exit Emulation Mode:
    • Click the Toggle device toolbar icon again or press Ctrl + Shift + M (Windows/Linux) or use Cmd + Shift + M (Mac) to return to normal desktop view.

Safari Browser

  • Enable the Develop Menu (if not already enabled):
    • Open Safari.
    • Go to Safari → Settings (or Preferences on older macOS versions).
    • Click the Advanced tab.
    • Check the box at the bottom: “Show Develop menu in menu bar”
  • Open Responsive Design Mode:
    • Open the webpage you want to test.
    • Go to Develop → Enter Responsive Design Mode in the top menu bar or press Ctrl + Cmd + R.
  • Choose a Mobile Device:
    • At the top of the page, select a device profile to emulate (iPhone, iPhone Pro, iPad mini, etc.) or drag the resize bars for a custom size.
    • Click the Rotate the Viewport icon to view to portrait or landscape mode.
  • Refresh the Page (optional):
    • Sometimes it’s helpful to reload the page (Cmd + R) to see how scripts and styles behave on mobile.
  • Exit Responsive Design Mode:
    • Click the “X” in the top-left corner of the simulation window
    • or go to Develop > Exit Responsive Design Mode

Xcode

To use Xcode with Safari to test websites on real iOS devices, you can take advantage of Safari’s Web Inspector and device simulator integration provided by Xcode. Here’s how to set it up and use it:

  • Install Xcode:
    • Go to the Apple App Store and install the Xcode app (if not already installed).
    • Go to Xcode → Settings and click the Components tab to ensure you have simulators installed.
  • Restart Safari (after initial Xcode installation) and launch a device simulator:
    • Navigate to a page to test.
    • Go to Develop → Open Page With and select a device (i.e., iPhone, iPad, etc.)
  • Access the Safari Inspector:
    • In Safari, click Develop → Inspect Apps and Devices.
    • Select your simulated device.

Firefox Browser

  • Open Developer Tools:
    • Press F12, Press Cmd + Option + I (Mac) / Ctrl + Shift + I (Windows/Linux).
    • or right-click on the page and choose “Inspect”.
  • Enter Responsive Design Mode:
    • Click the “Responsive Design Mode” icon (a small phone/tablet) in the DevTools toolbar
    • Or use the shortcut: Cmd + Option + M (Mac) / Ctrl + Shift + M (Windows/Linux).
  • Choose a Device Profile:
    • At the top of the viewport, choose a device (i.e., iPhone SE, Galaxy S20, iPad, etc.)
    • Or manually set width, height, and device pixel ratio,
  • Simulate Touch and Orientation:
    • Use the rotate icon to switch between portrait and landscape.
    • Click the “Touch simulation” icon (finger tap symbol) to enable touch-like interactions.
  • Exit Responsive Mode:
    • Click the “X” to close DevTools or click the phone/tablet icon again.
    • Or use the shortcut: Cmd + Option + M (Mac) or Ctrl + Shift + M (Windows/Linux).

BrowserStack

BrowserStack is a cloud-based testing platform that lets you test your websites and mobile apps across a wide range of real devices and browsers without needing to own the hardware or set up virtual machines. With this tool, you can:

  • Test your website on actual browsers (Chrome, Firefox, Safari, Edge, etc.), including current and older versions.
  • Use physical iOS and Android devices hosted on the BrowserStack cloud.
  • Interactive manual testing on real devices and browsers.
  • Simulate slow networks, change geolocation, switch screen sizes, etc.

Visit www.browserstack.com for more information and to create an account.

Do you feel this document was helpful?