それでもデフォルトではどうも読みにくいので、手軽な設定変更で少しだけ本文を読みやすくしてみました。

cssのfont-familyを探して、以下のように設定しました。

font-family:メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;

フォントには好みもあると思いますが、少しだけ読みやすくなったと思います。

プラグインなどを追加することなく、左上のメニューから、「Web開発」、「調査」と進むだけです。

CSSのプロパティをチェックボックスでオンオフしながらレイアウトを確認したり、要素の重なりを3D表示したりできます。

入れ子になっている要素の流れもビジュアルにわかります。

レイアウトの確認やフォントの切り替えに便利だと思います。

このXRAYをブックマークレットとして登録しておけば、使いたいときにすぐに使えます。確認したい場所をクリックするだけで、id,classの名称、とwidth,height,margin,paddingが表示されます。

ブログなどで既にレイアウトの基本ができあがっていて、なおかつcssを読み直すのも面倒だという場合に便利です。

ちょっと古いですがASCII.jpの記事も参考にしてください。