Web開発の時に使うと便利なChromeやFirefoxのデベロッパーツールの使い方
Web開発をするにあたり、Google Chromeの「Google Chrome Developer Tools」、Firefoxの「Firefox Developer Tools」の検証モードを使うことで効率よくWebサイトのデバッグを行うことができます。
ここではGoogle ChromeやFirefoxのデベロッパーツールの簡単な使い方を説明していきます。
沢山の機能がありますが、初心者の方でもよく使える機能をご紹介します。
Google Chrome Developer Tools
ブラウザの右上にあるアイコンをクリックして「その他のツール > デベロッパーツール」といき、デベロッパーツールを立ち上げます。
立ち上げったらこんな感じです。
Webページ内の要素について見てみましょう。
デベロッパーツールのツールバーの一番左のアイコンをクリックしてからページ内の要素を選択します。
選択した要素に効いているスタイルなどが確認できます。
どのスタイルシートの何行目なのかも表示されているので、修正する時に素早く編集する行数までいくことができます。
また、ここで検証としてスタイルを追加したり、チェックを外してスタイルを無効にすることもできます。
実際にやってみるとこのようになります。
選択しているh1要素のスタイルのcolorプロパティを青色に変更してみました。
他にも、「:hov」からactive、hover、focus、visitedの4つの擬似クラスのスタイルも確認できます。
実際にグローバルナビのアンカー要素をhoverした時のスタイルを見てみます。
「.cls」は、選択した要素にclassを追加することができます。
add new classの部分でクラスを追加します。
例えばactiveというクラスをつければ左側のソース上にクラスが追加されます。
1度追加したらチェックを外したりしてクラスの追加、削除をコントロールできます。
「+」は、新たにスタイルを書くことができます。
はじめは選択されている要素についているidやclassが設定されるので、あとは詳しいセレクタの指定を書けばいいです。
例えば、post-headerというクラス名が付いたdivを指定してみます。
「Computed」では、選択している要素のcssデータを確認することができます。
要素の幅や高さからpadding、border、marginなどを図で確認できます。
その下には効いているスタイルが細かく出ています。
スマートフォンやタブレット端末の表示・検証もできます。
左から2番目のデバイス切り替えアイコンをクリックすると、スマートフォンやタブレット端末の表示に切り替わります。
デバイスもiPhone6sなど細かく設定することができます。
こういったかたちでWebサイトを検証することができます。
たいへん便利ですね。
Firefox Developer Tools
FirefoxもChromeのデベロッパーツールとそんなに変わりありません。
ブラウザの右上にあるアイコンをクリックして「開発ツール」を選択します。
「開発ツールを表示」をクリックすればデベロッパーツールを表示されます。
デベロッパーツールのツールバーの一番左のアイコンをクリックしてからページ内の要素を選択すれば、右側に要素に関するCSSが表示されます。
あとはChromeのデベロッパーツールと同じで追加や編集をすることができます。
左の「+」がCSSの追加、真ん中がhoverなどの擬似クラスの確認、右の「.cls」がクラスの追加です。
また、「アニメーション」でtransformなどのアニメーションが確認できます。
もちろん、スマートフォンやタブレット端末の表示・検証もできます。
ツールバーの「レスポンシブデザインモード」のアイコンをクリック。
デバイスの切り替えも可能です。
以上、ChromeやFirefoxのデベロッパーツールの簡単な使い方でした。
どちらも似たような機能が付いていますね。
こちらでは紹介していませんが、SafariやIE、Edgeといったブラウザにもデベロッパーツールがあります。
どれも使い方は似たようなものです。
Web開発をする際は是非、デベロッパーツールを使って効率よく開発してください。