Google Chromeデベロッパーツールとは?出来ることや使い方を解説

この記事は2分で読めます

自分用メモ

随時追記していく

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」を押せば、メーカー毎の選択も可能



コンソール:ここをクリックするとエラーが分かる
ネットワーク:読み込むと、該当ページがどのようなファイルで構成されてるか分かる

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。