【知らない人のための】検証ツールってこんなに便利！【Google Chrome】

#はじめに

はじめまして。初投稿です。WEBCAMPのメンターをやらせていただいてます。

Webサイトを作成する際に必ずと言っていいほど(いいよね？)「検証ツール(デベロッパツール)」というものを使います。

この記事ではその便利な検証ツールの基本的な使い方と機能の紹介をしていきます！

実際にWEBCAMPの教材を進めていく際に重宝するツールとなっていますので、みなさんも手を動かして使ってみましょう！

※参考としてWEBCAMPのホームページを使わせていただきました。

---
**動作環境**
OS: macOS 10.14 Mojave
ブラウザ: Google Chrome 70.0.3538.110

---

##対象者

* HTML・CSS(JS)習い始めの人
* 検証ツールを使ったことがない人


##まずは基本的な動作から

###起動方法

* Webサイト上で右クリック→検証
* Webサイト上で【F12】 or 【Command + Option + I 】　(Windowsの方はCtrl + Shift + I )

場所を移動したい場合は<img width="30" alt="スクリーンショット 2018-12-03 13.58.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/09aee3a5-168d-6ba3-6473-0ce07c4d96c0.png">をクリックして移動先を選択。


###対応する要素とCSSの確認方法

`Elements`パネル内の<img width="33" alt="スクリーンショット 2018-12-03 13.59.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/7cb0ae8d-4a0c-380d-8546-6eb11eee6ae9.png">をクリックし要素にカーソルを合わせると左下の枠(DOMエレメントツリーという)に対応するHTMLの要素が自動的に表示されます。

右枠(サイドバー)はその要素に対応したCSSが一覧で確認できます。

![スクリーンショット 2018-12-03 14.58.57.png](https://qiita-image-store.s3.amazonaws.com/0/258797/46009bcf-b229-a752-59b2-22dc8235c81a.png)

###HTML・CSSのテスト的編集

多く使うであろう機能。これがなかなかに便利。

####HTML

DOMエレメントツリー内の変更したい部分で<br>右クリック → 【Edit as HTML】 → 編集後、枠外を左クリックで反映。

![circleanimationmuvie](https://media.giphy.com/media/2siakshuU1xitG9O2S/giphy.gif)

####CSS

サイドバーに直接編集・挿入できます。
ラジオボタンのチェックを外せば、その指定だけを外せます。

![circleanimationmuvie](https://media.giphy.com/media/tJ3HdYBsl4HmSNQ5QV/giphy.gif)


編集した内容はページ更新（Command + R または　F5）をすれば元に戻ります。

これを使うとCSSがうまく反映されない時にすぐに対応が可能です。

テスト用に簡単なサイトを作りましょう。

```html:index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>hogehoge</title>
</head>
<body>
	<h1>hogehoge</h1>
	<div class="test">テスト</div>
</body>
</html>
```

```css:style.css
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.test{
	font-size: 50ox;
	color: blue;
}
```
（この時点で間違いに気づく人もいると思いますが知らんぷりしてください（笑））

うまく表示されてないとサイドバーにエラーが表示されます。下記の場合だと`.test`の`font-size`に「Invalid property value」(プロパティ値が無効です)と書かれているので値をよーく確認してみますと…

<img width="681" alt="スクリーンショット 2018-12-03 10.05.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/b23bf7d3-30dd-ad89-efaf-0ed537e60d70.png">

値が「50 **o** x」となっていました！…というようにコードとにらめっこしなくてもすぐに原因をみつけることができます。

###ボックスモデルの確認

サイドバーの下にある四角になっている部分でmargin,border,paddingの値の確認ができます。

試しにテスト用サイトを作成してみましょう。

```html:index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<title>hogehoge</title>
</head>

<body>
	<div class="box clearfix">
		<div class="box-item"></div>
		<div class="box-item"></div>
		<div class="box-item"></div>
	</div>
</body>
</html>
```

```css:style.css
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.box{
	width: 720px;
	background-color: #ffd700;
	margin: 0 auto;
}
.box-item{
	background-color: red;
	float: left;
	margin: 10px 20px;
	width: 200px;
	height: 200px;
}
```
検証ツールで確認すると、赤色のBOXがしっかり上下に10px、左右に20pxが反映されていることがわかります。
<img width="1440" alt="スクリーンショット 2018-12-03 14.51.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/05114ffb-735e-a157-3010-9a20abdd22c1.png">


###デバイスモード

<img width="25" alt="スクリーンショット 2018-12-03 13.59.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/630f4d92-1ec1-b671-a347-74f6d13b9cd1.png">をクリックするとスマホサイズでの表示が確認できます。

レスポンシブデザインをしているサイトを確認したい時に重宝しますね。
サイドバーにもレスポンシブ対応されたCSSが反映されています。

<img width="1440" alt="スクリーンショット 2018-12-03 13.53.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/51d33f17-c765-bdb0-4e3d-170b5be2ffb2.png">

##様々な機能

他にも検証ツールにはたくさんの機能がありますが、その中の一つをご紹介しましょう。

###JavaScriptのデバック

10000回ボタンを押したら文字が表示されるテスト用サイトを作りましょう。

```html:index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="script.js"></script>
	<title>hogehoge</title>
</head>

<body>
	<h1>10000回クリックしたら...?</h1>
	<p>
		<input type="button" name="cnt" value="クリック" onClick="count()">
	</p>

	<p id="p">
		<img src="https://media.giphy.com/media/5hub03Op2aRplYCBOK/giphy.gif">
		おめでとう！
		<img src="https://media.giphy.com/media/5hub03Op2aRplYCBOK/giphy.gif">
	</p>

</body>
</html>
```

```css:style.css
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
#p{
	display: none;
}
```

```js:sprict.js
let cnt = 0;

function count(){
  cnt++;

  if (cnt >= 10000){
    const p1 = document.getElementById("p");
    p1.style.display ="block";
  }
}
```

**10000回クリックしたら隠れている文字がちゃんと表示されるか確認をしたい**のでデバック作業を行なっていきます。

####ファイル表示

ページが表示できたら検証ツールを開き、`Sources`パネルをクリックします。その後、左のタブから3つのファイルを開いた状態にします。

<img width="1440" alt="スクリーンショット 2018-12-03 19.04.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/7ba5a2df-1b0f-3bb6-9e43-63f4964f8c8c.png">

####変数の値確認

今回使っている変数はクリックした回数を格納する`cnt`です。
`Console`パネル(対話型のJavaScript実行環境)で`console.log(cnt)`と実行して確認するのも良いですが、もっと見やすい方法があります。

右枠の欄に`Watch`というのがあるのでそこの<img width="18" alt="スクリーンショット 2018-12-04 11.08.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/df51c104-915b-6c07-10c4-a37c0fd593e3.png">ボタンをクリックします。
入力欄が出てきますので、`cnt`と入力すると下記の画像のように変数名と値が表示されます。

<img width="228" alt="スクリーンショット 2018-12-04 11.09.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/36a64e2e-70a3-1d73-1b65-5f20e8189eff.png">

実際に値が変わっているかどうか確認しましょう。
今回は`cnt++;`でcntに1つ数字を足しているプログラムとなっているので数回クリックして、<img width="21" alt="スクリーンショット 2018-12-04 13.14.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/93d623e4-11a8-22c6-56a4-4949de543920.png">を押して値が更新されていればOKです。

####ブレークポイントを設定して値の変更

ブレークポイントとは、**実行中のプログラムを一時停止させる箇所**のことです。これを指定して値の変更をしましょう。

ブレークポイントの付け方は簡単で、一時停止させたい行番号のところをクリックするだけです。
今回はcntの値を10000に変更したいので4番目の行をクリックします。

<img width="982" alt="スクリーンショット 2018-12-04 14.05.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/698924f6-6a1c-37d5-c3c8-1c635a8861a3.png">
上記のように青いタグがついてあり、右枠の`Breakpoints`にクリックした行番号が表示されてあればOKです。

それでは一度ボタンをクリック実行していきましょう。
<img width="1207" alt="スクリーンショット 2018-12-04 14.11.07 1.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/396fb81d-cbca-3d83-ea0f-4b6368bce47d.png">

このような画面になって一度スクリプトが止まっている状態になります。

再度動かすには、`Paused in debugger`の隣にある<img width="26" alt="スクリーンショット 2018-12-04 16.10.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/7e3cebd6-d3d7-633a-8028-20623074701e.png">ボタンを押すとブレークポイント後のスクリプトが実行されます。

また、右枠の<img width="30" alt="スクリーンショット 2018-12-04 16.18.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/2db6f3c9-1003-543f-1560-67eec7d1f035.png">をクリックすると一行ずつスクリプトが実行されます。

これでブレークポイントをつけることができたので、あとは一時停止した際に変数の値を変更していきましょう。

変数の値の変更の仕方は、ブレークポイントをつけた青色のところを右クリックし、【Edit breakpoint】→枠内を`cnt = 10000`と入力します。

<img width="771" alt="スクリーンショット 2018-12-04 17.49.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/4d54f02b-db98-dc91-5df0-f992926f012a.png">

変更をしたら下記のようにオレンジ色になるのでこれで変更ができました。
<img width="91" alt="スクリーンショット 2018-12-04 17.51.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/258797/795adc9a-302e-fdb9-8624-89537bd1fbc5.png">

あとは同じように実行していただくと、10000回押されたことになって（`watch`の中身を確認してみてください）隠れていた文字が表示されるようになります！
どんなものが表示されるかは、みなさんの目でご確認ください！！

###エラー文表示も

デバック機能なので当然エラーがあれば警告文も表示されます。

仮に変数の綴りを間違えてしまったら(`cnt`を`cut`と書いてしまった)、ボタンをクリックした際に該当箇所に波線が引かれて、`Console`上にエラー文が表示されます。![スクリーンショット 2018-12-04 18.05.04.png](https://qiita-image-store.s3.amazonaws.com/0/258797/e219072c-9799-369f-79ad-35ee7539d647.png)

(この場合ですと、`Uncaucht ReferenceError: cut is not defined`(cntという関数は定義されてませんよ)となっています。)

このようにエラーした部分とその原因が一目でわかる優れものとなっています！


#終わりに

私はこの検証ツールを使えるようになったおかげで、Webサイト作成が楽しくなって日々の生活が充実し~~、好きな人ともうまくいき、結婚することができ~~ました！:sunglasses::sunglasses:


いままであげてきたのは使い方のほんの一例です！他にもネットワーク関連の事やセキュリティ面の事も確認できるのでもし気になった方は調べてみてください！！