kkamegawa's weblog

Visual Studio,TFS,ALM,VSTS,DevOps関係のことについていろいろと書いていきます。Google Analyticsで解析を行っています

IE8の開発者ツールも便利

L'eclat des jours(2011-07-06)
会社の都合でまだWindows 7 + IE8ですが、会社で有志が作って公開してくれているとあるサービスがあるのですが、これが遅い。Mcafee Enterprise 8.7 Patch 5がWindowsのバックアップ中しょっちゅう死ぬ*1のですが、それを除いても遅い。
Web開発やデバッグは得意じゃないけど、そこでF12キーをぽちっとな。

  • 読み込まれているjavascriptソースがjsファイル単位であけっぴろげ
  • 読み込まれているスタイルシートもばっちり。チェックを外せばそのスタイルを一括で有効/無効にしてIE上で再描画。効果がすぐわかる。
  • htmlソースもきれいに整形して表示(ちなみに気絶しそうな4段tableレイアウトでした…そしてDOM参照して一番奥のtableの中身書き換えてる)
  • プロファイラーでJavaScriptのどこで時間がかかってるかわかりやすく表示

Webのデバッグって、少なくともIE7の時代まではやる気も起きなかったのですが*2、今は私でも10分位で私にも製作者に「こことここがこう悪いので遅いよー」とか連絡することができました。
tableレイアウトからCSSレイアウトに移行すると、お定まりのIE6では…という問題が出てきたので、妥協できる範囲で速度を改善しつつ、tableレイアウトを改造してもらいました。おかげで前よりはかなり早い。当然というか、IE9では笑っちゃうくらい早い。多段tableレイアウトで一番奥のDOM参照しててもなんのその。
IE9だとさらに追加されているんですよね…私はWebの開発が得意ではないけれど、F12キーのおかげで、ほかの人が「なんでIE6ではここが見えないのー」とかいう疑問に5分位で回答することができるようになりました!
レイアウトがおかしいよーという場合、CSSというものがあるという程度の知識さえあれば、あとはF12キーを押して、「CSS」タブにある中のものを片っ端からチェックON/OFFするだけで、たどり着けるんじゃないでしょうか。

*1:このおかげでイベントビューアまっかっかです

*2:FirebugとかFidderとかは知っていましたけど