Now, how about we see how many browsers we can get set up on our development machines without standing up.

Windows on macOS

There should not be a single web developer on the planet that does not have access to Windows.

If you are one such person, that’s OK, no judgement. Just head on over to Microsoft’s modern.ie and grab a VM. They range from IE8 on Windows 7 up to Edge 15 on Windows 10, and you can use Vagrant, VirtualBox, VMware or Parallels.

If you’re not sure what all of this means, I recommend “Microsoft Edge on Win 10 Stable” (this will give you Edge and IE11) and VirtualBox.

OK have you downloaded some VMs and got them running? You found the instructions on the download page, right? Read the note for Mac users about unarchiver, right? Great, great.

All the Windows browsers

As a macOS user, you of course want Windows so that you can test Edge and IE. But you also need Windows to test the Windows version of Chrome and Firefox, since they are different to Chrome and Firefox on macOS.

How so?

Scrollbars and fonts.

If you’re a Mac user and never have scrollbars turned on, you probably don’t know that your site jumps to the side as content loads and also when modals open/close. It’s jarring.

(I went looking for an example and the third site I picked, uber.com, does this when their menu opens — the whole page jumps 16px to the right.)

This post isn’t about code but the sixteen-pix-sidestep is a pet peeve so please, just do this if you only need a full-screen modal (it will force the page to the top):

Or this to block the scroll without changing the scroll position:

As for fonts, a good general rule is to never rely on text being a certain width. If you do rely on this, test in every single browser ever made.

Here’s an iPhone 6 emulated in three different ways. Notice the cutoff point for ‘Culture’ in Medium’s header:

Simulator on macOS

Chrome on macOS

Chrome on Windows

(OK smarty pants, I know Medium uses native fonts (go Medium!), but I’d already taken the screenshots when I remembered. The message stands — don’t rely on text being exactly the same width on all devices.)

Finding your way around unfamiliar browsers

If you don’t know how to inspect your JavaScript in some foreign browser’s dev tools but want a breakpoint, just put the keyword debugger in your code. You can even do a fakey ‘conditional breakpoint’.

I haven’t the foggiest idea how to drive F12 (the IE dev tools), but here’s me inspecting a breakpoint like a champ:

Ah yes, I suppose my element ID isn’t “appnpm run dev”

If you forget what to type, just remember that it’s for when you’ve buggered something up and you want to debugger it.

macOS on Windows

As I hurtle towards 40 I have grown unwilling to do anything where the first step is “do a full backup of your system”. And since there is no official way to install macOS on Windows, this is the best you’re going to get.

If you’re young at heart and crave some Apple in your Window, hackintosh.com awaits.

iOS on macOS

Getting access to a virtual iPhone and iPad is vurry easy. You will use Simulator, which ships with Xcode (it’s so hard to keep track of where the capital letters go in Apple products).

You’ve got access to a whole bunch of iOS devices right there in Simulator, there’s not much to say about it.

They render actual pixels, not CSS pixels, so you may want to scale the device down to 50% to keep the whole thing visible on a smaller screen.

See, really not much to say about it.

The simulator is pretty accurate as far as I can tell. It even has the same insanely annoying behaviour of hijacking click events near the bottom of the viewport.

Pro-tip: never create an interface that relies on a user clicking something at the bottom of the screen. iOS Safari will punch you in the face.

Dev tools for Safari on iOS on macOS

If you want to inspect your site while it’s running in iOS Safari, you can use the macOS Safari Web Inspector. The process is the same for Simulator as it is for a real iOS device that’s plugged in.

That process is this: in iOS Safari, turn on Settings > Safari > Advanced > Web Inspector.

Then, open macOS Safari and go to Develop > Your Device Name (or ‘Simulator’) and select the tab you want to inspect

Boom:

For more details see Safari’s Web Inspector docs.

If you want to test UC or some other browser, I’m pretty sure you need a real device. At least, I couldn’t work out how to do it in Simulator.

Android on macOS and Windows

For your benefit, dear reader, I have installed Google’s Android Studio to take a peek at it’s built in emulator. It was dead simple to install and the emulator is fast (~20 second startup). It’s several gigs though, so don’t do this if you’re on a metered connection. Or in North Korea.

Genymotion is also a popular emulator for Android; I’ve heard good things about Bluestacks too. And when I say “popular” and “heard good things” I mean “I’ve got no idea I just googled android emulator for macos and glanced at the first result”.

I happen to have an Android phone, so I use that for testing, and fall back to BrowserStack for testing on other Android devices.

Just like with iOS running in the Simulator, if you want to install some other browser, you’ll need a physical device (although you can drag an .apk into the Android emulator to install an app if you have one lying around).

Obviously if you want to test Samsung Internet you’ll need a Samsung device.

DevTools for Chrome on Android (macOS and Windows)

Connect your Android device via USB and have your site open on the phone.

Open macOS/Windows Chrome, open the DevTools.

Click the snowman buttons (is that what they’re called? Can we make that what they’re called?) and select More tools > Remote devices.

You are now faced with the visual assault that is the ‘Remote devices’ tab.

Hey, what’s that Terminal tab?

Click on Inspect, I have faith that you can work it out from there; anything specific I write will be out of date in 6 week’s’ time.

(Grammar tip: if you don’t know where to put an apostrophe, use a “superposition apostrophe” — it appears in both places at once.)

If you get stuck connecting to your device, go check out Chrome’s docs on the matter. They must update those docs every few weeks, hat tip to whoever’s in charge there.

The “Remote devices” functionality works exactly the same for plugged in devices and emulators. Here’s an Android emulator in Windows being inspected with the Chrome DevTools: