Safari 9.xはIE11よりも厳しい

自分が担当した箇所で不具合が発生しているという報告を受けたので、調査を行うのですが、不具合が発生しているのが iOS で、手元にデバッグできる端末がなかったので違うチームの私物を借りました。

Safari ブラウザ上で発生しているとのことだったのですが、開発環境が Windows なのでデバッグツールを使うことはできず(私物なのでデバッグ専用アプリを入れるのも除外)、どうしようかというところで、Windows でも Web インスペクタを使ってデバッグツールを開く方法があるのが分かりました。

【簡単】サイトの iPhone 表示を Windows でデバッグする方法 - Qiita

手順としては、

1. iTunes のインストール(インストールされてなければ)
2. iOS 端末側で Safari の Web インスペクタ機能を有効化
3. 最新のios-webkit-debug-proxyのダウンロードと解凍
4. WindowsPC と iOS 端末を USB 接続し、信頼をタップ
5. ios-webkit-debug-proxy.exe を実行
6. コマンドプロンプトに表示されたアドレスに Windows 側で接続
7. デバッグしたいサイトを Safari で表示

これで、Safari が表示しているサイトのデバッグができます。

iTunes をインストールしていないとエラーでコマンドプロンプトがすぐ閉じられてしまいます(20 回ぐらいやった)。

結果として何が問題だったのかというと、JavaScript でletを使っていたからでした。

Safari のバージョンが 9.x 以下だと ES5 にしか対応されていないようで、letもましてやconstも使えません。

Safari 10.0 から ECMAScript 6 (ES 6) が使えるようになりました ｜ Developers.IO

IE11 で class 構文を使っているためエラーが出ているという報告を受けて、午前中に直したのですが、IE11 ですらletが使えるので完全に盲点でした。

JavaScript でコードを書いた時は絶対にBabelを通して変換することをにします。

p { margin-bottom: 1em; } blockquote p { margin-bottom: initial; } #content ul { padding-left: 40px; } .token.operator { background-color: initial; }