Chromeの開発者ツールを使って、ストレスなくフロントエンドの開発を行う

いつもなんとなく使っていたのでまとめてみました
※ここに書いているのはあくまで一部の機能です。

Chromeの開発者ツールの起動方法

1.[Ctrl] + [Shift] + [i]を同時に押す ※簡単に開けるのでおすすめ
2.右上の設定画面 → その他のツール → デベロッパーツール

Element - HTML/CSSのソースの確認

・開いているページのHTML、CSSが確認できる
・HTMLやCSSを書き換えてページの見た目を変えることができる
・ブレークポイントの設定 ※要素が変更された時、要素の属性が削除された時、要素が削除された時

Console - ログの確認、JSの実行

・エラーのログの確認
・JSコードを実行できる ※Jqueryが入っていなくても$$(hoge)の様に$を2つ付けることで、Jqueryと同様の事ができるらしい
・document.body.contentEditable=true を実行すると、開いているページをテキストエディタの様に編集することができるようになる

Sources - JSのデバック

・ブレークポイントを置いてJavaScriptのデバックをすることができる
・JavaScriptのソースにdebuggerを書くことでもブレークポイントを作成することができる。 ※個人的にモーダルのデバックなどはこれがオススメです。

NetWork - 通信の確認

・通信を確認 ※Ajaxのデバックに便利らしい、HTTPヘッダーの中身などを見ることができる
・通信にかかった時間を確認
・通信サイズの確認

Application - クッキーの確認、ページ構成の確認

・ページの構成を確認することができる
・クッキーを確認するこができる