![Hello, Stupid World!-ツール1](https://stat.ameba.jp/user_images/20130307/23/trap-z/23/6f/p/t02200180_0788064312448099280.png?caw=800)
この一番左下にあるボタンを押すと
![Hello, Stupid World!-ツール2](https://stat.ameba.jp/user_images/20130307/23/trap-z/1a/13/p/t02180038_0218003812448099278.png?caw=800)
開発者ツールがウィンドウ化されます。
![Hello, Stupid World!-ツール3](https://stat.ameba.jp/user_images/20130307/23/trap-z/3d/a5/p/t02200160_0800058212448099282.png?caw=800)
次にその横のボタン。
![Hello, Stupid World!-ツール4](https://stat.ameba.jp/user_images/20130307/23/trap-z/b4/fa/p/t02200024_0290003112448099279.png?caw=800)
これを押すと画面から選択できる状態になり、選択すると
![Hello, Stupid World!-ツール5](https://stat.ameba.jp/user_images/20130307/23/trap-z/d6/3e/p/t02200149_0427029012448099281.png?caw=800)
Elementsタグ内で選択した項目に該当する部分がフォーカスされます。
![Hello, Stupid World!-ツール6](https://stat.ameba.jp/user_images/20130307/23/trap-z/7d/5b/p/t02200078_0637022512448100935.png?caw=800)
このElementsタグ内では値を書き換える事もできます。
![Hello, Stupid World!-ツール7](https://stat.ameba.jp/user_images/20130307/23/trap-z/c6/47/p/t02200105_0465022212448100936.png?caw=800)
書き換えた結果は即座に画面に反映されます。
![Hello, Stupid World!-ツール8](https://stat.ameba.jp/user_images/20130307/23/trap-z/8a/a6/p/t02200150_0611041612448100938.png?caw=800)
また、Stylesが開いていれば選択したものに該当するスタイルが
表示されます。
![Hello, Stupid World!-ツール9](https://stat.ameba.jp/user_images/20130307/23/trap-z/6d/ef/p/t02200053_0800019112448100939.png?caw=800)
こちらも同様に書き換えることで
![Hello, Stupid World!-ツール10](https://stat.ameba.jp/user_images/20130307/23/trap-z/12/bf/p/t02200059_0800021312448100937.png?caw=800)
即座に反映され表示されます。
![Hello, Stupid World!-ツール11](https://stat.ameba.jp/user_images/20130307/23/trap-z/35/a1/p/t02200150_0609041512448101332.png?caw=800)
画面レイアウトの調整時に大変便利です。
今回はGoogle Chromeで説明しましたが同様の機能が
IE,FireFox,Operaなどでも存在します。