chromeにはfirefoxのfirebugのパクリみたいなのが標準装備されている。最近はIE8にも似たようなのが搭載されたり。 はてなのデザインの改良なんかに凄く重宝しているので、その使い方などを紹介。(もちろん普通のwebサイトでもOK) 改良したい部分(又はその近く)を右クリックして「要素を検証」を選択すると、こんな画面が表示される。Developer Tools。 左側のソースにカーソルを合わせると、要素ごとにブラウザ上のどこに対応しているかがグラフィカルに表示される。要素をクリックすると、右側には適用されているスタイルシートが分かりやすく表示され、ダブルクリックすると値を編集出来る様になっている。編集した内容は即座に反映される。"Metrics"をクリックすると、margin,border,padding,width,heightなどがいくつになっているか表示され、やはりダブル
![Google chromeによる 楽々htmlデバッグ css・javascriptなども - The Voyage of a neuromancer](https://cdn-ak-scissors.b.st-hatena.com/image/square/838ecbcf6b3c63f8d4061bd91b4f2df1ee56738e/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fn%2Fneuromancer_sho%2F20091106%2F20091106031620.png)