Safari の Webインスペクタで行番号がずれる問題を解決

注意: この内容は古くなっています。Safari6 に対応した記事を書きました！
Safari6 の Web インスペクタで行番号がずれる問題

Safari の開発メニューに、Webインスペクタというものがあります。
Firefoxでいうところの FireBug、Chrome の Developer Tools と同等のものです。これなくしては Webアプリの開発はできないくらい超絶便利なものなのですが、一つだけ重要な問題がありました。

それは、日本語が入っているファイルの行番号がずれて表示される、という問題です。リソースタブやスクリプトタブでファイルを開いたときに、横に行番号が表示されます。この行番号が実際のファイルの中身と同期していないのです。

実際に見た方がわかりやすいでしょう。これがその様子です。
スクリプトの方は3行だけ選択しているのですが、対応する行番号がめちゃくちゃになっています。どうも日本語が入ると行が高くなり、その分だけどんどんずれていってしまうようです。ソースが数百、数千行ともなると、このずれも大きくなり、何行目を指しているのかさっぱりわかりません。

特に JavaScript のデバッグ時に大きな問題になります。一般的にブレークポイントを置いてデバッグしますが、ブレークポイントはこの行番号の所に設置するのです。しかし、現在表示しているソースの箇所と行番号が大きく違うため、どこにブレークポイントを置いていいのか非常に難しい。

フォント関係の問題だとは思っていましたが、Safariの設定でも特にそのようなものはないし、めっきりお手上げ状態でした。

それが、遂に、解決する方法を見つけました！

Web インスペクタ自体も JavaScriptで書かれたツールで、以下のディレクトリに入っています。（Macの場合、Windowsはわかりません。。。）

2012/04/24 追記: Safari 5.1 より使用するフレームワークが変更になり、パスが変わりました。指摘頂いたk2oさんありがとうございます！

/System/Library/StagedFrameworks/Safari/WebCore.framework/Versions/Current/Resources/inspector

参考までにそれ以前の Safari の場合はこちらになります。

/System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Resources/inspector

この中の「textViewer.css」がテキストを表示する部分のCSS指定を行っています。このファイルを開いて、先頭の .text-editor 定義にフォント定義を追加します。

.text-editor {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    white-space: pre;
    overflow: auto;
    /* 以下を追記 */
    font-family: "Mig 1M", monospace;
    font-size: 11px;
    line-height: 1.3;
}

font-family と font-size はお好みで変えてください。重要なのは line-height をあわせること。固定値でも倍数でもどちらでも大丈夫なようです。

これを保存し（編集には管理者権限が必要です）、Safari を再起動すると反映されます。

直った箇所を見てみます。
ちゃんと行番号とソースの選択箇所が一致していますね！

Web インスペクタは HTMLとJSで書かれたツールなので、他にも自分用にカスタマイズすると便利になりそうですね。

これで Safari でもバリバリ開発できるぜー！