Stop Buying Macs Just to Fix CSS

The "Hacker" Way to Debug Safari on Windows & Linux ## What Is WebKit (and Why This Works) ## Setup: From Zero to Safari in 2 Minutes ## Prerequisites ## Step 1: Install Playwright Browsers (Important) ## Step 2: Launch WebKit Instantly ## What You’re Looking At ## Debug Like a Safari Veteran ## Open DevTools ## What to Check First ## Common Safari Bugs to Hunt ## Method 2: Scripted Safari (Power User Mode) ## debug-safari.js ## Limitations (Know the Trade‑Offs) ## What You Can’t Test ## When Should You Still Use a Real Mac? ## Final Thoughts Let’s be honest: Safari is the new Internet Explorer. As web developers, we live in a world dominated by Chromium (Chrome, Edge, Brave) and Gecko (Firefox). We build beautiful, responsive layouts, everything looks crisp on Windows or Linux… and then the ticket arrives: "The menu is broken on my iPhone." "The images are squashed on my MacBook." If you don’t own a Mac, your options usually range from expensive to painful: But there is a fourth way. A hidden gem in the open‑source world that lets you run WebKit (the engine behind Safari) natively on Windows and Linux. It’s free. It’s fast. It works with Node.js. Welcome to Playwright WebKit. Safari is not magic. It’s a browser UI built on top of a rendering engine called WebKit. Apple develops WebKit, but WebKit itself is open source. Even though Apple discontinued Safari for Windows back in 2012, the WebKit engine is actively maintained and compiled for Windows and Linux by the Playwright team (Microsoft). It’s not “Safari.app”, but for layout, CSS and JS debugging it’s 99.9% accurate. If it breaks here, it breaks on iPhone. Period. All you need is Node.js. Before doing anything else, run: This command downloads Chromium, Firefox and WebKit binaries for your OS. You only need to do this once. 💡 If you skip this step, codegen may fail or download browsers every time. Now run the magic command: ✅ Works with localhost too: And just like that — you are debugging Safari on Windows/Linux. The window is minimal: 👉 This is real WebKit rendering your site. It’s the same engine used by: Right‑click anywhere → Inspect Element. The DevTools are WebKit Inspector, not Chrome DevTools. Expect differences — and that’s a good thing. If you debug Safari often, create a reusable script. 🎯 Result: a persistent iPhone‑like Safari simulator on Windows. This is a hacker solution — powerful, but not magical. 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. For daily development? Playwright WebKit is more than enough. Stop shipping code and hoping Safari behaves. With Playwright WebKit, you get: All inside your terminal. Once you try this, you’ll never justify buying a Mac just for CSS bugs again. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: npx playwright install Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx playwright install CODE_BLOCK: npx playwright install CODE_BLOCK: npx playwright codegen https://your-website.com --browser webkit Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx playwright codegen https://your-website.com --browser webkit CODE_BLOCK: npx playwright codegen https://your-website.com --browser webkit CODE_BLOCK: npx playwright codegen http://localhost:3000 --browser webkit Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: npx playwright codegen http://localhost:3000 --browser webkit CODE_BLOCK: npx playwright codegen http://localhost:3000 --browser webkit CODE_BLOCK: new Date('2023-05-01 12:00:00') // ❌ may fail in WebKit new Date('2023-05-01T12:00:00Z') // ✅ safe Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: new Date('2023-05-01 12:00:00') // ❌ may fail in WebKit new Date('2023-05-01T12:00:00Z') // ✅ safe CODE_BLOCK: new Date('2023-05-01 12:00:00') // ❌ may fail in WebKit new Date('2023-05-01T12:00:00Z') // ✅ safe COMMAND_BLOCK: 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 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'); })(); Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: 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 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'); })(); COMMAND_BLOCK: 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 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'); })(); CODE_BLOCK: node debug-safari.js Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: node debug-safari.js CODE_BLOCK: node debug-safari.js - 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. - Chrome / Edge / Brave → Blink - Firefox → Gecko - Safari → WebKit - Same CSS rendering rules - Same JavaScript quirks - Same layout bugs - Node.js (Windows, Linux or WSL) - A terminal (PowerShell, CMD, Bash) - Launch WebKit - Open a browser window - Attach DevTools automatically - No address bar - No bookmarks - No Apple UI - Safari on macOS - Safari on iOS - In‑app browsers on Apple devices - Elements – CSS differences, flexbox behavior, missing gaps - Console – Safari‑only JS errors (optional chaining & date parsing, anyone?) - Network – CORS, headers, mixed‑content issues - gap in flexbox behaving oddly - 100vh and dynamic viewport height on mobile - Images stretched inside flex/grid containers - position: sticky inconsistencies - Date parsing: - 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. - Final QA before launch - Media playback debugging - Native Safari extensions - Free Safari‑grade rendering - Instant debugging - No Mac required - No subscriptions