Chromeデベロッパーツールの便利な使いかた
私はwebページを開発する際主にchromeで動作テストを行っています。
デバックの際もChromeデベロッパーツールを使うことが多いのですが、
やってることはエラーログやCSSのプロパティを確認することぐらいでした。
せっかくなので、知っておくと開発が捗りそうな機能を知っておきたいと思い
勉強してみました。
今後も便利な機能を見つけたら随時更新していこうと思います。
起動してすぐ要素選択モードを使う
ctrl + shift + cを押すと、
要素選択モードに入った状態でデベロッパーツールが起動します。
マウスホバーした時の状態を確認する
stylesタブの:hov（赤で囲った所）を押すと、hoverやvisitedの際のスタイルを確認できます。
色を直感的に選択する
stylesタブにあるcolorの左の「□」をクリックするとカラーピッカーが出てきます。
そのままwebページの画面にカーソルを動かすと、スポイトのようにwebページ内の好きな色を選択して、そのカラーコードを確認できます。
console.logなどを使わずJavaScriptの変数を確認する
sourceタブを開き、変数を確認したいjsファイルをsourcesから選択します。
行番号を押すとその行にブレークポイントを設定できます。
変数を確認する方法は２つあります。
変数が多すぎるときはscopeを隣のwatchに切り替えて、探したい変数名を入力するといいです。
こんな感じのボタンが表示されていますが、停止ボタンの一つ右から順に
ステップイン・ステップオーバー・ステップアウトという３つの操作になっています。
いずれも停止位置の次の処理に進むことが出来るのですが、微妙にやり方が違います。
- ステップイン
次の処理に進む。次の処理が関数ならその中に（外部ファイルであろうと）進む
1処理ずつ馬鹿丁寧に追っていくイメージ - ステップオーバー
ステップインと違って関数の中には入らない。停止位置の関数の処理を終わらせて次の処理に進む。 - ステップアウト
停止位置が関数なら、その関数の処理を一通り終わらせて関数の呼び出し元（外部ファイルであろうと）に移動する。
プロパティの値を微調整する
CSSのプロパティの値を選択時、矢印キーを押すと
値の微調整が出来ます。
もちろん手入力でも良いのですが、そこまで精度の求められない調整をするなら、
この方が早いと思います。
- 参考にさせていただいたサイト
