自分用メモ
随時追記していく
目次
Google Chromeディベロッパーツールとは?
Google Chromeに付属しているWebデザイナー、コーダー向けのツール。
HTMLやCSS、JavaScriptのコーディング内容を検証し、問題があれば元データを編集できる。
自分のWebページだけでなく競合のページの確認も出来るのもポイント。
※参考:クリエイティブ、プログラミング用語まとめ
ディベロッパーツールで出来ること
・Webサイトのコードの確認
→特定の場所のHTMLやCSSがどのように反映されているか確認できる
→CSSがリアルタイムに反映され視覚的に分かりやすくこぅ地区できる
・デザイン変更テスト
・スマホやタブレット等での表示チェック
※参考:Google Chrome拡張機能の開発の概要や必要な言語など
デベロッパーツールのタブ
Elements
・DOMの確認、編集・DOM要素の変更タイミングにブレークポイントを設定
・styleの確認、編集
・hoverなど状態の確認
要素がどんなタグやstyleで構成されてるか確認できる
要素を編集する事が可能
marginやpaddingも確認できる
クリックする事でこのまま編集する事も可能
Console
・任意のJSの実行(試しにコードを書ける)・JSのエラーの確認(エラーが検出された行番号やその内容を見れる)
Network
・ページを開いた際に行われた通信内容の確認(JSや画像など)・APIのAjax通信のリクエストやレスポンシブも確認できる
・該当ページがどのようなファイルで構成されてるか分かる
Sources
・デバッガーの使用Application
・クッキーやWeb Storageの確認、編集デベロッパーツールの使い方
チェックしたいページに移動して、右クリックなどで
「検証」を押せば編集ページに移動できる
(Macなら「command+option+i」のショートカットも使える)
右側の枠の左上にある「↖」のボタンで簡略化されたHTMLコードが見れる
詳細を見たい場合は「▶」を押す:右側がCSSで左側がHTML
また、「↖」の右にあるデバイス型のアイコンを押せば、
該当ページがスマホやタブレットでどのように見えるかを確認できる
「Responsive」を押せば、メーカー毎の選択も可能
コンソール:ここをクリックするとエラーが分かる
ネットワーク:読み込むと、該当ページがどのようなファイルで構成されてるか分かる
この記事へのコメントはありません。