概要
ChromeのDevTools（F12）の機能の中で私が日常的に使うテクニックを7つ紹介したいと思います。
フロントエンドの開発・デバッグ以外にも、他人が作成したWEBページの内容を確認したり、デザイナーが画面UIの検討などに役立ちます。
スクショの日付が違うため、説明用の画像のUIに差異があると思われますが、ご自身の環境と見比べて確認していただければと思います。
起動方法
「F12キー」または「ブラウザ上で右クリックし検証」で下記のような画面が開きます。これがDevToolsです。
よく使うテクニック
1. HTMLを変更
DevToolsの要素タブを利用し、「開いたWEBページのHTMLが構成内容を確認」や「画面表示しているHTMLを操作」が可能です。
Qiitaのヘッダーの「投稿する」ボタンをもとに「更新する」と「削除する」のボタンに変えてみました。（一時的な変更なので画面をリロード（F5）すると元に戻ります）
一時的に修正してスクショをしたり、UIの検討などに役立ちます。
2. スタイルの変更
画面のスタイルについても同様に修正することができます。
elememt.styleはインライン、idやclassといったセレクタにスタイルを定義することも可能です。:hovから擬似クラスのスタイルを検証することもできます。
3. スマホのエミュレータ
スマホやタブレットがなくても画面サイズごとの確認ができます。
4. JavaScriptの実行
画面上で定義されているメソッドを実行することが可能ですが、私の場合は、高性能なエディタとして使っています。
5. Javascript変数の監視
目のアイコンから変数の中身を監視することができます。画像では、コンソール上で変数を操作していますが、画面上を操作したときに正常に値が入っているかを確認するときに役立ちます。
6. 読み込んだファイルの確認
Networkタブから、画面上で読み込んだファイルを確認できます。「ステータスコード」や「ファイルの中身」や「ファイルのURL」をよく確認します。
7. 画面のスクショ取得
全画面のスクショを取るには以下の操作をします。
- 「Ctrl] + 「Shift」+ 「p」でコマンドパレットを開く
- 「Capture full screenshot」を選択しスクショを保存
「全画面」スクショのほかに「範囲指定」や「画面表示されてる部分」のスクショも選べます。
終わりに
今回は、ChormeのDevTools（F12）で私が日常的に使うテクニックを7つに絞って紹介しました。
紹介した機能以外にも、便利な機能が沢山あるので機会があればまた紹介したいと思います。
ここまで読んでいただきありがとうございました。