« 年末年始休業のお知らせ | メイン | 年末年始のツケ? »

Google ChromeがFirefox+Firebug並にWeb開発向けブラウザな所

明けましておめでとうございます。今年もよろしくお願いします。

さて、ここ何日か、Web開発付いていたのですが、個人的に、ブラウザはFirefoxから完全にChromeに切り替わりました。調査ではSafariを抜いたそうで、たぶん一般人にはどうでもいいことだとおもうのですが、開発視点からするとChromeはあらためてよくできているな、と思います。

12月世界ブラウザシェア、「Chrome」が「Safari」を上回る--Net Applications調査
http://japan.cnet.com/news/media/story/0,2000056023,20406120,00.htm

動作が軽いのはもちろんですが、特に「要素を検証」コマンドを使いこなすとFirebug並にデバッグできるのがすばらしいです(Firebugで言うところの「要素を調査」)。

web:Google Chromeの「要素を検証」機能が便利すぎる
http://naglly.com/archives/2008/09/webgoogle-chrome-2.php

使い方は簡単で、たとえば、表示がおかしい要素のところで右クリック→「要素を検証」を選択すると、HTMLインスペクターがでます。JSで動的に表示されているところもレンダリング後のHTMLがきちんと表示されます。

capture_05012010_170214.jpg


capture_05012010_170244.jpg

インスペクター以外にもページのパフォーマンスをチューニングするためのリソースパネルや、Cookieビューワーなど、Web開発者必携ツールが一通りそろってます。

また、画面下、左から2つめのアイコン「Show Console」でコンソールを表示してF5キーでリロードすると、HTMLやJSの不具合もメッセージで表示されます。

capture_05012010_170302.jpg


あと、これは「要素を検証」ではないのですが、意外と便利なのがソース表示にアドレスバーがついていることです。たとえば

http://codezine.jp/article/detail/1
のソースをみると

view-source:http://codezine.jp/article/detail/1
というアドレスになるのですが、それでは、id=100はどうなっているのかな、とアドレスバーを

view-source:http://codezine.jp/article/detail/100
という風に、直接たたけば、ソースの変化をリアルタイムで観測できたりするわけです。

capture_05012010_170838.jpg


FirefoxのFirebugにあってChromeに無いものと言えば、HTMLやJSの複数行での編集エリアくらいでしょうか。これがついたらもう完璧です。

スポンサーサイト