こんにちは。 今回はWeb制作でのデバッグやチューニングに役立つ、Google Chromeのデベロッパーツールを紹介します。デベロッパーツールは非常に多機能なツールですが、今回は基本的な機能3つに絞って紹介します。 デベロッパーツールでできること HTMLの要素の情報やCSSでのスタイリングの状態の確認 スマホやタブレット等の他デバイスでの表示確認 ページ内に存在するエラーや警告の確認 ページのリクエストをしてからの通信内容を一覧で確認 ・・・等々。 中でも最もよく使われるのがHTMLやCSSの状態の確認だと思います。 ページで表示崩れが発生した時などに、特定箇所のHTMLやCSSがどのように反映されているかリアルタイムで確認できるので、問題箇所をスピーディーに特定できます。また他社サイトのコードも確認できるので、「この部分どうやって書いているんだろう?」と思った箇所を効率よく調べること