Cloud9コーディング＋Chromeデベロッパーツールでできること・活用方法を知ろう

# デベロッパーツールでどんなことができるか？

- 他のウェブサイトのコードをチェックができる
- デバイス種類を変えて表示チェックができる
- HTML要素の構造(親子関係)をチェックできる
- HTML要素に適応されているstyleをチェックできる
- 文章の変更のテストができる
- デザイン変更のテストができる
- HTMLが正しく認識しているか？チェックできる
- styleが正しく認識しているか？チェックできる
- 外部ファイル（画像やcssファイル・jsファイル）が正しく認識しているか？チェックできる
- jQueryが正しく動作しているか？チェックできる



# デベロッパーツールの起動方法

#### `画面のどこかで 右クリック → 検証 で デベロッパーツール（検証ツール）を開く`
[![Image from Gyazo](https://i.gyazo.com/791867a7c9eec3d0a3dde29ba73ca1be.png)](https://i.gyazo.com/791867a7c9eec3d0a3dde29ba73ca1be.png)
[![Image from Gyazo](https://i.gyazo.com/512c1a1faa21d60a1daa2894bedbcbc6.jpg)](https://i.gyazo.com/512c1a1faa21d60a1daa2894bedbcbc6.jpg)


#### `キーボードショートカット`
-　**⌘ + Opt + I （Mac）**
-　**F12 (Windows)**

#### `Chromeメニューから開く`
[![Image from Gyazo](https://i.gyazo.com/3a95fdd6be77be4d0feadbe8f66fa706.png)](https://i.gyazo.com/3a95fdd6be77be4d0feadbe8f66fa706.png)

:::note 
**統合開発環境Cloud9使用時**は、`新しいタブでプレビューを開いてから`
（コード編集画面では開くとコンソールのエラーが多数になって、正しい判断ができにく・見にくい状態になってしまう）
[![Image from Gyazo](https://i.gyazo.com/715e65d5a5d18d62c12ee443db423152.png)](https://i.gyazo.com/715e65d5a5d18d62c12ee443db423152.png)
[![Image from Gyazo](https://i.gyazo.com/66197642fec2251c0057bc0695354afd.png)](https://i.gyazo.com/66197642fec2251c0057bc0695354afd.png)

**よくない例**
コード編集画面で開くと、正常な表示ができない・Cloud9のツール上のエラーが表示され、分析しにくい・みにくい状態になる
[![Image from Gyazo](https://i.gyazo.com/94b85fdf872fdbb0cd404f5df39ab15b.png)](https://i.gyazo.com/94b85fdf872fdbb0cd404f5df39ab15b.png)
:::

---

# デベロッパーツールの日本語化

- 青いボタン `Swicth DevTools to Japanese` をクリック
[![Image from Gyazo](https://i.gyazo.com/06af8f07018234cfede05ccf93267b6e.png)](https://i.gyazo.com/06af8f07018234cfede05ccf93267b6e.png)


---

# デベロッパーツールの配置の変更方法

- 閉じるバツの横の３点メニューをクリックし、サブメニューの固定サイド部で配置の調整ができる
[![Image from Gyazo](https://i.gyazo.com/3d44e50949ed7d78a59dccbd9893a967.png)](https://i.gyazo.com/3d44e50949ed7d78a59dccbd9893a967.png)
[![Image from Gyazo](https://i.gyazo.com/f6ca19b7d3d5fc133c6fa04712593efa.png)](https://i.gyazo.com/f6ca19b7d3d5fc133c6fa04712593efa.png)

- 下
[![Image from Gyazo](https://i.gyazo.com/68d7b2e418c96fc7926edc151481db56.png)](https://i.gyazo.com/68d7b2e418c96fc7926edc151481db56.png)

- 左
[![Image from Gyazo](https://i.gyazo.com/4fe9499b7b137930b4543da98f8467eb.png)](https://i.gyazo.com/4fe9499b7b137930b4543da98f8467eb.png)

- 固定を解除して別ウィンドウで表示
[![Image from Gyazo](https://i.gyazo.com/1b36a11ec7c99d6e3766bee7442d549c.png)](https://i.gyazo.com/1b36a11ec7c99d6e3766bee7442d549c.png)


# 他のウェブサイトのコードをチェックができる

- どのページでもコードを見ることができます。
- たまに右クリックを禁止しているサイトもありますが、Chromeメニューから開くことは可能です
[![Image from Gyazo](https://i.gyazo.com/969116085fcb610d6f7a0c5e20b33108.png)](https://i.gyazo.com/969116085fcb610d6f7a0c5e20b33108.png)


# デバイスの種類を変えて表示チェックができる

- 実際に [http://apple.com/jp/](https://www.apple.com/jp/) を開いてデバイスのサイズの変更をしてみましょう

- Chromeブラウザのウィンドウ幅を変更することもできますが、モニターの物理的なサイズによって最小幅・最大幅に限界があります。
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）  
[![Image from Gyazo](https://i.gyazo.com/dfd4a69bf36a60870a9f62ccacfa3548.gif)](https://i.gyazo.com/dfd4a69bf36a60870a9f62ccacfa3548.mp4)

- これがデベロッパーツールを使う主な目的です、モニターの物理的なサイズ問わず、さまざまなウィンドウ幅で確認できるようになります。
[![Image from Gyazo](https://i.gyazo.com/89a28b6cb8e23c4d08dbe284e411fdde.png)](https://i.gyazo.com/89a28b6cb8e23c4d08dbe284e411fdde.png)

---

- 横幅・縦幅どちらの数値も下記の操作でコントロール可能
  - 入力欄に直接入力＋エンターで確定
  - キーボードの`上下矢印キー`または、`入力欄のすぐ右の上下の矢印ボタンクリック`で **1** ずつ増減微調整
  - キーボードの`SHIFTキー`＋`矢印キー`で **10** ずつ増減微調整
  - キーボードの`⌘キー`＋`矢印キー`で **100** ずつ増減微調整（Windowsは`Ctlキー`+`矢印キー`）
  - キーボードの`Optキー`＋`矢印キー`で **0.1** ずつ増減微調整（Windowsは`Altキー`+`矢印キー`）
[![Image from Gyazo](https://i.gyazo.com/f0c7924e80d7813cfc3fa78715fff95d.png)](https://i.gyazo.com/f0c7924e80d7813cfc3fa78715fff95d.png)

---

- プレビューの左右の `||`をドラッグすることでも自由な幅に調整可能
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう） 
[![Image from Gyazo](https://i.gyazo.com/501d26e4eeabdebaeb030f68849bf896.gif)](https://i.gyazo.com/501d26e4eeabdebaeb030f68849bf896.mp4)

---

- よく確認するデバイスサイズは、灰色のバー部分をポイントして、クリックすると一発で切り替え可能
  - `モバイル(S)-320px`・`モバイル(M)-375px`・`モバイル(L)-425px`・`タブレット-768px`・`ノートパソコン-1024px`・`ノートパソコン(L)-1440px`・`4K-2560px` 
[![Image from Gyazo](https://i.gyazo.com/064a2e5daedc39ed13d3be218843d755.png)](https://i.gyazo.com/064a2e5daedc39ed13d3be218843d755.png)
[![Image from Gyazo](https://i.gyazo.com/d2e62d2a75a91aa5edcd0177208ceae4.png)](https://i.gyazo.com/d2e62d2a75a91aa5edcd0177208ceae4.png)

---



- サイズ：レスポンシブをクリックすると、確認したいモバイル端末に切り替え可能
[![Image from Gyazo](https://i.gyazo.com/d09595e826931973609760f0400415a7.png)](https://i.gyazo.com/d09595e826931973609760f0400415a7.png)


- 編集をクリックすると、自由にモバイル端末を追加することが可能
[![Image from Gyazo](https://i.gyazo.com/c3d289cd4fb85160ac14f11a5725088c.png)](https://i.gyazo.com/c3d289cd4fb85160ac14f11a5725088c.png)


---

- ズーム機能も可能
[![Image from Gyazo](https://i.gyazo.com/c1b0f5eac3ff86b7dd8657f41d35bace.png)](https://i.gyazo.com/c1b0f5eac3ff86b7dd8657f41d35bace.png)

:::note 
ブラウザ本体のズーム機能と併用すると 挙動がよくわからなくなるケースがあるので、ブラウザの本体側のズームは`100%`にしておきましょう。
[![Image from Gyazo](https://i.gyazo.com/ec8eecf1f39bea7488dc782c5e9cfdda.png)](https://i.gyazo.com/ec8eecf1f39bea7488dc782c5e9cfdda.png)

また、切り替えた直後、妙に拡大されている・左右のどちらかが？切れている事象になるケースがあります。メニューからズームを一時的に100%以上に拡大してから、アドレスバーの虫眼鏡アイコンを表示させてからリセットすると解消できることがあります。
[![Image from Gyazo](https://i.gyazo.com/f00c15d485b21ca7de3ec0eeb719f5cc.png)](https://i.gyazo.com/f00c15d485b21ca7de3ec0eeb719f5cc.png)
挙動がよくわからなくなった場合は、ブラウザ再起動やCloud9のプレビューを閉じて再度、開き直ししましょう
:::

---

- デバイス端末を回転したケースもワンクリックで確認可能（縦横の数値を入れ替えているだけ）
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう） 
[![Image from Gyazo](https://i.gyazo.com/c6427469156403201868a9601e2b600e.gif)](https://i.gyazo.com/c6427469156403201868a9601e2b600e.mp4)


---


# HTML要素の構造(親子関係)をチェックできる ＆ HTML要素に適応されているstyleをチェックできる

- 例えば、Cloud9でこのようなコードを書いた場合、新しいタブで開いたプレビュー側でデベロッパーツールで開くとこのようになります

[![Image from Gyazo](https://i.gyazo.com/3011e9a32551f81225abb0361e4f9baf.png)](https://i.gyazo.com/3011e9a32551f81225abb0361e4f9baf.png)
[![Image from Gyazo](https://i.gyazo.com/a7124e0c9c5eba5c79d5f8b7806f13d2.png)](https://i.gyazo.com/a7124e0c9c5eba5c79d5f8b7806f13d2.png)

- サンプルコードも [ここ](http://design00.php.xdomain.jp/qiita.com/devtool/index.html) に残しておきます。

```html:index.html
<!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>HTML Sample</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="sample.js"></script>
</head>

<body>

    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    
</body>

</html>
```

```css:style.css
@charset 'utf-8';

body {
    margin: 0;
}

.container {
    display: flex;
}

.item {
    width: 20%;
    height: 80px;
    padding: 10px;
    border: 5px solid #eee;
    margin: 10px;
    background: #FFE966;
}
```



- 要素タブで、▶︎をクリックし、子要素を広げることで親子関係のチェックができる
- 要素タブで、<タグ>上をhover（クリック）した一瞬、プレビューの要素周辺にて色が表示され、margin・border・padding・widthの具合がチェックができる
- flex以外の色の詳細は、計算済みタブで確認可 
　　　　-　紫色　　　　　　(flex関連) 
　　　　-　濃いオレンジ色 （margin）
　　　　-　緑色　　　　　　(padding)
　　　　-　薄いオレンジ色 （border）
　　　　-　水色　　　　　　(width)
（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう） 
[![Image from Gyazo](https://i.gyazo.com/9ace33f127101c215776236841d00816.gif)](https://i.gyazo.com/9ace33f127101c215776236841d00816.mp4)

---


- ページ内の要素を選択して検査モードをONにして、プレビューの要素上、要素タブの<要素>上をホバーしてみましょう。どの要素か？を教えてくれ、タグ名、ID名・クラス名：レンダリングされた幅・高さのサイズを確認できます。
[![Image from Gyazo](https://i.gyazo.com/0f2f790ad8111087aede5970177db0c8.png)](https://i.gyazo.com/0f2f790ad8111087aede5970177db0c8.png)
（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう） 
[![Image from Gyazo](https://i.gyazo.com/361838734809edbb83942a6f4156423d.gif)](https://i.gyazo.com/361838734809edbb83942a6f4156423d.mp4)




- ページ内の要素を選択して検査モードで、要素をクリックすることで、styleタブの情報が更新され、クリックされた要素に適応されているstyleが確認できます。  
- **＜ポイント＞** `hoverしているだけの状態のまま`や`うまく当該する要素を選択・クリックしないと`その要素に適応されているstyleに情報が更新されません
[![Image from Gyazo](https://i.gyazo.com/2151f8422d222cc8b5be2561580bcf48.png)](https://i.gyazo.com/2151f8422d222cc8b5be2561580bcf48.png)

---

- styleタブの赤字のプロパティの上をhoverすると、青いチェックボックスが表示されます、チェックON・OFFすると、そのstyleの機能ON・OFFが確認できます。
- チェックOFFにしても無反応のものは、本当に必要なプロパティなのかを検討し、不要な場合は、削除しましょう
（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう） 
[![Image from Gyazo](https://i.gyazo.com/65638f5a273d28a138d9483294ab4d26.gif)](https://i.gyazo.com/65638f5a273d28a138d9483294ab4d26.mp4)


# 文章の変更のテストができる

- 要素タブで、修正したいテキスト上で、右クリックする→テキストを編集 や テキスト上でダブルクリックすると、テキストをカスタマイズできます。
（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう） 
[![Image from Gyazo](https://i.gyazo.com/69c0a66264283a3af5d420e2a8134f44.gif)](https://i.gyazo.com/69c0a66264283a3af5d420e2a8134f44.mp4)


# デザイン変更のテストができる
 - flexで横並びしている場合、justify-contentで縦横を並び替えたり、チェックON・OFFでどのように聞いているか？テストができる
 - [![Image from Gyazo](https://i.gyazo.com/f6c2e64a6c176ef1398b99b2a644927f.gif)](https://i.gyazo.com/f6c2e64a6c176ef1398b99b2a644927f.mp4)
 - widthがある場合は、%を変更してみて、１行4列を 2行2列にテストしたりできる（flexはflex-wrapを明示的に指定しないと折り返してくれません）
 - [![Image from Gyazo](https://i.gyazo.com/527ee2670c6ca6225174712de8d9d06a.gif)](https://i.gyazo.com/527ee2670c6ca6225174712de8d9d06a.mp4)


# HTMLが正しく認識しているか？チェックできる
- HTMLにて、 <div と class= に半角スペースが必要であるが、詰めてしまった場合このように表示されます
- [![Image from Gyazo](https://i.gyazo.com/3457f9ab3b6df1ac8c5df430cf66496b.png)](https://i.gyazo.com/3457f9ab3b6df1ac8c5df430cf66496b.png)

---

- HTMLにて、全角スペースが入った場合も、同様class属性が認識しなくなり、styleが効かなくなる
- [![Image from Gyazo](https://i.gyazo.com/36def8d4b6934719b6a8a7e2d4490ab5.png)](https://i.gyazo.com/36def8d4b6934719b6a8a7e2d4490ab5.png)

# styleが正しく認識しているか？チェックできる
- プロパティ名や値にスペル間違いがあるケース（dissplay→sが一個多い：警告マークと取り消し線表記）
- [![Image from Gyazo](https://i.gyazo.com/9e977001eba41db1b884d7c9d7d9a01d.png)](https://i.gyazo.com/9e977001eba41db1b884d7c9d7d9a01d.png)
- 全角スペースでインデント調整してしまったケース（displayの前に全角スペース混入：スペルミスと同様に警告マークと取り消し線表記）
- [![Image from Gyazo](https://i.gyazo.com/6ab0d0fc6ee3ee89abda2c4a3c27ce94.png)](https://i.gyazo.com/6ab0d0fc6ee3ee89abda2c4a3c27ce94.png)



# 外部ファイル（画像やcssファイル・jsファイル）が正しく認識しているか？チェックできる
- main.js のつもりであったが、mani.jsのスペルミスの場合
- [![Image from Gyazo](https://i.gyazo.com/ca53683cb0a9ffffa15a03789747bac2.png)](https://i.gyazo.com/ca53683cb0a9ffffa15a03789747bac2.png)

# jQueryが正しく動作しているか？チェックできる
- 作成途中




# よく試す操作
 - `width:100%` を追加してみる （`absolute` を試すときは、インライン要素化していることが多い）
 - `display` を block、inlineに切り替えてみる
 - `absolute` を試すときは、top:0,left:0で基準位置を確認する→想定外の場所に配置される場合は、position: relative指定漏れ