2021年9月3日のブックマーク (1件)

  • Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説

    デベロッパーツールとは、Google Chromeに標準搭載されている開発者用の検証ツール(デバッグツール)で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。 この記事では、デベロッパーツールの中でも特に利用頻度の高い、HTMLCSSの検証をするための「Elementsパネル」と、スマートフォン表示を検証するための「デバイスモード」に的を絞って解説していきます。 今まで、デベロッパーツールを使ったことが無い方でも分かりやすい、初心者向けの内容になっています。この記事の内容を習得すると、ページ修正前の表示検証や、表示崩れの原因特定などができるようになると思います。ぜひ実務で活用してみてください。 ※記事の公開/更新時のGoogle Chromeのバージョンは107。 起動方法 まずは、デベロッパーツールで検証したいWebページ、またはローカル環境で制作中のH

    Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説
    naopontan
    naopontan 2021/09/03
    “適用中のメディアクエリーを表示する 画面上部に表示されている、青、緑、オレンジのバーは、メディアクエリーの指定方法の違いを示しています。”