こんにちは！セミマサです。
私が愛用しているブラウザ「GoogleChrome」にはデベロッパーツールというものが備わっています。今回はデベロッパーツールの機能でよく利用しているものを紹介したいと思います！
・コマンドはWindows向けです。
・記事内のスクショは私のブログのパララックスデモサイトで撮っています。
デベロッパーツールの開き方
デベロッパーツールは下記3つの方法で開けます！ 開いている状態で同じ操作をすれば閉じれます。
・ 右クリック→検証
・F12キーを押す
・Ctrlキー・Shiftキー・Ｉキーを同時押し
私はF12キーで開くことが多いです。
HTMLやCSSのチェック
「Elements」タブと「Styles」タブからHTML要素やCSSのチェックができます。どう組んでるのか気になるサイトがあったら覗いてみると面白いかもしれません！
スマホやタブレットでの表示を確認できるデバイスモード
上図のアイコンをクリックするとデバイスモードになります(青色になっていれば起動中)。
このモードを利用すればPC版のChromeでスマホ・タブレット表示を確かめることができます。
上図の部分を押せばどの端末にするか選べます。
上図の部分から拡大率も選べます。迷ったら「Fit to window」にしておけばOK。
うまく表示されてないなーって時はデバイスモードを起動した状態で画面を更新すると治ることがあります。
画面の更新はF5キーを押せばOK!
ウェブページ全体のスクリーンショットが撮れる
デベロッパーツールを開いた状態でCtrlキー・Shiftキー・Pキーを同時押しするとコマンドの入力フォームが出てきます。上図のようにfullと入れると「Screenshot」という候補が表示されるのでクリックしましょう！
これだけでウェブページ全体のスクリーンショットが撮れちゃいます。デバイスモードとあわせればスマホやタブレット表示のスクショもバッチリ。
一部スクリーンショットがうまく撮れないページもあります。私のパララックスデモサイトではうまく撮れませんでしたが、タブメニューのデモサイトでは問題なく撮れたのでスクロールに連動するスクリプトがあるページだとうまくいかないのかもしれません。
デバッグに使えるコンソール
console.logで出力した値を確認したり、上図のようにその場でスクリプトを実行したりできます。主にゲーム制作時にお世話になっている機能です。
おわりに
今回はGoogleChromeのデベロッパーツールに備わっている4つの便利機能を紹介しました！
デベロッパーツールにはまだまだ多くの機能があります！色々試してみると面白いかもしれませんね。
