Chrome Developer Toolsについて学んでみた

ウェブ開発ではChromeのDeveloperToolsを利用することになりそう。ということで、こちらも勉強してみました。今回もドットインストール！普段からちょくちょく使ってるけど、感覚で使ってたのでちゃんと解説してもらえると助かります！

ブラウザの仕組み

HTML/CSS/Imageを読み込むと、Document Object Model(DOM)がブラウザの中で作られる。これに対して、JavaScriptなどで動的に操作をすることができる。

HTML/CSS/Image -> DOM <- JavaScript

Elements
- 虫眼鏡アイコンをタップして、ページの要素をタップするとそのDOM要素が展開するのが便利。
- 右クリックでCopy as HTMLなどのメニューが使えるのが便利。
- user agent stylesheetはブラウザが自動で作成したスタイル。Computedを見ると自分のスタイルと合わせた最終結果が見れる。
Network
- 丸ボタンをクリックして有効にしておくと、別画面に遷移して戻ってきても履歴を保持してくれる。
- 右クリックでブラウザキャッシュを消したり、Cookiesを消したりできる。
Resource
- JavaScriptやCSSの編集ができる。編集履歴保存もできる。
  - BreakPointも使える！
    - 変数の値はマウスオーバーで見れる
    - ステップ実行などもできる！
- {}をクリックするとJavaScriptを整形して表示してくれる。
Console
- バツ印を押したらクリアできる
- JavaScriptをBreakPointで止めた時に、Consoleで変数名を入力すると中身が見れる。
- $$('要素')で要素を取得してログに出せる。
設定
- Emulationがすごい。
  - ConsoleのタブでEmulationが選択できる。ここで、端末を選択肢てEmulateすると画面サイズなどが変わり、iPhone等の場合はカーソルがタップ用に変わる！！