自己紹介

・ジャック(鶴田翔大)と申します。 ・1年ほど前からプログラミングを独学で学習し、現在は個人でWeb制作をしながら開発を目指して就活中です。 ・Twitter→https://twitter.com/jack_ASDprogram ・Qiita→https://qiita.com/jack1-2-3

本日のゴール

• 開発者ツールにどんな機能があるのかを知る。(今回はNetwork, Performance, Applicationの部分)
• ※この資料はあくまでリファレンスのような形で使っていきます。この資料や、各参考サイトを参照して、実際にデベロッパーツールを操作しながら勉強会を進めていきます。

デベロッパーツールの概要

デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。 なお、Google Chromeに限らず、FirefoxやMicrosoft Edge、Safariなどのモダンブラウザであれば似たような機能をもったツールが搭載されています。 (今回は、Google Chromeのデベロッパーツールを使っていきます。)

デベロッパーツールを起動する

・Mac:の場合 Google Chromeのメニューから**「表示」->「開発/管理」->「デベロッパーツール」**を選択して起動します。

・Windowsの場合 Google Chromeの右上のメニューから**「Google Chromeの設定」->「その他のツール」->「デベロッパーツール」**を選択して起動します。

・ショートカットキー Mac: Cmd+Opt+I Windows: Ctrl+Shift+I

(※MacもWindowsも、F12キーを押せば開けます！)

Networkパネル

参考サイト(公式ドキュメント) →https://developer.chrome.com/docs/devtools/network/reference/#network-conditions

↓のサイトを参考にNetworkパネルを見ていきます。 https://www.sakurasaku-marketing.jp/corporate/

Networkパネルでできること

・ネットワークリクエストの記録

・ページの読み込み全体でリクエストを保存する

・ページの読み込み中にスクリーンショットを保存する

・読み込み動作を変更できる

• 変更できることリスト

リクエストのログを見てみよう

• ログの中身

リクエストのTiming

• 内訳

参考サイト

DOMContentLoaded, loadに関して→https://ja.javascript.info/onload-ondomcontentloaded