Chrome DevTools

Googleが開発しているChromeは「ブラウザ」です。

ブラウザとは？

パソコンやスマートフォン等でWebサーバーに接続する為のソフトウェアです。
私たちが普段WebにアクセスしWebページが見れているのはこのブラウザがあるからこそです。ブラウザがなくともアクセスは出来るのですが、それは私たちが読めたものではありません。心が踊るデザインであったり、日本語で書かれて日本語で見れているのはやはりブラウザのおかげと言うことです。

Chrome DevToolsではWebページの編集ができます。
Webページのコードをちょっとした編集をしたい時や、検証をしたい時に使います。
この記事でツールって何なの？どうやって使うの？といった疑問を少しでも解消出来たらと思っております。

Chrome DevToolsとは

ブラウザであるChromeの機能の一つで主にWebアプリやWebサイトを作成するときに役立つ機能です。
例えばこのサイトってどんなコードで造られているの？っと思ったらWebページで右クリックを押して「検証」を押してみて下さい。Chrome DevToolsが立ち上がります。そこからWebサイトのコードがすべてわかります。
そこからこんな書き方があるんだ！やこのコード真似してみよう。といったようにコードを書いていくことが出来ます。
ちなみに、Chrome DevToolsはショートカットキーでも立ち上がります。
macOS command + option + i
windows Ctrl + Shift + i
是非試してみてください！

Chrome DevToolsコードを見るだけじゃない

Chrome DevToolsはコードを見るだけじゃなく編集まで出来るのです。
例えば、参考にしているサイトのレイアウトはそのままで少し色を変えたいとします。そんな時Chrome DevTools上で色のコードを変更して雰囲気を変えてみたり、フォントを変えてみたりと自分の思うようなコードを書くことが出来ます。
しかし、コードは更新すると元に戻ってしまうので注意が必要です。
またChrome DevToolsではコードのミスでエラーが発生した時、どこが間違えているのか、何が間違えているのかをおおよそで知らせてくれます。
エラーが発生してうまく作動しない時はChrome DevToolsでエラーの原因を突き止めましょう。

Chrome DevToolsのパネル

Chrome DevToolsにはそれぞれパネルがあります。各パネルには違う機能があるので簡単に説明します。

Elementsパネル

Elementsパネルは参照したWebサイトのHTMLとCSSが見ることが出来ます。
見るだけでなく編集も可能なので自分のイメージをすぐに形に出来るので重宝するパネルだと思います。実際にWebサイト製作で最も使うパネルなのではないでしょうか。
Elementsパネルでホバーした時に当てられるスタイルを確認したい時は︎︎︎︎ マウスマークをクリックし、□:hoverに ☑︎を入れるとhover時のスタイルを見ることが出来ます。

Emulation
EmulationはElementパネルを開いた時に現れるパネルです。
EmulationはスマホやタブレットでWebを見た時にどのように映るかを確認出来るパネルです。

Consoleパネル

ConsoleパネルはJavaScriptの命令を試したい時などに便利です。
プロパティを打つとそのままブラウザに反映され、どんどん試し打ちができます。
他にも色々な事が出来るので使う価値は非常にあると思います。

Sourcesパネル

ブレークポイント
処理を書いて作動させる場合、うまくいかないのは日常茶飯事です。そういう時はブレークポイントと言う機能を使ってうまくいかない原因を探って見ましょう。
ブレークポイントは任意の所で処理を一時止めてくれる機能です。
Sourcesパネルをクリックしコードを表示します。
次に行番号をクリックすると番号が点灯します。これは何かと言うと、コードの処理を点灯した行で止めますよ。という事です。
この機能を使って不具合の原因を特定しましょう。

Networkパネル

Networkパネルはファイルがいつ開いたのか、どのファイルが開いているのかを見ることができるパネルです。
Initiatorはそれぞれのファイルがどこから読み込まれたのか、を示しています。
Preserve logは通常ログはリロードすると消えて新しいログが表示されるのですが、Preserve logに☑︎を入れておくと、過去のログが消されずそのまま残ってくれます。
過去のログを消したくない時に便利です。

Performanceパネル

Webサイトの表示速度を計測してくれるパネルです。
サーバー環境を改善したいときに使うと便利ですね。

Memoryパネル

Webページのメモリの問題やメモリ使用量を参照できるパネルです。
バグによりメモリ使用量が増大したときやWebページの表示速度が遅いときなどの原因解決のために使用されることが多いです。

Applicationパネル

Webアプリなどを作成している時、そのデータをブラウザに保存したりローカルストレージなどの中身を確認したい時に使います。
また、サービスによってはCookiesを使用する場合があります。
Cookiesの中身を確認する時もApplicationパネルが役立ちます。

Securityパネル

WebサイトのHTTPプロトコルの確認やSSLの証明書の内容の確認が出来たりします。本格的に自分のサイトを持ったときはセキュリティ対策は欠かせないものです。

Lighthouseパネル

サイトにあったコードの書き方など、ファイルを圧縮した方がいいよと言った提案をしてくれるパネルです。
書き方に困った時などアドバイスを貰ってみてもいいかもしれません。

CSS Overviewパネル

これは最近追加されたパネルでWebサイトにいくつCSSが使われているのか、色はどんな色が使われているのかなどCSSの情報がわかりやすく見ることが出来ます。これを使いこなせるようになるとWebサイトの構築もしやすくなると思います。

Firefoxにもデベロッパーツールがある。
日本語化されていて、色も明確に分かれているため初心者には使いやすいツールです。
Chromeの場合は日本語が対応されていないため、慣れるまでに時間がかかります。

簡単ですがChrome DevToolsの紹介をしました。この機能はこれからどんどん改善されより便利になっていくと思っています。
これからが楽しみですね！