Stop Buying Macs Just to Fix CSS

Source: Dev.to

The “Hacker” Way to Debug Safari on Windows & Linux

Let’s be honest: Safari is the new Internet Explorer.

As web developers we work mostly with Chromium (Chrome, Edge, Brave) and Gecko (Firefox). Our layouts look perfect on Windows or Linux—until a ticket lands:

• “The menu is broken on my iPhone.”
• “The images are squashed on my MacBook.”

If you don’t own a Mac, the usual options are expensive or painful:

• Buy a Mac – spend $1,000+ just to verify a flex-gap issue.
• Cloud testing (BrowserStack, LambdaTest) – excellent tools, but costly and sometimes laggy.
• VMs / Hackintosh – legal gray area, fragile setup, endless headaches.

A fourth way

A hidden gem in the open‑source world lets you run WebKit (the engine behind Safari) natively on Windows and Linux. It’s free, fast, and works with Node.js.

Welcome to Playwright WebKit.

What Is WebKit (and Why This Works)

Safari is not magic; it’s a browser UI built on the rendering engine WebKit.

Apple develops WebKit, but WebKit itself is open source. Although Apple discontinued Safari for Windows in 2012, the Playwright team (Microsoft) compiles WebKit for Windows and Linux.

This gives you:

• The same CSS rendering rules
• The same JavaScript quirks
• The same layout bugs

It isn’t the full Safari.app, but for layout, CSS, and JS debugging it’s ≈ 99.9 % accurate. If it breaks here, it breaks on iPhone. Period.

Setup: From Zero to Safari in 2 Minutes

All you need is Node.js.

Prerequisites

• Node.js (Windows, Linux, or WSL)
• A terminal (PowerShell, CMD, Bash)

Step 1: Install Playwright browsers (important)

npx playwright install

This downloads Chromium, Firefox, and WebKit binaries for your OS. Run it once; otherwise codegen may fail or repeatedly download browsers.

Step 2: Launch WebKit instantly

npx playwright codegen https://your-website.com --browser webkit

Works with localhost too:

npx playwright codegen http://localhost:3000 --browser webkit

Playwright will:

• Launch WebKit
• Open a browser window
• Attach DevTools automatically

…and you are debugging Safari on Windows/Linux.

What You’re Looking At

The window is minimal—no address bar, no bookmarks, no Apple UI—but it is real WebKit rendering your site. It’s the same engine used by:

• Safari on macOS
• Safari on iOS
• In‑app browsers on Apple devices

Debug Like a Safari Veteran

Open DevTools

Right‑click anywhere → Inspect Element. The DevTools are WebKit Inspector, not Chrome DevTools, so expect some differences.

What to Check First

• Elements – CSS differences, flexbox behavior, missing gaps
• Console – Safari‑only JS errors (e.g., optional chaining, date parsing)
• Network – CORS, headers, mixed‑content issues

Common Safari Bugs to Hunt

• gap in flexbox behaving oddly
• 100vh and dynamic viewport height on mobile
• Images stretched inside flex/grid containers
• position: sticky inconsistencies

Date parsing quirks

new Date('2023-05-01 12:00:00') // ❌ may fail in WebKit
new Date('2023-05-01T12:00:00Z') // ✅ safe

Method 2: Scripted Safari (Power‑User Mode)

If you debug Safari often, create a reusable script.

debug-safari.js

// debug-safari.js
const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch({ headless: false });

  const context = await browser.newContext({
    viewport: { width: 390, height: 844 }, // iPhone 12–14 size
    deviceScaleFactor: 3,
    userAgent:
      'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) ' +
      'AppleWebKit/605.1.15 (KHTML, like Gecko) ' +
      'Version/15.0 Mobile/15E148 Safari/604.1'
  });

  const page = await context.newPage();
  await page.goto('http://localhost:3000');
})();

Run it with:

node debug-safari.js

Result: a persistent iPhone‑like Safari simulator on Windows.

Limitations (Know the Trade‑Offs)

This is a hacker solution—powerful, but not magical.

What You Can’t Test

• Video & audio codecs – No H.264 / AAC (licensing restrictions)
• Apple system fonts – San Francisco isn’t included unless manually installed
• Apple‑only integrations – Apple Pay, iCloud, Keychain, OS‑level APIs

For CSS, layout, and JS bugs, none of this matters.

When Should You Still Use a Real Mac?

• Final QA before launch
• Media playback debugging
• Native Safari extensions

For daily development, Playwright WebKit is more than enough.

Final Thoughts

Stop shipping code and hoping Safari behaves. With Playwright WebKit you get:

• Free Safari‑grade rendering
• Instant debugging
• No Mac required
• No subscriptions

All inside your terminal. Once you try this, you’ll never justify buying a Mac just for CSS bugs again.

Happy debugging. 🚀