GoogleChromeなどのブラウザに搭載されている機能で、 現在開いているwebサイトのHTML、CSS、JavaScriptがどのような状態になっているのかを確認することができます。
見た目の検証のみならず、パフォーマンスの改善やネットワークの監視等フロントエンド開発に必要な機能が盛りだくさんになっていますが、今回は html と css を使ったweb制作に必要な機能に絞って紹介します。
検証ツール、デベロッパーツール、DevTools 等色々な名前で呼ばれていますが、基本的に同じものを指します。
webブラウザはGoogleChromeを使います。
OSはMacOSです。ショートカットや表示が一部異なる可能性がありますが、基本的にOS間で差異はありません。
こちらのサンプルサイトを使います。下のリンクからアクセスしてください。
http://shinonome.io/frontend-basic-reproduction/
