OperaのDragonflyって何気に便利だなぁ……。

最近、そんな機能が搭載されていることに気が付いたのだが、ウェブページを弄る用事も特になかったので、そのままスルーしていたのだ。
だが、今日、ちょっとしたCSSのデバッグに使ってみたら便利だったので、ここで喧伝しておこうかなと思った次第である。
ちなみに、そのデバッグ云々と云うのはチャットメンバ氏のサイトでのこと。氏が、IEの調子が悪いので違うブラウザを導入してみたら、デザインが崩れて描画されたらしい。まぁ、ありがちな問題だな。

ともあれ、まずは問題のそのページにDragonflyでアタッチ。デザインが崩れている問題のブロックをクリックすれば、そのブロックに該当するhtmlと適用されているcssが表示される。その場でcssのプロパティを弄れるので、色々と試してみて意図通りのデザインになるように調整すれば良い。
cssが実際に記述されている箇所は、外部のcssファイルだったりヘッダだったりするが、どこに記述されている内容が、どのように適用されているのかも一目でわかるから、修正箇所の把握も容易だ。
そして、今回の問題は width と border の指定に問題があって、未定義動作になっていたようだ。と云うことがいとも簡単にわかってしまった。
ううむ、こんなツールを今まで知らなかったとは、人生損してたなぁ。