ソースをビジュアルで確認「View Source Chart」 // MOONGIFT Archived

IE、Firefox、Opera等、ブラウザは複数存在する。各ブラウザで同じ表示を保てればいいが、そう簡単にはいかない。特にそれまでIEでのみデザインを調整し、はじめてFirefoxで見たときなどは目も当てられないくらい乱れていることがある。

原因は様々に考えられるが、ひとつの要因としてHTMLが正確でない事が挙げられる。ブラウザがうまく表示してしまい、タグが多少抜けていてもそれが分からないのだ。そこでソースを見やすく表示してみよう。

今回紹介するフリーウェアはView Source Chart、ソースをビジュアル化し、見やすくするFirefoxアドオンだ。

通常、Firefoxのソース表示ではハイライト表示までだ。これでは横幅の長いHTMLを表示する際は不便だ。View Source Chartは構文を解析して囲みごとに色分けして表示してくれるので、ネストの間違いがあっても分かりやすい。

また、折りたたみもできるので見たくない場所を隠しつつ、全体の構造を見ることもできる。デザインの問題がHTML構造にあるならば、View Source Chartを使えば問題の解決が早いだろう。

システムによって、ビューが細分化されたテンプレート化していると、個別では正しくても全体ではおかしいといった事は良くある。デザイナはもちろん、プログラマでも必見のツールだ。尚、現状のバージョンは2.5系で、2.6系からシェアウェアになるらしいので、気になる方は早めにチェックしておこう。