chevron_left

実践で学ぶ、Google Chrome DevTools基礎
PREMIUM
第1回

実践で学ぶ、Google Chrome DevTools基礎

2016年2月12日 45min
実践で学ぶ、Google Chrome DevTools基礎 play_arrow おためし受講

スライド資料

会員登録して、全てのスライドを見よう

1 / 35

授業の概要

Google ChromeのDevToolsについて基礎を解説します。
DevToolsが扱えるようになれば、エンジニアはブラウザ上で効率的な開発が行えるようになるほか、エンジニア以外でもサイトのクオリティチェックを行う上で効率化を計ることが出来ます。

例えば…
・ブラウザ上でHTML, CSS, JSを操作できる
・ロード時間にどれくらいかかっているかがわかる
・Webサイトの改善ポイントがわかる

などなど！

本授業では以下の項目を扱う予定です。
・Devtoolsとは
・Elements
・Console
・Network
・Resources
・Sources
・Timeline
・Pagespeed

こんな人にオススメ

効率的に開発が出来ずに悩んでいる方

担当の先生／パーソナリティ

チャプター

play_arrow
自己紹介
02:51
play_arrow
アジェンダ
00:57
play_arrow
質問：DevToolsを使うと、どんなことができるようになるでしょうか？
03:56
play_arrow
Devtoolsとは
05:53
play_arrow
Elements
09:17
play_arrow
Q：Elementsの表示は英語のみでしょうか？
00:36
play_arrow
Console
02:53
play_arrow
Network
05:51
play_arrow
Q：読み込み順番で表示されてるんですか？
01:23
play_arrow
Emulation
04:24
play_arrow
まとめ
01:42
play_arrow
Q：実務では、何機種くらい確認しますか？
01:02
play_arrow
Q：Chrome DevToolsを便利するのに、おすすめなサイトとかありますか？
01:45
play_arrow
Q：FirefoxやEdgeにも似たようなツールがありますが、devtoolの良いところは何でしょう？
01:12
play_arrow
Q：DevToolsで変更した箇所を実際のファイルに反映する場合、一般的にどのような手順になるのでしょうか？
01:08
play_arrow
Q：私のDevToolsのElement表示は左がHTML、右がCSSになっています。先生の表示は上下ですが、どこで変更できますか？
00:51
play_arrow
お知らせ