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

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

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

`画面のどこかで右クリック → 検証でデベロッパーツール（検証ツール）を開く`

`キーボードショートカット`

-　⌘ + Opt + I （Mac）
-　F12 (Windows)

`Chromeメニューから開く`

統合開発環境Cloud9使用時は、新しいタブでプレビューを開いてから
（コード編集画面では開くとコンソールのエラーが多数になって、正しい判断ができにく・見にくい状態になってしまう）

よくない例
コード編集画面で開くと、正常な表示ができない・Cloud9のツール上のエラーが表示され、分析しにくい・みにくい状態になる

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

青いボタン Swicth DevTools to Japanese をクリック

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

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

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

実際に http://apple.com/jp/ を開いてデバイスのサイズの変更をしてみましょう
Chromeブラウザのウィンドウ幅を変更することもできますが、モニターの物理的なサイズによって最小幅・最大幅に限界があります。
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）
これがデベロッパーツールを使う主な目的です、モニターの物理的なサイズ問わず、さまざまなウィンドウ幅で確認できるようになります。

横幅・縦幅どちらの数値も下記の操作でコントロール可能
- 入力欄に直接入力＋エンターで確定
- キーボードの上下矢印キーまたは、入力欄のすぐ右の上下の矢印ボタンクリックで 1 ずつ増減微調整
- キーボードのSHIFTキー＋矢印キーで 10 ずつ増減微調整
- キーボードの⌘キー＋矢印キーで 100 ずつ増減微調整（WindowsはCtlキー+矢印キー）
- キーボードのOptキー＋矢印キーで 0.1 ずつ増減微調整（WindowsはAltキー+矢印キー）

プレビューの左右の ||をドラッグすることでも自由な幅に調整可能
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）

よく確認するデバイスサイズは、灰色のバー部分をポイントして、クリックすると一発で切り替え可能
- モバイル(S)-320px・モバイル(M)-375px・モバイル(L)-425px・タブレット-768px・ノートパソコン-1024px・ノートパソコン(L)-1440px・4K-2560px

サイズ：レスポンシブをクリックすると、確認したいモバイル端末に切り替え可能
編集をクリックすると、自由にモバイル端末を追加することが可能

ズーム機能も可能

ブラウザ本体のズーム機能と併用すると挙動がよくわからなくなるケースがあるので、ブラウザの本体側のズームは100%にしておきましょう。

また、切り替えた直後、妙に拡大されている・左右のどちらかが？切れている事象になるケースがあります。メニューからズームを一時的に100%以上に拡大してから、アドレスバーの虫眼鏡アイコンを表示させてからリセットすると解消できることがあります。

挙動がよくわからなくなった場合は、ブラウザ再起動やCloud9のプレビューを閉じて再度、開き直ししましょう

デバイス端末を回転したケースもワンクリックで確認可能（縦横の数値を入れ替えているだけ）
（GIF動画⏬はすこし再生早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）

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

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

サンプルコードもここに残しておきます。

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>

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動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）

ページ内の要素を選択して検査モードをONにして、プレビューの要素上、要素タブの<要素>上をホバーしてみましょう。どの要素か？を教えてくれ、タグ名、ID名・クラス名：レンダリングされた幅・高さのサイズを確認できます。

（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）
ページ内の要素を選択して検査モードで、要素をクリックすることで、styleタブの情報が更新され、クリックされた要素に適応されているstyleが確認できます。
＜ポイント＞ hoverしているだけの状態のままやうまく当該する要素を選択・クリックしないとその要素に適応されているstyleに情報が更新されません

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

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

要素タブで、修正したいテキスト上で、右クリックする→テキストを編集やテキスト上でダブルクリックすると、テキストをカスタマイズできます。
（GIF動画⏬はすこし早いので、GIF動画⏬をクリックして大きな画面でゆっくり動作で確認してみましょう）

デザイン変更のテストができる

flexで横並びしている場合、justify-contentで縦横を並び替えたり、チェックON・OFFでどのように聞いているか？テストができる
widthがある場合は、%を変更してみて、１行4列を 2行2列にテストしたりできる（flexはflex-wrapを明示的に指定しないと折り返してくれません）

HTMLが正しく認識しているか？チェックできる

HTMLにて、 <div と class= に半角スペースが必要であるが、詰めてしまった場合このように表示されます

HTMLにて、全角スペースが入った場合も、同様class属性が認識しなくなり、styleが効かなくなる

styleが正しく認識しているか？チェックできる

プロパティ名や値にスペル間違いがあるケース（dissplay→sが一個多い：警告マークと取り消し線表記）
全角スペースでインデント調整してしまったケース（displayの前に全角スペース混入：スペルミスと同様に警告マークと取り消し線表記）

外部ファイル（画像やcssファイル・jsファイル）が正しく認識しているか？チェックできる

main.js のつもりであったが、mani.jsのスペルミスの場合

jQueryが正しく動作しているか？チェックできる

作成途中

よく試す操作

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