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 - クッキーの確認、ページ構成の確認
・ページの構成を確認することができる
・クッキーを確認するこができる