📱 Browserstack

BrowserStack Blockers

Browserstack uses real devices over a proprietary VNC session - many people assume these devices are emulated but they are in fact real.

Common BrowserStack Blockers & Pitfalls

• Network
• Viewport Width
• Design QA

🧱 Network Blockers

• Blocker:
  • Unable to access test/staging site on BrowserStack but able to access the same site just fine locally.
    • Solution:
      • Download, Install and Enable "BrowserStack Local"
        • From any BrowserStack session there is an option in the floating toolbar labeled "Force Local: Off"
        • Select "Force Local: Off"
        • Under "General" select "Resolve all URLs through my network"
          • All your network traffic will now be piped through your local connection - this will enable you to bypass firewalls and even allow you to test local deploys.

🧱 Viewport Width

• Blocker:
  • It may seem like a page is rendering properly on mobile until you switch devices to something wider or more narrow.
    • Solution:
      • Use "Max" and "Mini" devices to determine if this is the case
      • Check the current market usage of devices to ensure you are not testing with a device 1% of users have.

🧱 Design QA

• Blocker:
  • Testing in the inspector with a mobile viewport may look different from testing in BrowserStack with the same viewport dimensions.
    • Solution:
      • Use BrowserStack as the source of truth and select the "Dev Tools" option from the floating toolbar for any necessary inspection.