2014年8月31日日曜日
皆さんはGoogle Chromeのデベロッパーツールを使った事はあるでしょうか??
今更記事にするのも遅い気がしますが、Web開発やプログラマーなら一度は使った事のあるツールだと思います。
今回まだ、Google Chromeのデベロッパーツールの使い方が分からなくて、
不便な生活をしている開発者のタマゴを対象にして書いて行きたいと思います。
Google Chromeデベロッパーツールとは?
最近のブラウザーには大体デベロッパーツールと言うのが付属されていますが、
私は基本的にGoogle Chromeのデベロッパーツールを利用しています。
私が個人的に気に入っている機能は、
- マウスで気になる要素を選択し、HTML/CSSソースを解析出来る
- JavaScriptのエラーまた、リンクエラーを発見出来る
- ページロード時に一番読み込みにかかったファイルを探せる
- 直接HTML/CSSの編集が出来る
この4つは一番気に入ってます。
上記画像では、タイトル部分を選択し、HTMLソースCSSソースを表示しています。
では試しにこれがとうなっているのか、
デベロッパーツールで調べてみましょうか。
Google Chromeを開き、デベロッパーツールを開きます。
虫眼鏡マークを押してから、ブラウザー上の要素をマウスで選択します。
するとその要素のHTML部分が表示されます。
HTMLの構造・CSSで定義されているスタイル等簡単に見る事が可能です。
また、セレクタも分かるので、
hoverや擬似セレクタでどの様なスタイルを定義しているのかも分かります。
この様にして上手くデベロッパーツールを使いこなせれば、
ブログのデザイン等を考えたりしながら実際に組むのも簡単です。
