コーディングをスピードアップ!chromeデベロッパー・ツール10の小技

コーディングをスピードアップ!chromeデベロッパー・ツール10の小技
HTML・CSS

chromeデベロッパー・ツール(Googledevtools)は、私にとってコーディングに無くてはならない存在です。HTML・CSSコーディングに使うElementパネルだけでも超多機能で、なんとも痒いところに手が届く仕様になってますよね。というわけで、公式マニュアルを読んで、個人的に「もっと早く知っとけばよかった!」て思った小技・豆知識について書きます~。

1.Elementパネルで表示されるソースは、オリジナルのソースとは異なる

いきなり「小技」じゃないですが…。
chromeを開き、F12、またはCtrl+Shift+iでデベロッパーツールを起動させます。デフォルトではElementパネルが開き、DOMツリー(ソース)が表示されています。 これは、元ファイルのオリジナルなソースとは以下2つの理由で異なります。

  • JavascriptのDOM操作が反映されてる
  • ブラウザエンジンが正しくないマークアップを直そうとして、予期しないDOMを吐いている

…何を当たり前のことをって思われそうですが、初心者の時分は全然わからなかったんですよ。なんで違うんやーってなってました(^^;

2.左上のカーソルアイコンで、任意の要素を選択できる

カーソルアイコンをクリック(アイコンが青くなる)してからページ内の要素を選択すると、Eementパネル上のDOMにフォーカスします。いちいちDOMツリーを開閉してさまよう必要なしです。

01

3.ボックスモデルのパラメータは、右下の図から直接いじれる

特定の要素を選択すると、右下にこんなん出てます。

02

要素のボックスモデルの図解です。実は図に表示された数字は編集できます。「-」も含め各値をダブルクリックすると、値を直接入力し、見た目を変更できます。 この時加えた変更はCSSファイルに加味されません。element.styleというセレクターで処理され、HTMLに直書きしたのと同じ状態になります。表示や動きだけ確認したい時に便利。

4.「.cls」でクラスを自在に追加・削除できる

要素選択時、styleタブの上にある「.cls」をクリックすると、自由にクラスを付け替えることができます。

03

これを知るまでは、いちいち要素を右クリックして「edit as HTML」を選び、ソースを編集していました。なぜオレはあんなムダな時間を……

5.ピンアイコンで擬似クラスを与えた状態を確認できる

:hover :active :focus :visitedの状態を確認したいときは、ピンアイコンをクリックします。

04

これを知るまでは、ページ内の要素とElementパネルの間を何度も行き来したり、ソースをにらんだりしてました。なぜオレはあんなムry

6.「scroll into view」で画面外の要素を一瞬で表示できる

表示画面外の要素をDOMツリー上で右クリックすると、「scroll into view」がメニュー内に出現します。 これを選ぶと、ページの表示領域がその要素まで移ります。

05 画像をいっぱい使った長いLPなんかで重宝します。

7.DOMの開閉はカーソルキーを使うと速い

DOMは左の三角アイコンをクリックすると開閉します。これはカーソルキーでも行えます。
で開き、

06

で閉じる。

07

もちろん、で上下の行に移動です。
chromeデベロッパー・ツールは、他にも便利なショートカットをいろいろ揃えています。詳しくはこちら

8.カラーピッカーで、ページで使用中の色を簡単指定

chromeには、画像加工ソフトでよく見るカラーピッカーが備わっています。
そもそもhtml5にはカラーピッカーを出現させるタグがあるので、当然といえば当然なのですが、そこはchrome。カラーピッカーにだって便利機能がついています。

要素を選択し、右下のAdd-colorかAdd-background-colorで色にまつわるプロパティを追加するか

08

すでに記述された色コードのカラーチップをクリックすると、カラーピッカーが出現します。

09

色味だけではなく、透明度までスライダーで操作でき、コードに反映できます。
スポイトアイコンをクリック(アイコンが青くなる)すれば、ページ内のどこからでも色をもってこれます。

さらに便利なのが、右下の三角アイコンをクリックすると出現するパレット機能。 「Page colers」では、ソース内で指定している色がパレットになっています。これは便利!

9.カラーピッカーでカスタムパレットを作れる

「Custom」では、+アイコンをクリックすると選択中の色がパレットに追加され、オリジナルなパレットを作れます。 これはページをまたいでも保存されており、右クリック→clearをしない限り消えません。お手軽にカラーリングを試せますね。

10

10.カラーピッカーはさりげなくマテリアルカラーを推してくる

パレットには「Material」が用意されています。Googleの推奨する「マテリアルデザイン」のガイドラインカラーですね。迷ったらマテリアルデザインにしろってこと?
使わないからあ…。色くらい自分で決めるからあ…。

11png

まとめ:便利機能は他にもたくさん

HTML・CSS関連の小技に終始してみましたが、他にもElementパネルにはjavascriptのデバッグ機能があります。 すごく重宝する機能ですが、書こうとしたら一つの記事におさまらなくなっちゃいました。ので、また別に書こうと思います~。
ちなみに公式マニュアルには、まだまだ便利な技が載っているので、chrome使いの方は是非一度読んでみてくださいね!

  • このエントリーをはてなブックマークに追加