Safari6 の Web インスペクタで行番号がずれる問題

前回の記事「iPhone5 と iOS6 での HTML5開発についてあれこれ」で書いたように、Safari6 の Web インスペクタで iOSのリモートでバッグが出来るようになりました!

が、また日本語(マルチバイト文字)を含むコードを表示すると行番号がずれている。。この問題は以前からあって、一応解決策もしたはずだった。参考: Safari の Webインスペクタで行番号がずれる問題を解決

しかし、Safariのバージョンが上がる度にこの辺りの設定箇所がコロコロ変わってしまうのです。Safari 5.0 までは /System/Library/Frameworks 以下にあった WebKit.framework が、Safari 5.1 では /System/Library/StagedFrameworks へ移動し、WebCore.framework となりました。(StagedFrameworks の説明はここが詳しい: 新・OS X ハッキング! 39 実は大きく変わった「Safari 5.1.4」) それが、いつのまにやらまた /System/Library/PrivateFrameworks に移動されたようです。 で、とりあえず現在(Safari 6.0.1で確認)のパスはここ /System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources

ここにある、Main.css を編集します。ミニファイ化されているので、適当なエディタで展開するといいと思います。 .text-editor { display: -webkit-box; position: relative; overflow: hidden; / 以下を追加 / font-family: "好みのフォント", monospace; font-size: 11px; line-height: 13px; }

編集内容は以前とほぼ同様。line-height が 13px とピクセル指定にしています。 .text-editor>.gutter>.line-number で指定されている物と合わせる必要があります。

ファイルを書き換えて管理者権限で保存し、Safari を再起動すると反映されます。

これで私の環境では直りましたが、まだ直らないようなら、こちらを参考にすると良いかもしれません。 Webインスペクタの行番号がズレてたら直しましょう

これで、リモートでバッグもばっちり!! と、いきたいところですが、Safari6 のWebインスペクタて使いにくいですよね。。 次回は使い方なんかを。