【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

Google Chromeデベロッパーツールの使い方をおさらい

  • 2016.12.13
  • 2019.05.15
  • 技術
Google Chromeデベロッパーツールの使い方をおさらい

こんにちは。
今回はWeb制作でのデバッグやチューニングに役立つ、Google Chromeのデベロッパーツールを紹介します。デベロッパーツールは非常に多機能なツールですが、今回は基本的な機能3つに絞って紹介します。

デベロッパーツールでできること

  • HTMLの要素の情報やCSSでのスタイリングの状態の確認
  • スマホやタブレット等の他デバイスでの表示確認
  • ページ内に存在するエラーや警告の確認
  • ページのリクエストをしてからの通信内容を一覧で確認

・・・等々。

中でも最もよく使われるのがHTMLやCSSの状態の確認だと思います。
ページで表示崩れが発生した時などに、特定箇所のHTMLやCSSがどのように反映されているかリアルタイムで確認できるので、問題箇所をスピーディーに特定できます。また他社サイトのコードも確認できるので、「この部分どうやって書いているんだろう?」と思った箇所を効率よく調べることができて便利です。

起動方法

はじめにディベロッパーツールの起動方法についてご紹介します。まずはGoogle Chromeで適当なページを開いてみてください。

livedoor

この状態で【右クリック > 検証】で起動できます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-06_11_24_41

また毎回右クリックをせずに、キーボードショートカットで起動することも出来ます。Windowsであれば【F12】を、Macであれば【Command+Option+I】でも開くことが可能です。起動すると以下のような画面に赤枠箇所が表示されます。

livedoor_%e3%81%a8_wunderlist

Elementsタブ

まずは下図の「Elements」パネルの基本的な使い方を見ていきたいと思います。

livedoor-2

HTMLの操作

まずはHTMLを操作してみましょう。下図のアイコンをクリックしてみましょう。

livedoor-3

そして、ページ上の「主要」と書かれている部分をクリックしてみましょう。クリックした要素に対応するHTMLの箇所がハイライトします。

livedoor_%e3%81%a8_wunderlist-2

エリア内の「主要」という部分をダブルクリックしてテキストを「あいうえお」と書き換えてみましょう。ページも「あいうえお」とリアルタイムで反映されてます。

livedoor-4

CSSの操作

次はCSSを操作してみましょう。下図の赤枠箇所で操作ができます。この箇所ではHTMLの該当箇所に影響を与えている全てのCSSが確認できるので便利です。「想定していたCSSが適用されない!」といった場合に楽に原因を調べることができます。

livedoor_%e3%81%a8_wunderlist-3

例えば下図のように背景色を変えてみましょう。

livedoor_%e3%81%a8_wunderlist-4

すると下図のようにリアルタイムでサイトに反映されます。

livedoor-5

上図のようなプロパティの編集の他、プロパティの追加や削除や無効化、新しいCSSの追加等も行えます。

当たり前ですが、ディベロッパーツールで加えた編集はブラウザ上のみで適用されるものですので、サイトの読み込みをしてしまうと元に戻ってしまうので注意してください。

Consoleタブ

ConsoleタブはJavaScriptのエラーを確認できたり、任意のJavaScriptを追記して挙動などを確認することができます。

JavaScriptを追記する

下記のような形でJavaScriptを追記することができます。
このようなメッセージが連続して繰り返されるコードでは各インスタンスがそれぞれ出力されるのではなく、スタックされて図のように数字で表記されます。

レベルを変更する

Default levelsをクリックすることでConsoleでの表示レベルを変更することができます。

他にもフィルターを用いて必要なJavaScriptを検索することができることなど、JavaScript関連でエラーの発生が疑われる時はこちらで確認しましょう。

Networkタブ

Networkタブはページを開いた際にJavaScriptやCSS、画像などが読み込まれた時の通信を確認することができます。

リソース読み込み時間の測定をする

特によく使うのが右端に表示されているWaterfallです。これはリソースの読み込み時間を示します。

ここで下記のように読み込み速度を確認することで極端にリソースの読み込み時間が遅いものに関しては改善するなど、サイト速度について改善の考察ができます。

気になるコンテンツにマウスオーバーすると以下のように詳細を見ることもできます。

終わりに

いかがでしたでしょうか。今回はデベロッパーツールのごく一部の機能の紹介でしたが、ここに挙げた機能の他にも様々な機能があります。またChrome以外でも、SafariやFirefox、InternetExplorer等、他のブラウザでも同様の機能があります。いろいろ触ってぜひ使いこなしていきましよう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+