以前から、Web Developer Toolbarはよく利用していたのだが、覚え書き@kazuhi.to: Re: 第7回 ページ構造を確認する方法のところで、面白いFirefoxの拡張機能を発見してしまった。
それが、X-RayとProfessor X。
使い方は、覚え書き@kazuhi.toさんのところを読んでもらえれば分かるのだけど、まずWDTで「CSS」→「CSSを無効にする」→「すべてのCSS」を選択して、そのサイトのCSSを全て無効にしてしまう。その上で、「ツール」に「X-Ray」、もしくは「Professor X」を選択すると、CSSを切ったHTMLのみのサイトに、divやh1などの要素がズラッと並ぶ。これで、HTMLの構造を一気に理解することができる。いやー、便利。
WDTでもCSSを切ったりするのは便利なのだけど、いかんせんXHTMLとCSSがどういうふうに絡んでいるのかが分かりにくかった。（「CSSを編集する」でborderを指定してみたり、該当のCSSを消してみたり）ただ、この拡張機能なら、XHTMLとCSSの構造への理解がかなり早まるんじゃないだろうか。
