今回はブラウザにあるデベロッパーツールの使い方について紹介します。
開発者との会話の中で出てきたり、使いかたを知ることでテストの幅を広げることができます。
デベロッパーツールとは？
デベロッパーツールとはブラウザに標準で搭載されている機能です。
開発者向けの情報を簡単に取得できたり、画面の表示を変えたりすることが出来ます。
多機能で全てを説明するのは難しいので、実際に使うことの多い機能をベースに紹介します！
デベロッパーツールを表示する方法
今回はGoogleChromeを例にして紹介します。
※他ブラウザでも同様の機能があることが多く、操作方法も大きくは変わりません
パソコンでGoogleChromeを起動したら「F12」キーを押下、もしくは画面を右クリックしてメニューから「検証」を選択します。
上記の画像では下側に表示されていますが、配置を変更することも可能です。
配置を変更したい場合は、デベロッパーツールの右側にあるハンバーガーメニューから変更出来ます。
デベロッパーツールで良く使う機能
デペロッパーツールで良く使う機能を見ていきます。
スマートフォン表示にする
Webサービスの場合、パソコンとスマートフォンとで別で画面を用意していることが多いです。
スマートフォン用の画面を見る際、パソコンでもサクッと表示の確認をすることが出来ます。
デペロッパーツールから専用のボタンを押すことで簡単に切り替えることが出来ます。
専用のボタンを押したら、画面上部からシュミレート端末を選択出来ます。
スマートフォン表示にした後は、必ずWebブラウザを更新しましょう。
端末を選択できるようになっていますが、その端末特有の何かを確認できるわけではなく、あくまで「解像度(画面サイズ)」の確認がメインと思って使用するのがオススメです。
画面表示を横画面にしたりも出来るので、是非色々触ってみてください！
あくまでシュミレーターになるので、仕事で利用する場合は注意しましょう。
これで完全に表示を担保出来る！というわけではなく、あくまで参考程度に使うくらいが良いです。
しっかりと確認したい場合は、実機を用いて確認しましょう！
Web上の文字を削除したり変更してみる
一時的にHTMLの要素を変更することできます。
HTML要素とはつまり、Webページに表示される文字や画像のことをいいます。
みてもらった方が早いと思いますので、実際に変更してみます。
今回はGoogleのTOPページを使わせてもらい、Googleのロゴを消してみるのと、検索ボタンの文言を変更してみます。
消して大丈夫なの？！
と不安になる方もいるかもしれませんが、問題ありません。
あくまで、自分の画面に表示されているものを消しているだけなので、どこかに影響することはないです。
動画の最後でやっている通り、画面を更新すれば元に戻ります。
具体的な手順としては、下記画像の赤い枠に囲ってあるボタンを押すところからスタートです。
ボタンが押された状態で画像やボタンの上にマウスを持っていくと、どういう情報かを表示することが出来ます。
正直これだけでも便利で、そのボタンのサイズやフォントのカラーなど、どういう設定をされているか覗くことが可能です！
マウスをクリックすることで、Elementsの所にその要素が表示されます。
Elementsからその要素を右クリックするとメニューが表示されますので、「Delete Element」をクリックすることで消すことが出来ます。
何か表示崩れがあった場合に、他の要素を消して発生条件を確認してみたり、デザイン確認の際に使うと便利です。
他にも、フォントカラーを実際のWebページ上で確認できたり、ボタンの幅や余白を設定出来たりとできることはたくさんあります！
仕様書に色やフォントサイズが指定されているが、実際に合っているかわからない…。
という場合は是非デベロッパーツールから確認してみてください。
コンソールから画面を動かしてみる
最後にコンソールの機能についても簡単に触れておきます。
コンソールでは主にプログラムを入力して何かを実行したり、エラーやログの出力結果をみることが出来ます。
ここではJavaScriptを使って文字を入力し、検索する操作をしてみます。
少し専門的な話になるので深くは言及しません。
そういうことも出来るのか！くらいで覚えておくと良いかもしれません！
おわりに
今回紹介した機能は一部で、他にもできることはたくさんあります。
Networkタブから通信の状況を見たり、レスポンスの情報を見ることも出来ます。
ApplicationタブのLocalStorageから一時的に保存されている情報を消すことも出来ます。
※一時的に表示されるお知らせバーとかの表示フラグが保存されていたり
今回のようなテクニックは必ずしも「覚える必要はない」と思います。
わからなければ必要になったタイミングで調べれば良いです。
大事なことは「出来るということを知る」ことです。
「あぁ、そういえばどこかのサイトでこんなこと出来るって書いてあったな」
と知っていることで解決に繋がります。
この記事を読んで、開発者に「ブラウザのコンソールにエラー出てる？」って言われた時に戸惑うことなく返事することが出来ますね。
色々触ったり知ることで、是非自分の出来ることの幅を広げてみてください！
