Windows で開発しているときに webkit ブラウザで表示確認をする

はじめに

Windows (+ WSL2) を開発環境としているときに、Safari でのみ発生する表示不具合を検証したいことがあった。

Safari のレンダリングエンジンと同じ webkit を用いているブラウザを使うことで検証の役に立った。

Playwright の webkit ブラウザをダウンロードするのが簡単

Playwright は webkit ブラウザでの実行もサポートしている。
https://github.com/microsoft/playwright

これは windows でもサポートされているのだが、独自に windows 用にビルドしたブラウザを利用しているようだったのでこれを利用するのが簡単と考えた。

以下のコマンドで webkit ブラウザをインストールする。

$ npx playwright install webkit

Windows の場合は C:\Users\<ユーザ名>\AppData\Local\ms-playwright\webkit-<version> にダウンロードされる。

中の実行ファイルをクリックすると、簡素なブラウザが立ち上がるので検証したいページを開けば良い。

おわりに

個人的に Safari での動作確認以外は Windows + WSL2 で Web 開発する際に不便だと思う点はないと思っていたので、これがカバーできることに気がつけてよかった。
一方で、レンダリングエンジンが同じだけで完全に Safari と挙動が一致するとは言えない点に注意したい。