デベロッパーツールは、Google Chromeに組み込まれたツールで、開発者がWebサイトのコードを調べたり、デバッグしたりするのに役立ちます。このツールを使うことで、サイトのパフォーマンスをチェックしたり、改善することができます。簡単に言うと、Webサイトの裏側を見ることができる便利なツールです。
デベロッパーツールの中でも特に利用頻度の高い、HTMLとCSSの検証をするための「Elementsパネル」とスマートフォン表示を検証するための「デバイスモード」は知っておきましょう。
[Windows 起動方法のショートカットキー]
Ctrl + Shift + i
[Mac 起動方法のショートカットキー]
command + option + i
![](https://blog.bnd.jp/wp-content/uploads/スクリーンショット-2024-04-15-18.35.20-1024x417.png)
シュミレーションができて font-size: 30%; にするとこうなります。
![](https://blog.bnd.jp/wp-content/uploads/スクリーンショット-2024-04-15-18.54.48-1024x417.png)
スマートフォン表示を検証するための「デバイスモード」
![](https://blog.bnd.jp/wp-content/uploads/スクリーンショット-2024-04-15-18.57.34-1024x417.png)
詳細は、ウェブ上にあふれていますので、ぜひ検索してみてください。
![](http://www.bnd.jp/image/lgmn.png)