Loading

プレオ日誌

blog

ブラウザのデベロッパーツール

ブラウザのデベロッパーツール

こんにちは、フロントエンドエンジニアの岡田です。

ホームページを制作する上で便利で欠かせないのがデベロッパーツールです。
今回はブラウザに標準搭載されているデベロッパーツールについて一部ご紹介したいと思います。

デベロッパーツール

デベロッパーツールで何ができるのか?

要素やスタイルの検証、ログの閲覧やJavaScriptコードの実行、ネットワークのパフォーマンスの確認、スマホ・タブレットデバイスでの表示確認などを行うことができます。

Google Chrome、Firefox、Safariなど様々なブラウザで利用することができます。
ブラウザによってメニューの表記の仕方は異なります。

 

「どうしてこの箇所が崩れているのか」
「cssが適用されていない」

場合は、このツールを使用して要素のスタイルの確認を行うと短時間で原因が分かることが多々あります。

デベロッパーツールで何ができるのか

Google Chromeの場合

右クリック→「検証」を選択します。

Google Chrome ブラウザ検証ツール

すると以下のようにデベロッパーツールが起動します。

Google Chrome ブラウザ検証ツール

Firefoxの場合

右クリック→「要素を調査」から利用できます。

Firefox ブラウザ検証ツール

Safariの場合

右クリック→「要素の詳細を表示」から利用できます。

Safari ブラウザ検証ツール

iPhone

iPhoneとMacを使うことで、iPhoneのSafariで読み込んだページをPCブラウザのデベロッパーツールと同じように確認することができます。
iPhoneだけで表示が崩れる、エラーが出ている??といった時に便利です。

1.iPhone側での設定

1.「設定」から「Safari」を選択します。

iPhoneでの設定

 

2.「詳細」を選択します。

iPhoneでの設定

3.「Webインスペクタ」をオンにします。

iPhoneでの設定

4.Safariでwebページを表示しておきます。

2.Mac側での設定

1.MacとiPhoneをケーブルでつなぎます。

2.Safariを起動します。

3.メニュータブの「開発」からiPhoneを選択します。さらにサブメニューからiPhone側のSafariで表示していたページを選択します。

Macでの設定

すると以下のようにPCブラウザ同様、ツールを起動することができます。

要素やスタイルの検証もPCと同じように確認することができます。

Macでの設定

いかがでしたか?
すでに知っていたという方が多かったかと思います。

エラーや崩れの確認以外にも、
気になったホームページをのぞいてみると面白いかもしれません!

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >

デザイン相談会
デザイン相談会を行っています。毎週月曜開催・予約制

これから開業する方はもちろん、事業主の方も大歓迎です。デザインやWEBサイト、ブランディングなどについて今現在お困りのことがあればお気軽にご相談ください。プレオデザインでお役に立てることがあれば嬉しいです。

相談会に申し込む >

TOPへ戻る