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

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等の場合はカーソルがタップ用に変わる!!

参考

Pocket
LINEで送る

You may also like...