peeks-blog

自分用メモ

随時追記していく

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



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