読者です 読者をやめる 読者になる 読者になる

定食屋おろポン

おろしポン酢と青ネギはかけ放題です

Webインスペクタの行番号がズレてたら直しましょう

「まあこれくらい、仕方ないか」とおもわず、直しましょう。
GoogleChromeデベロッパーツール使えばいいやん、とか言わずに。
iOS6になってリモートデバッグ*1が可能になったこともあり、SafariのWebインスペクタを使わなければいけない場面も出てくるかと思います。

基本的な直し方はこちらの記事を参考にしています。あなたも参考にしましょう。
SafariのWebインスペクタで行番号がずれる問題を解決

[追記: ライブラリのパスがころころと変わっているようです。こちらの記事に詳しいです。 http://dsuket.hatenablog.com/entry/2012/09/25/163234 ]

バックアップ

CSSのファイル名・ディレクトリが変更されたようです。編集の前にバックアップを取っておきましょう。

cd /System/Library/StagedFrameworks/Safari/WebInspector.framework/Versions/Current/Resources/
sudo cp ./Main.css ./Main.css.bk

編集

Resourceフォルダ以下のMain.cssがお目当てのファイルです。好きなエディタで編集しましょう。
Resourceフォルダの場所は上記のとおり、

/System/Library/StagedFrameworks/Safari/WebInspector.framework/Versions/Current/Resources/

です。
改行・スペース等が省かれていて、読みづらいし編集しづらいので、
{ -> {\n\t
; -> ;\n\t
} -> \n}\n\n
あたりに変換すると、だいぶ読みやすくなりますね。

あとは、以下のように書き換えればOkです。

.text-editor>.gutter>.line-number{
	padding:0 2px;
	height:14px; /* Edited */
	text-align:right;
}

.syntax-highlighted{
	color:black;
	font-family:お好きなフォント,monospace; /* Edited */
	font-size: 12px; /* Edited */
	line-height: 14px; /* Edited */
}

font-family/font-size/line-height/heightはお好みで。
.text-editor>.gutter>.line-numberのheightと、.syntax-highlightedのline-heightが同じであればズレないはずです。

ざっくりとした説明ですが、こんなかんじで快適Webインスペクタ生活を!

*1:UIWebViewやiOS上のSafariで開いているページを、OSXSafariに付属するWebインスペクタでデバッグできるナウいアレ