Grav.Tree~グラツリ

生粋のライフハッカー・すっとんが、あなたの日常をちょっと良くする方法伝授します

MENU

意外と知られていない!?Webサイト運営に役立つ開発者ツールとは

f:id:sutton5537:20181122210847p:plain

こんにちは、すっとんです。


筆者のブログに訪問していただいている方の中には、自身でWebサイトやブログサイトを運営されている方も多いと思います。

サイト運営されているということは、当然ながらサイトのデザインや配置などにも気を配っていますよね。

 

そんな方々に本日ご紹介したいのが、GoogleChrome上で使用できる「開発者ツール」です。


この開発者ツール、実は筆者もそこまで使いこなせているわけではないのですが。

本日は、最低限ここを見るだけでもサイト運営に役立つよ!というポイントをご紹介してまいりたいと思います。

 

GoogleChromeの開発者ツールとは

Webの基本的な仕組み

まずは、Webの基本的な仕組みについておさらいです。


Webについて誤解してしまっているパターンの1つとして、Webサイトを表示する際にはサーバー上にあるWebサイトを直接表示しているのではないかという考え方があります。


実はコレ間違いでして。


サーバー上に配置されたHTMLファイルやCSSファイル、画像ファイルを全部ダウンロードして、それをビューソフト(IEやGoogleChrome等のブラウザ)で表示しているというのが正しい考え方です。

 

これを踏まえてたうえで、次にお進みください。

開発者ツール

なにはともあれ、GoogleChromeを立ち上げて開発者ツールを起動してみましょう!
インストール等は不要です。


GoogleChromeを起動したら、以下のキーを押してみてください。

  • Windows:F12キーを押す
  • MAC:Command+Option+Iキーを押す

如何ですか?
こんな画面が表示されたら成功です!

 

f:id:sutton5537:20181122204945p:plain

びっくりしませんか?
筆者は初めて起動したとき、びっくりしました!
そしてそっと閉じました笑

今はちょっとだけ我慢してください!

開発者ツールの便利機能

訳の分からないものがゴチャゴチャしていますね!
ひとまず本日覚えていただきたいものをマークしてみます。

 

f:id:sutton5537:20181122205248p:plain

①自由自在にページをリアルタイム編集できる
②表示(ダウンロード)スピードを要素毎に測定できる
③ページ内のエラーを検出できる

です。
1つ1つ見てみましょう。

 

便利機能① 自由自在にリアルタイム編集できる(一時的)

例えばブログを書く場合、みなさんそれぞれ便利なサポートツールを利用されていると思います。


でもちょっとだけ色合いを変えてみたかったり、字のサイズを調整したい、そんなときありませんか?


この開発者ツールを使用すれば、とても簡単に、かつリアルタイムに変更することができます。

さっそくやってみましょう。


例えば、この白が特徴的なGoogleさんのページを一瞬だけ黒に変えてしまいます。


「Style」からFilterでColorを検索し、Backgroundの色を#fffから#000に変えると・・・

f:id:sutton5537:20181122205627p:plain

 

f:id:sutton5537:20181122205705p:plain
ほら、真っ黒!笑


ポイントは、ここで行った変更は一時的なもので、サーバー側にはなんら影響がないという点です。


冒頭でご説明した通り、今見てるページはあくまで自分の端末にダウンロードしたHTMLやCSSですので、当然ながらダウンロード後のページをいくら改変したからってサーバー側に影響はないですよね!


現にリロードすると、元の白に戻ってしまいます。

 

逆を言えば、ここで一生懸命編集して良いものを作っても一切保存はされませんので、ここで行うのはあくまで色や字の大きさなど微調整にとどめておくのが無難です。

②表示(ダウンロード)スピードを要素毎に測定できる

Webサイトである以上、表示速度が速いことに越したことはありません。
もしあなたが自身のサイトで表示速度でお悩みなら、これを試してみてください。
開発者ツールのタブから「Network」を選択し、リロードしてみましょう。

f:id:sutton5537:20181122210023p:plain
注目したいのは、「〇〇.png」や「〇〇.jpg」などの画像読み込みです。
知らず知らず大きいサイズの画像を使用していると、その画像をダウンロードするのに時間がかかってしまう可能性があります。
必要に応じて圧縮やリサイズをすることで、劇的にスピードアップするかもしれませんよ!

③ページ内のエラーを検出できる

新しいCSSの追加などを行ったときなど、どうしてもうまくいかなかったことはありませんか?


もしかすると、ページを表示する際に外部から読み込むライブラリなどでエラーが起きているかもしれません。


そんなエラーコードをチェックできるのが「Console」(コンソール)です。


例えば、グラフィカルな表示をする際に必要不可欠なJQueryというライブラリがあります。


これは、ページを表示するたびに毎回外部から「http://~~~」で呼び出されるのですが、呼び出しに失敗すると、当然ながらグラフィカルな動きをしなくなります。


そんなとき、開発者ツールではこんなエラーが・・・

f:id:sutton5537:20181122210300p:plain

必ずしもエラーの内容を全て理解する必要はありません。
この場合、なんとなくのキーワードとして「http」「https」「jquery」が浮かび上がってくれば完璧です。


あとはネットで検索して原因を探っちゃいましょう!

まとめ

以上です。
本日はGoogleChromeの開発者ツールについてご紹介しました。
実は、他のブラウザでも開発者ツールって存在するんです。
が、筆者はやはりGoogleChromeが一番使いやすいですね。
Web系のエンジニア内でも定評のあるツールです。

一見すると難しく見えるのですが、そこは物怖じせず!
あまり難しく考えずに利用できるものは利用しちゃいましょう!

では今日はこのへんで!