こんにちは!セミマサです。
私が愛用しているブラウザ「GoogleChrome」にはデベロッパーツールというものが備わっています。今回はデベロッパーツールの機能でよく利用しているものを紹介したいと思います!
・コマンドはWindows向けです。
・記事内のスクショは私のブログのパララックスデモサイトで撮っています。
デベロッパーツールの開き方
![デベロッパーツールの開き方_右クリック](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/dev-tool1.png?resize=600%2C377&ssl=1)
デベロッパーツールは下記3つの方法で開けます! 開いている状態で同じ操作をすれば閉じれます。
・ 右クリック→検証
・F12キーを押す
・Ctrlキー・Shiftキー・Iキーを同時押し
![セミ君](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/04/semimasa.png?w=1256&ssl=1)
私はF12キーで開くことが多いです。
HTMLやCSSのチェック
![html要素とcssの確認](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/dev-tool2_2.png?resize=800%2C455&ssl=1)
「Elements」タブと「Styles」タブからHTML要素やCSSのチェックができます。どう組んでるのか気になるサイトがあったら覗いてみると面白いかもしれません!
スマホやタブレットでの表示を確認できるデバイスモード
![デバイスモードの場所](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/dev-tool4_2.png?resize=600%2C638&ssl=1)
上図のアイコンをクリックするとデバイスモードになります(青色になっていれば起動中)。
このモードを利用すればPC版のChromeでスマホ・タブレット表示を確かめることができます。
![端末を選べる](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/dev-tool5_3.png?resize=338%2C302&ssl=1)
上図の部分を押せばどの端末にするか選べます。
![デバイスモード_ウィンドウサイズ](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/dev-tool5_2.png?resize=518%2C518&ssl=1)
上図の部分から拡大率も選べます。迷ったら「Fit to window」にしておけばOK。
うまく表示されてないなーって時はデバイスモードを起動した状態で画面を更新すると治ることがあります。
![セミ君](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/04/semimasa.png?w=1256&ssl=1)
画面の更新はF5キーを押せばOK!
ウェブページ全体のスクリーンショットが撮れる
![スクリーンショット取得](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/dev-tool6.png?resize=687%2C93&ssl=1)
デベロッパーツールを開いた状態でCtrlキー・Shiftキー・Pキーを同時押しするとコマンドの入力フォームが出てきます。上図のようにfullと入れると「Screenshot」という候補が表示されるのでクリックしましょう!
これだけでウェブページ全体のスクリーンショットが撮れちゃいます。デバイスモードとあわせればスマホやタブレット表示のスクショもバッチリ。
一部スクリーンショットがうまく撮れないページもあります。私のパララックスデモサイトではうまく撮れませんでしたが、タブメニューのデモサイトでは問題なく撮れたのでスクロールに連動するスクリプトがあるページだとうまくいかないのかもしれません。
デバッグに使えるコンソール
![スクリプトの実行](https://i0.wp.com/semimasa.com/wp-content/uploads/2019/07/dev-tool11.png?resize=390%2C214&ssl=1)
console.logで出力した値を確認したり、上図のようにその場でスクリプトを実行したりできます。主にゲーム制作時にお世話になっている機能です。
おわりに
今回はGoogleChromeのデベロッパーツールに備わっている4つの便利機能を紹介しました!
デベロッパーツールにはまだまだ多くの機能があります!色々試してみると面白いかもしれませんね。