Good luck with debugging your issue! It is indeed very useful to be able to run something even close to Safari as a Windows user who doesn't own a Mac. I've already made some progress debugging my issue as this MiniBrowser.exe acts identical to BrowserStack with Safari 16, for the issue I care to debug.
Hi Justin, really like all your videos. If you could maybe make a video on how you landed your job at Microsoft - how you got noticed, got the interview, what your technical preparations were like - what sources you used, what language you chose for your interviews etc. that would really be kind and helpful! Keep your videos rolling man! Love 'em!
Happy to help! I hope that this Webkit in Windows alternative was enough to debug your date input issue. I find it quite useful to be able to run Webkit locally in Windows. But that being said, I still sometimes find use in BrowserStack which I do use at my work.
Glad to hear it helped! It's been useful for debugging a few Safari issues locally, but I wish Apple would make an official release for us Windows users.
Happy to help! I still use this browser often for debugging Safari issues. It's not perfect but the alternative before for people without a BrowserStack account was to buy a Mac which seems odd if Apple cares for devs to support their funky browser.
This seems to be a new change. Before the step was called "transfer-to-s3" but now it's "upload-file-to-s3" and it no longer has the URL. I've contributed recently to the steps on how to do this in the WebKit docs repo, I will figure out the new way (assuming there is one) and I will PR a change to the official document ( github.com/webkit/Documentation/blob/main/docs/Ports/WindowsPort.md#downloading-build-artifacts-from-buildbot ) as well as make a new video. Thanks for finding this out!
I am not familiar with Ventoy but if it's about making a boot USB that can load Safari/WebKit, I suppose this could be done that way if you had a web server and something like Linux that can run this off a boot drive.
Dustin, thank you. It's a PITA to hook up my Mac Mini and mess with the Windows firewall to allow access to my PC. There is only one downside: cookies don't stay working so I can't sign in. I looked under the experimental features file menu and enabled one or two things. Meh, any suggestions on fixing this please?
Oh darn! It is indeed difficult to test Safari as a web developer on Windows. Sorry but I don't have any suggestions for getting WinCairo to do much besides it's initial boot state. I have found it helpful for some DOM bugs, but otherwise it does have it's shortfalls.
@@DustinBrett Dustin, not a problem. This is at least useful for quick tests. I used the second method to get the browser running. It's a bit slow though not as bad as some browsers.
Hey! Do you know if using this would allow me to watch Apple TV+ content in 4k on my Windows PC? It's very annoying to watch everything in 720p just because I'm using a PC and not a Mac. I have a 4K Apple TV, but I want to watch on my PC so I can stream it to my friends on Discord.
I don't have Apple TV+ so I am not sure on any limitations with 4K content on Windows that could be fixed by using WebKit. I just looked into it a bit and some people have had luck with installing/up[dating HEVC codes. Another option might be the "Apple TV Preview" app on Windows Store. If none of those things work, perhaps try the steps I mention in the video to install WebKit and tell us if it helps. It is close to how Safari would be, but it's not exact and it could be lacking codecs.
Playwright worked for me. Although the behaviour I was debugging was not happening there. In real Safari it was so its not the same. Still amazing though. The other approach didn't work. I am getting error on launching the minibrowser. Code execution cannot proceed because openjp2.dll was not found. I think I followed it quite well, but I could've made a mistake somewhere. Anyway great vibes from the video. Great delivery of useful information.
Thanks! Glad Playwright worked for you. It's possible the MiniBrowser was broken and might work next time as it's very unstable from what I've seen. I've also had a few Safari issues I couldn't recreate in this version, but it's nice to have something as a Windows user with no other real options except using BrowserStack, which isn't so bad, but isn't free.
I am also getting this error with the latest releases - Cairo (10049)/WebKitRequirements (v2023.10.31) - "The code execution cannot proceed because openjp2.dll was not found. Reinstalling the program may fix this problem." .. spoiler alert, reinstalling does not fix the problem lol
@@groundbirdaircat Ah darn, maybe I will need to make a new video with the new method. I am still using the older files which work so maybe they've broken or changed something about the steps. Thanks for mentioning it!
@@DustinBrett Thanks for the reply, I attempted to follow their updated instructions (copying DLLs, installing latest C++ redistributable), but still faced the same issue. Would love an updated video if you could figure it out! The playwright approach is a little too buggy on my machine, and would also love to test against newer features
@@groundbirdaircat Ok will do! I actually just used the old setup today to debug a Safari issue, so it's still useful. I will try and get the latest one going and update once I can.
Happy to help! Hope it works out. It seems like a bit of a hack and I have heard the instructions sometimes change, but once it's up and going I have found it useful quite a few times for debugging Safari issues locally on my Windows machine. Hopefully one day Apple just releases something on Windows.
I have a problem, that isn't directly a part of this guide, but I haven't been able to find a solution anywhere. I followed the guide to download the two zip-files, merged them and all that works great. But I am trying to debug a web application that uses authentication cookies, and for some reason the webkit browser will not create that cookie. Does anyone know how to enable all cookie-related functions in the webkit/minibrowser? I would be very grateful for any pointers.
@@DustinBrett Thanks me either, but seeing issues with Websites only on Safari devices, so need to take care of. Good to know so I can stop looking into it. Safari is the new "Internet Explorer"
@@leckomio8812 Ya testing mobile devices is tricky, even for Android, you basically need to have one or use BrowserStack to get the real way it acts. The simulators can be nice but a real device is ideal.
@@DustinBrett With your build of the minibrowser, do you have your headings and font-weight overwritten by the Webkit user agent style-sheet? It seems the WebKit version behaves differently compared to the real Safari browser. It can't or it won't read the font-weight and all Headings attributes are overwritten by the user agent style-sheet "font-weight: bold". This is not happening with the real Safari. I checked the css files that come with the Webkit browser but no luck in changing the user agent settings. They are locked for whatever reason.
@@leckomio8812 I didn't have that issue actually, but indeed WebKit MiniBrowser has some differences to the full Safari browser. I've found it has a lot of toggles to add/change it to be closer to Safari, but not the same in some ways. One thing for me that happens is the backdrop filter looks wrong, but I couldn't fix that so ignored it during testing.
That would be great if they did that. It does have quite a few short comings compared to full Safari, but I still get good value out of using it. Especially now that I write Playwright tests, I find it useful to be able to debug webkit tests quickly in the Cairo UI.
Super useful for debugging Safari issues! I've had an issue with Safari and its support of WASM on my site so I'll definitely be using this. Thanks!
Good luck with debugging your issue! It is indeed very useful to be able to run something even close to Safari as a Windows user who doesn't own a Mac. I've already made some progress debugging my issue as this MiniBrowser.exe acts identical to BrowserStack with Safari 16, for the issue I care to debug.
Hi Justin, really like all your videos. If you could maybe make a video on how you landed your job at Microsoft - how you got noticed, got the interview, what your technical preparations were like - what sources you used, what language you chose for your interviews etc. that would really be kind and helpful! Keep your videos rolling man! Love 'em!
Thanks! I will for sure make a video like that in the near future. It's one I have wanted to do.
Stunning. Thanks. Was expecting on Monday to negotiate a floating licence from QA on Monday to sort out safari date input behaviour. Ta again
Happy to help! I hope that this Webkit in Windows alternative was enough to debug your date input issue. I find it quite useful to be able to run Webkit locally in Windows. But that being said, I still sometimes find use in BrowserStack which I do use at my work.
The "that was critical" @3:54 made me chuckle. Great video.
Haha, ya it doesn't work right without Dark Mode. Thanks!
BEST video ever. WP. THANKS! keep it up!
Thanks, happy you liked it! I am planning to do a new one soon that is a bit shorter and shows the latest WebKit 17.4 working.
You earned a subscriber. Brilliant video!
Much appreciated! Hope my video helped.
Thank you very much You saved me from double heart attack installing virtual with macOSX
Glad to hear it helped! It's been useful for debugging a few Safari issues locally, but I wish Apple would make an official release for us Windows users.
Thanks a lot! This video should be essential to everyone, I was looking for a solution like this for months!
Happy to help! I still use this browser often for debugging Safari issues. It's not perfect but the alternative before for people without a BrowserStack account was to buy a Mac which seems odd if Apple cares for devs to support their funky browser.
I used method 2. It works! Big big thank you!
Awesome! It's great to hear the methods are still working. I still occasionally use this WebKit browser to debug Safari issues.
dude. you're a GENIUS. THANKS OMG
Thanks! Hope this helps as it's helped me and still does.
How are you guys finding the S3 link? It looks like it's scrubbed from the console?
This seems to be a new change. Before the step was called "transfer-to-s3" but now it's "upload-file-to-s3" and it no longer has the URL. I've contributed recently to the steps on how to do this in the WebKit docs repo, I will figure out the new way (assuming there is one) and I will PR a change to the official document ( github.com/webkit/Documentation/blob/main/docs/Ports/WindowsPort.md#downloading-build-artifacts-from-buildbot ) as well as make a new video. Thanks for finding this out!
Now the link is directly on the build page at the step labeled "compile-webkit", you just click the "Archive" link which is pointed to the S3 URL.
@@DustinBrett
Thank you, this also is critical!
I agree it's critical as a web developer using Windows to have some kind of access to something close to Safari, if we can't get the "real" thing.
This is sainted gangy, nice looking out 👌🏾
Much appreciated! Assuming "sainted gangy" is a good thing. :-)
Thanks my man, this helped a lot
Happy to hear it helped!
wow, great vid. thanks for sharing your secrets
Thanks for checking it out!
Thanks man, you saved time and money (One of the two most imp. things).
Awesome to hear I have saved you either time or money, both feel like they are in short supply now-a-days.
😆 #Bitcoin@@DustinBrett
Thank you for the video!
Do you think it can be used with VENTOY to have some form of control of the files on a USB drive?
I am not familiar with Ventoy but if it's about making a boot USB that can load Safari/WebKit, I suppose this could be done that way if you had a web server and something like Linux that can run this off a boot drive.
Dustin, thank you. It's a PITA to hook up my Mac Mini and mess with the Windows firewall to allow access to my PC.
There is only one downside: cookies don't stay working so I can't sign in. I looked under the experimental features file menu and enabled one or two things. Meh, any suggestions on fixing this please?
Oh darn! It is indeed difficult to test Safari as a web developer on Windows. Sorry but I don't have any suggestions for getting WinCairo to do much besides it's initial boot state. I have found it helpful for some DOM bugs, but otherwise it does have it's shortfalls.
@@DustinBrett Dustin, not a problem. This is at least useful for quick tests. I used the second method to get the browser running. It's a bit slow though not as bad as some browsers.
Thanks ! That will help a lot :)
Awesome, happy to hear! It works with the latest WebKit 17.4 as well.
Hey! Do you know if using this would allow me to watch Apple TV+ content in 4k on my Windows PC? It's very annoying to watch everything in 720p just because I'm using a PC and not a Mac. I have a 4K Apple TV, but I want to watch on my PC so I can stream it to my friends on Discord.
I don't have Apple TV+ so I am not sure on any limitations with 4K content on Windows that could be fixed by using WebKit. I just looked into it a bit and some people have had luck with installing/up[dating HEVC codes. Another option might be the "Apple TV Preview" app on Windows Store. If none of those things work, perhaps try the steps I mention in the video to install WebKit and tell us if it helps. It is close to how Safari would be, but it's not exact and it could be lacking codecs.
Playwright worked for me. Although the behaviour I was debugging was not happening there. In real Safari it was so its not the same. Still amazing though. The other approach didn't work. I am getting error on launching the minibrowser. Code execution cannot proceed because openjp2.dll was not found. I think I followed it quite well, but I could've made a mistake somewhere.
Anyway great vibes from the video. Great delivery of useful information.
Thanks! Glad Playwright worked for you. It's possible the MiniBrowser was broken and might work next time as it's very unstable from what I've seen. I've also had a few Safari issues I couldn't recreate in this version, but it's nice to have something as a Windows user with no other real options except using BrowserStack, which isn't so bad, but isn't free.
I am also getting this error with the latest releases - Cairo (10049)/WebKitRequirements (v2023.10.31) - "The code execution cannot proceed because openjp2.dll was not found. Reinstalling the program may fix this problem." .. spoiler alert, reinstalling does not fix the problem lol
@@groundbirdaircat Ah darn, maybe I will need to make a new video with the new method. I am still using the older files which work so maybe they've broken or changed something about the steps. Thanks for mentioning it!
@@DustinBrett Thanks for the reply, I attempted to follow their updated instructions (copying DLLs, installing latest C++ redistributable), but still faced the same issue. Would love an updated video if you could figure it out! The playwright approach is a little too buggy on my machine, and would also love to test against newer features
@@groundbirdaircat Ok will do! I actually just used the old setup today to debug a Safari issue, so it's still useful. I will try and get the latest one going and update once I can.
Awesome!
Thanks! Glad you liked the tip. I've used this trick a few times since, although in general I don't think about Safari much as a Windows/Android user.
I made a repo called safari-on-windows for making this process easier, where hopefully it just works as a single install.bat script
Cool idea, thanks for making it easier for others.
thank you so much
Thank you sir, much kudos.
Happy to help! Hope it works out. It seems like a bit of a hack and I have heard the instructions sometimes change, but once it's up and going I have found it useful quite a few times for debugging Safari issues locally on my Windows machine. Hopefully one day Apple just releases something on Windows.
I have a problem, that isn't directly a part of this guide, but I haven't been able to find a solution anywhere. I followed the guide to download the two zip-files, merged them and all that works great. But I am trying to debug a web application that uses authentication cookies, and for some reason the webkit browser will not create that cookie.
Does anyone know how to enable all cookie-related functions in the webkit/minibrowser? I would be very grateful for any pointers.
Thanks, do you know how to show the responsive device options to simulate iphones and ipads like it is with the legit Safari?
I am not too familiar with that in Safari as I use Windows, but afaik Webkit does not have that feature.
@@DustinBrett Thanks me either, but seeing issues with Websites only on Safari devices, so need to take care of. Good to know so I can stop looking into it. Safari is the new "Internet Explorer"
@@leckomio8812 Ya testing mobile devices is tricky, even for Android, you basically need to have one or use BrowserStack to get the real way it acts. The simulators can be nice but a real device is ideal.
@@DustinBrett With your build of the minibrowser, do you have your headings and font-weight overwritten by the Webkit user agent style-sheet? It seems the WebKit version behaves differently compared to the real Safari browser. It can't or it won't read the font-weight and all Headings attributes are overwritten by the user agent style-sheet "font-weight: bold". This is not happening with the real Safari. I checked the css files that come with the Webkit browser but no luck in changing the user agent settings. They are locked for whatever reason.
@@leckomio8812 I didn't have that issue actually, but indeed WebKit MiniBrowser has some differences to the full Safari browser. I've found it has a lot of toggles to add/change it to be closer to Safari, but not the same in some ways. One thing for me that happens is the backdrop filter looks wrong, but I couldn't fix that so ignored it during testing.
that's good.🙂
Thanks! Ya it's quite handy for checking "Safari" issues locally.
Why don't they just publish it as "Cairo" and offer it for download? Weird...
That would be great if they did that. It does have quite a few short comings compared to full Safari, but I still get good value out of using it. Especially now that I write Playwright tests, I find it useful to be able to debug webkit tests quickly in the Cairo UI.