こんにちは。 今回はWeb制作でのデバッグやチューニングに役立つ、Google Chromeのデベロッパーツールを紹介します。デベロッパーツールは非常に多機能なツールですが、今回は基本的な機能3つに絞って紹介します。 デベロッパーツールでできること HTMLの要素の情報やCSSでのスタイリングの状態の確認 スマホやタブレット等の他デバイスでの表示確認 ページ内に存在するエラーや警告の確認 ページのリクエストをしてからの通信内容を一覧で確認 ・・・等々。 中でも最もよく使われるのがHTMLやCSSの状態の確認だと思います。 ページで表示崩れが発生した時などに、特定箇所のHTMLやCSSがどのように反映されているかリアルタイムで確認できるので、問題箇所をスピーディーに特定できます。また他社サイトのコードも確認できるので、「この部分どうやって書いているんだろう?」と思った箇所を効率よく調べること
![Google Chromeデベロッパーツールの使い方をおさらい - ECサイト構築運営に役立つ情報発信|モバイルファーストマーケティングラボ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f3b3e1e4a5b6fe96d97f97151299434479a6e4e1/height=288;version=1;width=512/https%3A%2F%2Fwww.aiship.jp%2Fknowhow%2Fwp-content%2Fuploads%2F2016%2F12%2F01-1.jpg)